mirror of
https://github.com/graphql-hive/console
synced 2026-05-22 00:28:46 +00:00
feat: remove the legacy routes (#81)
This commit is contained in:
Laurin Quast
GitHub
parent
4e23275fab
commit
5af93b885e
14 changed files with 0 additions and 1460 deletions
|
|
@ -1,30 +0,0 @@
|
|||
import * as React from 'react';
|
||||
import 'twin.macro';
|
||||
import { useRouteSelector } from '@/lib/hooks/use-route-selector';
|
||||
import { Page } from '@/components/common';
|
||||
import { TargetView } from '@/components/target/View';
|
||||
import { Versions } from '@/components/target/history/Versions';
|
||||
|
||||
const HistoryView: React.FC = () => {
|
||||
const router = useRouteSelector();
|
||||
|
||||
return (
|
||||
<Page title="Schema History" subtitle="A list of published changes for your GraphQL schema.">
|
||||
<div tw="flex flex-row h-full">
|
||||
<div tw="flex-grow overflow-x-auto divide-y divide-gray-200">
|
||||
<Versions
|
||||
selector={{
|
||||
organization: router.organizationId,
|
||||
project: router.projectId,
|
||||
target: router.targetId,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Page>
|
||||
);
|
||||
};
|
||||
|
||||
export default function TargetHistory() {
|
||||
return <TargetView title="History">{() => <HistoryView />}</TargetView>;
|
||||
}
|
||||
|
|
@ -1,129 +0,0 @@
|
|||
import * as React from 'react';
|
||||
import tw, { styled } from 'twin.macro';
|
||||
import formatDate from 'date-fns/format';
|
||||
import { useQuery } from 'urql';
|
||||
import { Tooltip } from '@chakra-ui/react';
|
||||
import { useRouteSelector } from '@/lib/hooks/use-route-selector';
|
||||
import { CompareDocument, OrganizationFieldsFragment } from '@/graphql';
|
||||
import { Page } from '@/components/common';
|
||||
import { TextToggle } from '@/components/common/Toogle';
|
||||
import { DataWrapper } from '@/components/common/DataWrapper';
|
||||
import { TargetView } from '@/components/target/View';
|
||||
import { Compare, View } from '@/components/target/history/Compare';
|
||||
import { MarkAsValid } from '@/components/target/history/MarkAsValid';
|
||||
import { useTargetAccess, TargetAccessScope } from '@/lib/access/target';
|
||||
|
||||
const Value = tw.div`text-base text-gray-900 dark:text-white`;
|
||||
const ValueLabel = tw.div`text-xs text-gray-500 dark:text-gray-400`;
|
||||
const Status = styled.span(({ valid }: { valid?: boolean }) => [
|
||||
tw`mx-auto my-2 block w-2 h-2 rounded-full`,
|
||||
valid ? tw`bg-emerald-400` : tw`bg-red-400`,
|
||||
]);
|
||||
|
||||
const VersionView: React.FC<{
|
||||
organization: OrganizationFieldsFragment;
|
||||
}> = ({ organization }) => {
|
||||
const router = useRouteSelector();
|
||||
const [view, setView] = React.useState<View>(View.Text);
|
||||
const [query] = useQuery({
|
||||
query: CompareDocument,
|
||||
variables: {
|
||||
organization: router.organizationId,
|
||||
project: router.projectId,
|
||||
target: router.targetId,
|
||||
version: router.versionId,
|
||||
},
|
||||
});
|
||||
const canModifyState = useTargetAccess({
|
||||
scope: TargetAccessScope.RegistryWrite,
|
||||
member: organization.me,
|
||||
redirect: false,
|
||||
});
|
||||
|
||||
const version = query.data?.schemaVersion;
|
||||
|
||||
return (
|
||||
<DataWrapper query={query}>
|
||||
{() => (
|
||||
<Page
|
||||
title={`Schema Version`}
|
||||
subtitle={version.id}
|
||||
scrollable
|
||||
actions={
|
||||
<>
|
||||
{canModifyState && <MarkAsValid version={version} />}
|
||||
<TextToggle
|
||||
left={{
|
||||
label: 'Changes',
|
||||
value: View.Text,
|
||||
}}
|
||||
right={{
|
||||
label: 'Diff View',
|
||||
value: View.Diff,
|
||||
}}
|
||||
selected={view}
|
||||
onSelect={setView}
|
||||
/>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<div tw="h-full flex flex-col">
|
||||
<div tw="mb-6 p-3 flex flex-row items-center space-x-12 bg-gray-100 dark:bg-gray-900 rounded-sm">
|
||||
<div>
|
||||
<Value title={version.date}>{formatDate(new Date(version.date), 'yyyy-MM-dd HH:mm')}</Value>
|
||||
<ValueLabel>Published</ValueLabel>
|
||||
</div>
|
||||
|
||||
<Tooltip
|
||||
label="Identifier of schema push action in your system, usually Git commit sha"
|
||||
fontSize="xs"
|
||||
placement="bottom-start"
|
||||
>
|
||||
<div>
|
||||
<Value>{version.commit.commit}</Value>
|
||||
<ValueLabel>Commit</ValueLabel>
|
||||
</div>
|
||||
</Tooltip>
|
||||
<Tooltip label="Author of the schema push action" fontSize="xs" placement="bottom-start">
|
||||
<div>
|
||||
<Value>{version.commit.author}</Value>
|
||||
<ValueLabel>Author</ValueLabel>
|
||||
</div>
|
||||
</Tooltip>
|
||||
|
||||
{version.commit.service && (
|
||||
<Tooltip label="Source of schema change" fontSize="xs" placement="bottom-start">
|
||||
<div>
|
||||
<Value>{version.commit.service}</Value>
|
||||
<ValueLabel>Service</ValueLabel>
|
||||
</div>
|
||||
</Tooltip>
|
||||
)}
|
||||
{version.valid && (
|
||||
<Tooltip
|
||||
label={version.valid ? 'Composed successfully' : 'Failed to compose'}
|
||||
fontSize="xs"
|
||||
placement="bottom-start"
|
||||
>
|
||||
<div>
|
||||
<Value>
|
||||
<Status valid={version.valid} />
|
||||
</Value>
|
||||
<ValueLabel>Status</ValueLabel>
|
||||
</div>
|
||||
</Tooltip>
|
||||
)}
|
||||
</div>
|
||||
<div tw="flex-grow">
|
||||
<Compare view={view} comparison={query.data.schemaCompareToPrevious} />
|
||||
</div>
|
||||
</div>
|
||||
</Page>
|
||||
)}
|
||||
</DataWrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export default function TargetHistory() {
|
||||
return <TargetView title="History">{({ organization }) => <VersionView organization={organization} />}</TargetView>;
|
||||
}
|
||||
|
|
@ -1,465 +0,0 @@
|
|||
import React, { useCallback } from 'react';
|
||||
import tw from 'twin.macro';
|
||||
import {
|
||||
useDisclosure,
|
||||
Modal,
|
||||
Button,
|
||||
ModalOverlay,
|
||||
ModalContent,
|
||||
ModalHeader,
|
||||
ModalBody,
|
||||
Code,
|
||||
ModalFooter,
|
||||
ModalCloseButton,
|
||||
Alert,
|
||||
AlertTitle,
|
||||
AlertDescription,
|
||||
Spinner,
|
||||
Link,
|
||||
InputGroup,
|
||||
Input,
|
||||
InputRightElement,
|
||||
IconButton,
|
||||
useColorModeValue,
|
||||
Tooltip,
|
||||
Editable,
|
||||
EditablePreview,
|
||||
EditableInput,
|
||||
} from '@chakra-ui/react';
|
||||
import { VscPlug, VscClose, VscSync } from 'react-icons/vsc';
|
||||
import { useQuery, useMutation } from 'urql';
|
||||
import { useDebouncedCallback } from 'use-debounce';
|
||||
import {
|
||||
SchemasDocument,
|
||||
SchemasQuery,
|
||||
ProjectFieldsFragment,
|
||||
ProjectType,
|
||||
TargetFieldsFragment,
|
||||
OrganizationFieldsFragment,
|
||||
CreateCdnTokenDocument,
|
||||
SchemaSyncCdnDocument,
|
||||
UpdateSchemaServiceNameDocument,
|
||||
} from '@/graphql';
|
||||
import { Description, Page } from '@/components/common';
|
||||
import { DataWrapper } from '@/components/common/DataWrapper';
|
||||
import { GraphQLSDLBlock } from '@/components/common/GraphQLSDLBlock';
|
||||
import { TargetView } from '@/components/target/View';
|
||||
import { NoSchemasYet } from '@/components/target/NoSchemasYet';
|
||||
import { CopyValue } from '@/components/common/CopyValue';
|
||||
import { useTargetAccess, TargetAccessScope } from '@/lib/access/target';
|
||||
|
||||
const Block = tw.div`mb-8`;
|
||||
|
||||
const SchemaServiceName: React.FC<{
|
||||
version: string;
|
||||
schema: SchemasQuery['target']['latestSchemaVersion']['schemas']['nodes'][0];
|
||||
target: SchemasQuery['target'];
|
||||
project: ProjectFieldsFragment;
|
||||
organization: OrganizationFieldsFragment;
|
||||
}> = ({ target, project, organization, schema, version }) => {
|
||||
const [mutation, mutate] = useMutation(UpdateSchemaServiceNameDocument);
|
||||
const hasAccess = useTargetAccess({
|
||||
scope: TargetAccessScope.RegistryWrite,
|
||||
member: organization.me,
|
||||
redirect: false,
|
||||
});
|
||||
|
||||
const submit = useCallback(
|
||||
(newName: string) => {
|
||||
if (schema.service === newName) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (newName.trim().length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
mutate({
|
||||
input: {
|
||||
organization: organization.cleanId,
|
||||
project: project.cleanId,
|
||||
target: target.cleanId,
|
||||
version,
|
||||
name: schema.service!,
|
||||
newName,
|
||||
},
|
||||
});
|
||||
},
|
||||
[mutate]
|
||||
);
|
||||
|
||||
if ((project.type !== ProjectType.Federation && project.type !== ProjectType.Stitching) || !hasAccess) {
|
||||
return <>{schema.service}</>;
|
||||
}
|
||||
|
||||
return (
|
||||
<Editable defaultValue={schema.service} isDisabled={mutation.fetching} onSubmit={submit}>
|
||||
<EditablePreview />
|
||||
<EditableInput />
|
||||
</Editable>
|
||||
);
|
||||
};
|
||||
|
||||
const Schemas: React.FC<{
|
||||
organization: OrganizationFieldsFragment;
|
||||
project: ProjectFieldsFragment;
|
||||
target: SchemasQuery['target'];
|
||||
filterService?: string;
|
||||
}> = ({ organization, project, target, filterService }) => {
|
||||
const schemas = target.latestSchemaVersion?.schemas.nodes ?? [];
|
||||
|
||||
if (!schemas.length) {
|
||||
return <NoSchemasYet />;
|
||||
}
|
||||
|
||||
if (project.type === ProjectType.Single) {
|
||||
return <GraphQLSDLBlock tw="mb-6" sdl={schemas[0].source} url={schemas[0].url} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{schemas
|
||||
.filter(schema => {
|
||||
if (filterService && schema.service) {
|
||||
return schema.service.toLowerCase().includes(filterService.toLowerCase());
|
||||
}
|
||||
|
||||
return true;
|
||||
})
|
||||
.map(schema => (
|
||||
<Block key={schema.id}>
|
||||
<GraphQLSDLBlock
|
||||
sdl={schema.source}
|
||||
url={schema.url}
|
||||
title={
|
||||
<SchemaServiceName
|
||||
version={target.latestSchemaVersion?.id}
|
||||
schema={schema}
|
||||
target={target}
|
||||
project={project}
|
||||
organization={organization}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</Block>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const SchemaView: React.FC<{
|
||||
organization: OrganizationFieldsFragment;
|
||||
project: ProjectFieldsFragment;
|
||||
target: TargetFieldsFragment;
|
||||
filterService?: string;
|
||||
}> = ({ organization, project, target, filterService }) => {
|
||||
const [query] = useQuery({
|
||||
query: SchemasDocument,
|
||||
variables: {
|
||||
selector: {
|
||||
organization: organization.cleanId,
|
||||
project: project.cleanId,
|
||||
target: target.cleanId,
|
||||
},
|
||||
},
|
||||
requestPolicy: 'cache-and-network',
|
||||
});
|
||||
|
||||
return (
|
||||
<DataWrapper query={query}>
|
||||
{() => (
|
||||
<Schemas
|
||||
organization={organization}
|
||||
project={project}
|
||||
target={query.data.target}
|
||||
filterService={filterService}
|
||||
/>
|
||||
)}
|
||||
</DataWrapper>
|
||||
);
|
||||
};
|
||||
|
||||
const ConnectSchemaModal: React.FC<{
|
||||
target: TargetFieldsFragment;
|
||||
project: ProjectFieldsFragment;
|
||||
organization: OrganizationFieldsFragment;
|
||||
onClose(): void;
|
||||
onOpen(): void;
|
||||
isOpen: boolean;
|
||||
}> = ({ target, project, organization, onClose, isOpen }) => {
|
||||
const [generating, setGenerating] = React.useState(true);
|
||||
const [mutation, mutate] = useMutation(CreateCdnTokenDocument);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!isOpen) {
|
||||
setGenerating(true);
|
||||
return;
|
||||
}
|
||||
|
||||
mutate({
|
||||
selector: {
|
||||
organization: organization.cleanId,
|
||||
project: project.cleanId,
|
||||
target: target.cleanId,
|
||||
},
|
||||
}).then(() => {
|
||||
setTimeout(() => {
|
||||
setGenerating(false);
|
||||
}, 2000);
|
||||
});
|
||||
}, [isOpen, setGenerating, mutate]);
|
||||
|
||||
const description = `With high-availability and multi-zone CDN service based on
|
||||
Cloudflare, Hive allows you to access ${
|
||||
project.type === ProjectType.Federation
|
||||
? 'the supergraph'
|
||||
: project.type === ProjectType.Stitching
|
||||
? 'the list of services'
|
||||
: 'the schema'
|
||||
} of your API,
|
||||
through a secured external service, that's always up regardless of
|
||||
Hive.`;
|
||||
|
||||
const generatingDescription = `Hive is now generating an authentication token and an URL you can use to fetch your ${
|
||||
project.type === ProjectType.Federation
|
||||
? 'supergraph schema'
|
||||
: project.type === ProjectType.Stitching
|
||||
? 'services'
|
||||
: 'schema'
|
||||
}.`;
|
||||
|
||||
return (
|
||||
<Modal isOpen={isOpen} onClose={onClose} size="3xl">
|
||||
<ModalOverlay />
|
||||
<ModalContent>
|
||||
<ModalHeader>Connect to Hive</ModalHeader>
|
||||
<ModalCloseButton />
|
||||
<ModalBody>
|
||||
<Description>{description}</Description>
|
||||
<div tw="pt-6">
|
||||
{generating && (
|
||||
<Alert
|
||||
status="info"
|
||||
variant="subtle"
|
||||
flexDirection="column"
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
textAlign="center"
|
||||
height="200px"
|
||||
>
|
||||
<Spinner colorScheme="purple" />
|
||||
<AlertTitle mt={4} mb={1} fontSize="lg">
|
||||
Generating access...
|
||||
</AlertTitle>
|
||||
<AlertDescription maxWidth="sm">{generatingDescription}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
</div>
|
||||
{!generating && mutation.data && (
|
||||
<>
|
||||
<Description tw="mb-6">You can use the following endpoint:</Description>
|
||||
<CopyValue value={mutation.data.createCdnToken.url} width={'100%'} />
|
||||
<Description tw="mt-6">To authenticate, use the following HTTP headers:</Description>
|
||||
<Code tw="mt-6">X-Hive-CDN-Key: {mutation.data.createCdnToken.token}</Code>
|
||||
{project.type === ProjectType.Federation && (
|
||||
<Description tw="mt-6">
|
||||
Read the{' '}
|
||||
<Link
|
||||
color="teal.500"
|
||||
size="sm"
|
||||
target="_blank"
|
||||
href={`${process.env.NEXT_PUBLIC_DOCS_LINK}/features/registry-usage#apollo-federation`}
|
||||
>
|
||||
"Using the Registry with a Apollo Gateway"
|
||||
</Link>{' '}
|
||||
chapter in our documentation.
|
||||
</Description>
|
||||
)}
|
||||
{project.type === ProjectType.Stitching && (
|
||||
<Description tw="mt-6">
|
||||
Read the{' '}
|
||||
<Link
|
||||
color="teal.500"
|
||||
size="sm"
|
||||
target="_blank"
|
||||
href={`${process.env.NEXT_PUBLIC_DOCS_LINK}/features/registry-usage#schema-stitching`}
|
||||
>
|
||||
"Using the Registry when Stitching"
|
||||
</Link>{' '}
|
||||
chapter in our documentation.
|
||||
</Description>
|
||||
)}
|
||||
{project.type === ProjectType.Single && (
|
||||
<Description tw="mt-6">
|
||||
Read the{' '}
|
||||
<Link
|
||||
color="teal.500"
|
||||
size="sm"
|
||||
target="_blank"
|
||||
href={`${process.env.NEXT_PUBLIC_DOCS_LINK}/features/registry-usage#other-tools`}
|
||||
>
|
||||
"Using the Registry with any tool"
|
||||
</Link>{' '}
|
||||
chapter in our documentation.
|
||||
</Description>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</ModalBody>
|
||||
<ModalFooter tw="space-x-6">
|
||||
<Button variant="ghost" type="button" onClick={onClose}>
|
||||
Close
|
||||
</Button>
|
||||
</ModalFooter>
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
const ConnectSchemaButton: React.FC<{
|
||||
target: TargetFieldsFragment;
|
||||
project: ProjectFieldsFragment;
|
||||
organization: OrganizationFieldsFragment;
|
||||
}> = ({ target, project, organization }) => {
|
||||
const { onClose, onOpen, isOpen } = useDisclosure();
|
||||
const color = useColorModeValue('#fff', '#000');
|
||||
|
||||
return (
|
||||
<>
|
||||
<Button colorScheme="primary" type="button" size="sm" onClick={onOpen} leftIcon={<VscPlug color={color} />}>
|
||||
Connect
|
||||
</Button>
|
||||
<ConnectSchemaModal
|
||||
target={target}
|
||||
project={project}
|
||||
organization={organization}
|
||||
isOpen={isOpen}
|
||||
onClose={onClose}
|
||||
onOpen={onOpen}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const SyncSchemaButton: React.FC<{
|
||||
target: TargetFieldsFragment;
|
||||
project: ProjectFieldsFragment;
|
||||
organization: OrganizationFieldsFragment;
|
||||
}> = ({ target, project, organization }) => {
|
||||
const color = useColorModeValue('#fff', '#000');
|
||||
const [status, setStatus] = React.useState<'idle' | 'error' | 'success'>('idle');
|
||||
const [mutation, mutate] = useMutation(SchemaSyncCdnDocument);
|
||||
const hasAccess = useTargetAccess({
|
||||
scope: TargetAccessScope.RegistryWrite,
|
||||
member: organization.me,
|
||||
redirect: false,
|
||||
});
|
||||
|
||||
const sync = useCallback(() => {
|
||||
mutate({
|
||||
input: {
|
||||
organization: organization.cleanId,
|
||||
project: project.cleanId,
|
||||
target: target.cleanId,
|
||||
},
|
||||
}).then(result => {
|
||||
if (result.error) {
|
||||
setStatus('error');
|
||||
} else {
|
||||
setStatus(result.data?.schemaSyncCDN.__typename === 'SchemaSyncCDNError' ? 'error' : 'success');
|
||||
}
|
||||
setTimeout(() => {
|
||||
setStatus('idle');
|
||||
}, 5000);
|
||||
});
|
||||
}, [mutate, setStatus]);
|
||||
|
||||
if (!hasAccess || !target.hasSchema) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<Tooltip label="Re-upload the latest valid version to Hive CDN" fontSize="xs" placement="bottom-start">
|
||||
<Button
|
||||
colorScheme={status === 'success' ? 'teal' : status === 'error' ? 'red' : 'primary'}
|
||||
type="button"
|
||||
size="sm"
|
||||
onClick={sync}
|
||||
disabled={status !== 'idle' || mutation.fetching}
|
||||
isLoading={mutation.fetching}
|
||||
loadingText="Syncing..."
|
||||
leftIcon={<VscSync color={color} />}
|
||||
>
|
||||
{status === 'idle' ? 'Update CDN' : status === 'error' ? 'Failed to synchronize' : 'CDN is up to date'}
|
||||
</Button>
|
||||
</Tooltip>
|
||||
);
|
||||
};
|
||||
|
||||
function TargetSchemaInner({
|
||||
organization,
|
||||
project,
|
||||
target,
|
||||
}: {
|
||||
organization: OrganizationFieldsFragment;
|
||||
project: ProjectFieldsFragment;
|
||||
target: TargetFieldsFragment;
|
||||
}) {
|
||||
const [filterService, setFilterService] = React.useState<string | null>(null);
|
||||
const [term, setTerm] = React.useState<string | null>(null);
|
||||
const debouncedFilter = useDebouncedCallback((value: string) => {
|
||||
setFilterService(value);
|
||||
}, 500);
|
||||
const handleChange = React.useCallback(
|
||||
event => {
|
||||
debouncedFilter(event.target.value);
|
||||
setTerm(event.target.value);
|
||||
},
|
||||
[debouncedFilter, setTerm]
|
||||
);
|
||||
const reset = React.useCallback(() => {
|
||||
setFilterService('');
|
||||
setTerm('');
|
||||
}, [setFilterService]);
|
||||
|
||||
const isDistributed = project.type === ProjectType.Federation || project.type === ProjectType.Stitching;
|
||||
|
||||
return (
|
||||
<Page
|
||||
title="Schema"
|
||||
subtitle="The latest schema you published for this target."
|
||||
actions={
|
||||
<>
|
||||
{isDistributed && (
|
||||
<form
|
||||
onSubmit={event => {
|
||||
event.preventDefault();
|
||||
}}
|
||||
>
|
||||
<InputGroup size="sm" variant="filled">
|
||||
<Input type="text" placeholder="Find service" value={term} onChange={handleChange} />
|
||||
<InputRightElement>
|
||||
<IconButton aria-label="Reset" size="xs" variant="ghost" onClick={reset} icon={<VscClose />} />
|
||||
</InputRightElement>
|
||||
</InputGroup>
|
||||
</form>
|
||||
)}
|
||||
<SyncSchemaButton target={target} project={project} organization={organization} />
|
||||
<ConnectSchemaButton target={target} project={project} organization={organization} />
|
||||
</>
|
||||
}
|
||||
>
|
||||
<SchemaView organization={organization} project={project} target={target} filterService={filterService} />
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
|
||||
export default function TargetSchema() {
|
||||
return (
|
||||
<TargetView title="Overview">
|
||||
{({ organization, project, target }) => (
|
||||
<TargetSchemaInner organization={organization} project={project} target={target} />
|
||||
)}
|
||||
</TargetView>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,89 +0,0 @@
|
|||
/* eslint-disable import/no-extraneous-dependencies */
|
||||
|
||||
import 'graphiql/graphiql.css';
|
||||
import 'twin.macro';
|
||||
|
||||
import { Page } from '@/components/common';
|
||||
import { TargetView } from '@/components/target/View';
|
||||
import { Button, useDisclosure, useColorModeValue } from '@chakra-ui/react';
|
||||
import { VscPlug, VscSettings } from 'react-icons/vsc';
|
||||
import { ConnectLabModal } from '@/components/lab/ConnectLabScreen';
|
||||
import { CustomizeLabModal } from '@/components/lab/CustomizeLabScreen';
|
||||
import { createGraphiQLFetcher } from '@graphiql/toolkit';
|
||||
import React from 'react';
|
||||
import type { GraphiQL as GraphiQLType } from 'graphiql';
|
||||
import { Logo } from '@/components/common/Logo';
|
||||
import { NoSchemasYet } from '@/components/target/NoSchemasYet';
|
||||
|
||||
const GraphiQL: typeof GraphiQLType = process.browser
|
||||
? // eslint-disable-next-line @typescript-eslint/no-var-requires
|
||||
require('graphiql').default
|
||||
: null;
|
||||
|
||||
export const ConnectLabTrigger: React.FC<{ endpoint: string }> = ({ endpoint }) => {
|
||||
const { isOpen, onClose, onOpen: open } = useDisclosure();
|
||||
const color = useColorModeValue('#fff', '#000');
|
||||
|
||||
return (
|
||||
<>
|
||||
<Button colorScheme="primary" type="button" size="sm" onClick={open} leftIcon={<VscPlug color={color} />}>
|
||||
Connect
|
||||
</Button>
|
||||
<ConnectLabModal isOpen={isOpen} onClose={onClose} endpoint={endpoint} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
// TODO: unused
|
||||
export const CustomizeLabTrigger = () => {
|
||||
const { isOpen, onClose, onOpen: open } = useDisclosure();
|
||||
|
||||
return (
|
||||
<>
|
||||
<Button colorScheme="primary" type="button" onClick={open} leftIcon={<VscSettings color={'#ffffff'} />}>
|
||||
Customize
|
||||
</Button>
|
||||
<CustomizeLabModal isOpen={isOpen} onClose={onClose} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const SchemaLabContent: React.FC<{ endpoint: string }> = ({ endpoint }) => {
|
||||
return (
|
||||
<>
|
||||
<div tw="h-full">
|
||||
<GraphiQL
|
||||
fetcher={createGraphiQLFetcher({
|
||||
url: endpoint,
|
||||
})}
|
||||
>
|
||||
<GraphiQL.Logo>
|
||||
<Logo tw="w-6 h-6" />
|
||||
</GraphiQL.Logo>
|
||||
</GraphiQL>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default function SchemaLabPage() {
|
||||
return (
|
||||
<TargetView title="Schema Laboratory">
|
||||
{({ organization, project, target }) => {
|
||||
const endpoint = `${window.location.origin}/api/lab/${organization.cleanId}/${project.cleanId}/${target.cleanId}`;
|
||||
const noSchemas = target.latestSchemaVersion?.schemas.nodes?.length === 0;
|
||||
|
||||
return (
|
||||
<Page
|
||||
noPadding={true}
|
||||
title="Schema Laboratory"
|
||||
subtitle="Experiment, mock and create live environment for your schema, without running any backend."
|
||||
actions={GraphiQL && !noSchemas ? <ConnectLabTrigger endpoint={endpoint} /> : null}
|
||||
>
|
||||
{GraphiQL ? noSchemas ? <NoSchemasYet /> : <SchemaLabContent endpoint={endpoint} /> : null}
|
||||
</Page>
|
||||
);
|
||||
}}
|
||||
</TargetView>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,134 +0,0 @@
|
|||
import React from 'react';
|
||||
import 'twin.macro';
|
||||
import { useQuery } from 'urql';
|
||||
|
||||
import { Select, Stack } from '@chakra-ui/react';
|
||||
import { VscChevronDown } from 'react-icons/vsc';
|
||||
import {
|
||||
HasCollectedOperationsDocument,
|
||||
ProjectFieldsFragment,
|
||||
TargetFieldsFragment,
|
||||
OrganizationFieldsFragment,
|
||||
} from '@/graphql';
|
||||
import { Page } from '@/components/common';
|
||||
import { DataWrapper } from '@/components/common/DataWrapper';
|
||||
import { TargetView } from '@/components/target/View';
|
||||
import { OperationsList } from '@/components/target/operations/List';
|
||||
import { OperationsStats } from '@/components/target/operations/Stats';
|
||||
import { EmptyList } from '@/components/common/EmptyList';
|
||||
import { OperationsFilterTrigger } from '@/components/target/operations/Filters';
|
||||
import { useRouteSelector } from '@/lib/hooks/use-route-selector';
|
||||
import { calculatePeriod, DATE_RANGE_OPTIONS, PeriodKey } from '@/components/common/TimeFilter';
|
||||
|
||||
const OperationsView: React.FC<{
|
||||
organization: OrganizationFieldsFragment;
|
||||
project: ProjectFieldsFragment;
|
||||
target: TargetFieldsFragment;
|
||||
}> = ({ organization, project, target }) => {
|
||||
const router = useRouteSelector();
|
||||
const selectedPeriod: PeriodKey = (router.query.period as PeriodKey) ?? '1d';
|
||||
const [selectedOperations, setSelectedOperations] = React.useState<string[]>([]);
|
||||
|
||||
const period = React.useMemo(() => calculatePeriod(selectedPeriod), [selectedPeriod]);
|
||||
const updatePeriod = React.useCallback(
|
||||
(ev: any) => {
|
||||
router.update({ period: ev.target.value });
|
||||
},
|
||||
[router.update]
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div tw="absolute top-7 right-4">
|
||||
<Stack direction="row" spacing={4}>
|
||||
<div>
|
||||
<OperationsFilterTrigger period={period} selected={selectedOperations} onFilter={setSelectedOperations} />
|
||||
</div>
|
||||
<div>
|
||||
<Select
|
||||
variant="filled"
|
||||
tw="cursor-pointer rounded-md"
|
||||
defaultValue={selectedPeriod}
|
||||
onChange={updatePeriod}
|
||||
iconSize="16"
|
||||
icon={<VscChevronDown />}
|
||||
size="sm"
|
||||
>
|
||||
{DATE_RANGE_OPTIONS.map(item => {
|
||||
return (
|
||||
<option key={item.key} value={item.key}>
|
||||
{item.label}
|
||||
</option>
|
||||
);
|
||||
})}
|
||||
</Select>
|
||||
</div>
|
||||
</Stack>
|
||||
</div>
|
||||
<div>
|
||||
<OperationsStats
|
||||
organization={organization.cleanId}
|
||||
project={project.cleanId}
|
||||
target={target.cleanId}
|
||||
period={period}
|
||||
operationsFilter={selectedOperations}
|
||||
/>
|
||||
<OperationsList
|
||||
tw="pt-12"
|
||||
period={period}
|
||||
organization={organization.cleanId}
|
||||
project={project.cleanId}
|
||||
target={target.cleanId}
|
||||
operationsFilter={selectedOperations}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const OperationsViewGate: React.FC<{
|
||||
organization: OrganizationFieldsFragment;
|
||||
project: ProjectFieldsFragment;
|
||||
target: TargetFieldsFragment;
|
||||
}> = ({ organization, project, target }) => {
|
||||
const [query] = useQuery({
|
||||
query: HasCollectedOperationsDocument,
|
||||
variables: {
|
||||
selector: {
|
||||
organization: organization.cleanId,
|
||||
project: project.cleanId,
|
||||
target: target.cleanId,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<DataWrapper query={query}>
|
||||
{result => {
|
||||
if (!result.data.hasCollectedOperations) {
|
||||
return (
|
||||
<EmptyList
|
||||
title="Hive is waiting for your first collected operation"
|
||||
description="You can collect usage of your GraphQL API with Hive Client"
|
||||
documentationLink={`${process.env.NEXT_PUBLIC_DOCS_LINK}/features/monitoring`}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return <OperationsView organization={organization} project={project} target={target} />;
|
||||
}}
|
||||
</DataWrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export default function TargetOperations() {
|
||||
return (
|
||||
<TargetView title="Operations">
|
||||
{({ organization, project, target }) => (
|
||||
<Page title="Operations" subtitle="Data collected based on operation executed against your GraphQL schema.">
|
||||
<OperationsViewGate organization={organization} project={project} target={target} />
|
||||
</Page>
|
||||
)}
|
||||
</TargetView>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,79 +0,0 @@
|
|||
import React from 'react';
|
||||
import 'twin.macro';
|
||||
import { useQuery } from 'urql';
|
||||
import { Settings } from '@/components/common/Settings';
|
||||
import { DataWrapper } from '@/components/common/DataWrapper';
|
||||
import { TargetView } from '@/components/target/View';
|
||||
import { NameSettings } from '@/components/target/settings/Name';
|
||||
import { DeleteSettings } from '@/components/target/settings/Delete';
|
||||
import { TokensSettings } from '@/components/target/settings/Tokens';
|
||||
import { ValidationSettings } from '@/components/target/settings/Validation';
|
||||
import { BaseSchemaSettings } from '@/components/target/settings/BaseSchema';
|
||||
import {
|
||||
OrganizationFieldsFragment,
|
||||
ProjectFieldsFragment,
|
||||
TargetFieldsFragment,
|
||||
TargetSettingsDocument,
|
||||
} from '@/graphql';
|
||||
import { useTargetAccess, TargetAccessScope } from '@/lib/access/target';
|
||||
|
||||
const Inner: React.FC<{
|
||||
target: TargetFieldsFragment;
|
||||
project: ProjectFieldsFragment;
|
||||
organization: OrganizationFieldsFragment;
|
||||
}> = ({ target, project, organization }) => {
|
||||
const canAccess = useTargetAccess({
|
||||
scope: TargetAccessScope.Settings,
|
||||
member: organization.me,
|
||||
redirect: true,
|
||||
});
|
||||
const canAccessTokens = useTargetAccess({
|
||||
scope: TargetAccessScope.TokensRead,
|
||||
member: organization.me,
|
||||
redirect: false,
|
||||
});
|
||||
const [settings] = useQuery({
|
||||
query: TargetSettingsDocument,
|
||||
variables: {
|
||||
selector: {
|
||||
organization: organization.cleanId,
|
||||
project: project.cleanId,
|
||||
target: target.cleanId,
|
||||
},
|
||||
targetsSelector: {
|
||||
organization: organization.cleanId,
|
||||
project: project.cleanId,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
if (!canAccess) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<DataWrapper query={settings}>
|
||||
{() => (
|
||||
<Settings title="Settings" subtitle="Tokens and stuff">
|
||||
<NameSettings target={target} />
|
||||
{canAccessTokens && <TokensSettings target={target} organization={organization} />}
|
||||
<ValidationSettings
|
||||
target={target}
|
||||
possibleTargets={settings.data.targets.nodes}
|
||||
settings={settings.data.targetSettings.validation}
|
||||
/>
|
||||
<BaseSchemaSettings target={target} />
|
||||
<DeleteSettings />
|
||||
</Settings>
|
||||
)}
|
||||
</DataWrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export default function TargetSettingsPage() {
|
||||
return (
|
||||
<TargetView title="Settings">
|
||||
{({ target, project, organization }) => <Inner target={target} project={project} organization={organization} />}
|
||||
</TargetView>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
import React from 'react';
|
||||
import 'twin.macro';
|
||||
import { OrganizationFieldsFragment } from '@/graphql';
|
||||
import { Page } from '@/components/common';
|
||||
import { ProjectView } from '@/components/project/View';
|
||||
import { useProjectAccess, ProjectAccessScope } from '@/lib/access/project';
|
||||
import { Alerts } from '@/components/project/alerts/Alerts';
|
||||
import { Channels } from '@/components/project/alerts/Channels';
|
||||
|
||||
const Gate: React.FC<{
|
||||
organization: OrganizationFieldsFragment;
|
||||
}> = ({ organization }) => {
|
||||
const canAccess = useProjectAccess({
|
||||
scope: ProjectAccessScope.Alerts,
|
||||
member: organization.me,
|
||||
redirect: true,
|
||||
});
|
||||
|
||||
if (!canAccess) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<Page title="Alerts" subtitle="Be always up to date with all the updates">
|
||||
<div tw="flex flex-col space-y-12 pt-6">
|
||||
<Channels />
|
||||
<Alerts />
|
||||
</div>
|
||||
</Page>
|
||||
);
|
||||
};
|
||||
|
||||
export default function ProjectSettingsPage() {
|
||||
return <ProjectView title="Alerts">{({ organization }) => <Gate organization={organization} />}</ProjectView>;
|
||||
}
|
||||
|
|
@ -1,40 +0,0 @@
|
|||
import * as React from 'react';
|
||||
import 'twin.macro';
|
||||
import { OrganizationFieldsFragment, ProjectFieldsFragment } from '@/graphql';
|
||||
import { Page } from '@/components/common';
|
||||
import { ProjectView } from '@/components/project/View';
|
||||
import { ProjectTargets } from '@/components/project/Targets';
|
||||
import { ProjectActivities } from '@/components/project/Activities';
|
||||
import { TargetCreatorTrigger } from '@/components/target/Creator';
|
||||
import { ProjectAccessScope, useProjectAccess } from '@/lib/access/project';
|
||||
|
||||
const Inner: React.FC<{
|
||||
project: ProjectFieldsFragment;
|
||||
organization: OrganizationFieldsFragment;
|
||||
}> = ({ project, organization }) => {
|
||||
const canCreate = useProjectAccess({
|
||||
scope: ProjectAccessScope.Read,
|
||||
member: organization.me,
|
||||
});
|
||||
|
||||
return (
|
||||
<Page title={project.name} subtitle="An overview" actions={canCreate && <TargetCreatorTrigger />}>
|
||||
<div tw="w-full flex flex-row">
|
||||
<div tw="flex-grow mr-12">
|
||||
<ProjectTargets project={project} organization={organization} />
|
||||
</div>
|
||||
<div tw="flex-grow-0 w-5/12">
|
||||
<ProjectActivities />
|
||||
</div>
|
||||
</div>
|
||||
</Page>
|
||||
);
|
||||
};
|
||||
|
||||
export default function ProjectPage() {
|
||||
return (
|
||||
<ProjectView title="Overview">
|
||||
{({ project, organization }) => <Inner project={project} organization={organization} />}
|
||||
</ProjectView>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,40 +0,0 @@
|
|||
import React from 'react';
|
||||
import 'twin.macro';
|
||||
import { Page } from '@/components/common';
|
||||
import { Dashboard } from '@/components/project/persisted-operations/Dashboard';
|
||||
import { ProjectView } from '@/components/project/View';
|
||||
import { ProjectFieldsFragment, OrganizationFieldsFragment } from '@/graphql';
|
||||
import { ProjectAccessScope, useProjectAccess } from '@/lib/access/project';
|
||||
|
||||
const Inner: React.FC<{
|
||||
project: ProjectFieldsFragment;
|
||||
organization: OrganizationFieldsFragment;
|
||||
}> = ({ project, organization }) => {
|
||||
const canAccess = useProjectAccess({
|
||||
scope: ProjectAccessScope.OperationsStoreRead,
|
||||
member: organization.me,
|
||||
redirect: true,
|
||||
});
|
||||
|
||||
if (!canAccess) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<Page
|
||||
title="Operations Store"
|
||||
subtitle="Operations you persisted using the Hive CLI. The store can be used to improve security and performance."
|
||||
scrollable
|
||||
>
|
||||
<Dashboard project={project} organization={organization} />
|
||||
</Page>
|
||||
);
|
||||
};
|
||||
|
||||
export default function PersistedOperationsPage() {
|
||||
return (
|
||||
<ProjectView title="Persisted Operations">
|
||||
{({ project, organization }) => <Inner project={project} organization={organization} />}
|
||||
</ProjectView>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,40 +0,0 @@
|
|||
import React from 'react';
|
||||
import 'twin.macro';
|
||||
import { Settings } from '@/components/common/Settings';
|
||||
import { ProjectView } from '@/components/project/View';
|
||||
import { NameSettings } from '@/components/project/settings/Name';
|
||||
import { DeleteSettings } from '@/components/project/settings/Delete';
|
||||
import { GitRepositorySettings } from '@/components/project/settings/GitRepository';
|
||||
import { ProjectFieldsFragment, OrganizationFieldsFragment } from '@/graphql';
|
||||
import { useProjectAccess, ProjectAccessScope } from '@/lib/access/project';
|
||||
|
||||
const Inner: React.FC<{
|
||||
project: ProjectFieldsFragment;
|
||||
organization: OrganizationFieldsFragment;
|
||||
}> = ({ project, organization }) => {
|
||||
const canAccess = useProjectAccess({
|
||||
scope: ProjectAccessScope.Settings,
|
||||
member: organization.me,
|
||||
redirect: true,
|
||||
});
|
||||
|
||||
if (!canAccess) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<Settings title="Settings" subtitle="Applies to all targets within the project">
|
||||
<NameSettings project={project} />
|
||||
<GitRepositorySettings project={project} />
|
||||
<DeleteSettings />
|
||||
</Settings>
|
||||
);
|
||||
};
|
||||
|
||||
export default function ProjectSettingsPage() {
|
||||
return (
|
||||
<ProjectView title="Settings">
|
||||
{({ project, organization }) => <Inner project={project} organization={organization} />}
|
||||
</ProjectView>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
import * as React from 'react';
|
||||
import 'twin.macro';
|
||||
import { OrganizationFieldsFragment } from '@/graphql';
|
||||
import { Page } from '@/components/common';
|
||||
import { OrganizationView } from '@/components/organization/View';
|
||||
import { OrganizationProjects } from '@/components/organization/Projects';
|
||||
import { OrganizationActivities } from '@/components/organization/Activities';
|
||||
import { ProjectCreatorTrigger } from '@/components/project/Creator';
|
||||
import { OrganizationAccessScope, useOrganizationAccess } from '@/lib/access/organization';
|
||||
|
||||
const Inner: React.FC<{ organization: OrganizationFieldsFragment }> = ({ organization }) => {
|
||||
const canCreate = useOrganizationAccess({
|
||||
scope: OrganizationAccessScope.Read,
|
||||
member: organization?.me,
|
||||
});
|
||||
|
||||
return (
|
||||
<Page title={organization.name} subtitle="An overview" actions={canCreate && <ProjectCreatorTrigger />}>
|
||||
<div tw="w-full flex flex-row">
|
||||
<div tw="flex-grow mr-12">
|
||||
<OrganizationProjects org={organization} />
|
||||
</div>
|
||||
<div tw="flex-grow-0 w-5/12">
|
||||
<OrganizationActivities />
|
||||
</div>
|
||||
</div>
|
||||
</Page>
|
||||
);
|
||||
};
|
||||
|
||||
export default function OrganizationPage() {
|
||||
return (
|
||||
<OrganizationView title="Overview">{({ organization }) => <Inner organization={organization} />}</OrganizationView>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,208 +0,0 @@
|
|||
import React from 'react';
|
||||
import 'twin.macro';
|
||||
import { track } from '@/lib/mixpanel';
|
||||
import { useQuery, useMutation } from 'urql';
|
||||
import { Button, Checkbox, Table, Thead, Tbody, Tr, Th, Td, useDisclosure } from '@chakra-ui/react';
|
||||
import { FaGoogle, FaGithub, FaKey } from 'react-icons/fa';
|
||||
import { Page } from '@/components/common';
|
||||
import { CopyValue } from '@/components/common/CopyValue';
|
||||
import { OrganizationView } from '@/components/organization/View';
|
||||
import { MemberPermisssonsModal } from '@/components/organization/members/PermissionsModal';
|
||||
import {
|
||||
OrganizationFieldsFragment,
|
||||
OrganizationMembersDocument,
|
||||
ResetInviteCodeDocument,
|
||||
OrganizationMembersQuery,
|
||||
DeleteOrganizationMembersDocument,
|
||||
MemberFieldsFragment,
|
||||
AuthProvider,
|
||||
} from '@/graphql';
|
||||
import { OrganizationAccessScope, useOrganizationAccess } from '@/lib/access/organization';
|
||||
import { useNotifications } from '@/lib/hooks/use-notifications';
|
||||
import { useRouteSelector } from '@/lib/hooks/use-route-selector';
|
||||
import { DataWrapper } from '@/components/common/DataWrapper';
|
||||
|
||||
const Invitation: React.FC<{
|
||||
organization: OrganizationMembersQuery['organization']['organization'];
|
||||
}> = ({ organization }) => {
|
||||
const inviteUrl = `${window.location.origin}/join/${organization.inviteCode}`;
|
||||
const router = useRouteSelector();
|
||||
const notify = useNotifications();
|
||||
const [mutation, mutate] = useMutation(ResetInviteCodeDocument);
|
||||
|
||||
const generate = React.useCallback(() => {
|
||||
track('GENERATE_NEW_INVITATION_LINK_ATTEMPT', {
|
||||
organization: router.organizationId,
|
||||
});
|
||||
mutate({
|
||||
selector: {
|
||||
organization: router.organizationId,
|
||||
},
|
||||
}).finally(() => {
|
||||
notify('Generated new invitation link', 'info');
|
||||
});
|
||||
}, [mutate, notify]);
|
||||
|
||||
return (
|
||||
<div tw="flex flex-row space-x-3 pb-3">
|
||||
<CopyValue value={inviteUrl} />
|
||||
<Button type="button" onClick={generate} disabled={mutation.fetching}>
|
||||
Reset
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const MemberRow: React.FC<{
|
||||
member: MemberFieldsFragment;
|
||||
owner: MemberFieldsFragment;
|
||||
organization: OrganizationFieldsFragment;
|
||||
checked: string[];
|
||||
onCheck(id: string): void;
|
||||
}> = ({ member, owner, checked, onCheck, organization }) => {
|
||||
const isOwner = member.id === owner.id;
|
||||
const isMe = member.id === organization.me.id;
|
||||
const { isOpen, onOpen, onClose } = useDisclosure();
|
||||
|
||||
const canManage = !isOwner && !isMe;
|
||||
|
||||
const provider = member.user.provider;
|
||||
const providerIcon =
|
||||
provider === AuthProvider.Google ? (
|
||||
<FaGoogle color="#34a853" />
|
||||
) : provider === AuthProvider.Github ? (
|
||||
<FaGithub color="#333" />
|
||||
) : (
|
||||
<FaKey color="#fbbc05" />
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<MemberPermisssonsModal isOpen={isOpen} onClose={onClose} member={member} organization={organization} />
|
||||
<Tr>
|
||||
<Td>
|
||||
<Checkbox
|
||||
colorScheme="primary"
|
||||
isDisabled={!canManage}
|
||||
checked={checked.includes(member.id)}
|
||||
onChange={() => onCheck(member.id)}
|
||||
/>
|
||||
</Td>
|
||||
<Td textAlign="center">{providerIcon}</Td>
|
||||
<Td>{member.user.displayName}</Td>
|
||||
<Td>{member.user.email}</Td>
|
||||
<Td textAlign="right">
|
||||
{canManage && (
|
||||
<Button size="sm" variant="ghost" onClick={onOpen}>
|
||||
Change permissions
|
||||
</Button>
|
||||
)}
|
||||
</Td>
|
||||
</Tr>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const MembersManager: React.FC<{
|
||||
organization: OrganizationFieldsFragment;
|
||||
}> = ({ organization }) => {
|
||||
const [query] = useQuery({
|
||||
query: OrganizationMembersDocument,
|
||||
variables: {
|
||||
selector: {
|
||||
organization: organization.cleanId,
|
||||
},
|
||||
},
|
||||
});
|
||||
const [checked, setChecked] = React.useState<string[]>([]);
|
||||
const onCheck = React.useCallback(
|
||||
(id: string) => {
|
||||
if (checked.includes(id)) {
|
||||
setChecked(checked.filter(i => i !== id));
|
||||
} else {
|
||||
setChecked(checked.concat(id));
|
||||
}
|
||||
},
|
||||
[checked, setChecked]
|
||||
);
|
||||
const [mutation, mutate] = useMutation(DeleteOrganizationMembersDocument);
|
||||
const deleteMembers = React.useCallback(() => {
|
||||
mutate({
|
||||
selector: {
|
||||
organization: organization.cleanId,
|
||||
users: checked,
|
||||
},
|
||||
}).finally(() => {
|
||||
setChecked([]);
|
||||
});
|
||||
}, [mutate, checked, setChecked]);
|
||||
|
||||
return (
|
||||
<DataWrapper query={query}>
|
||||
{() => (
|
||||
<div>
|
||||
<div tw="flex flex-row justify-between pb-3">
|
||||
<Invitation organization={query.data.organization.organization} />
|
||||
<div>
|
||||
<Button
|
||||
disabled={!checked.length || mutation.fetching}
|
||||
onClick={deleteMembers}
|
||||
type="button"
|
||||
colorScheme="red"
|
||||
>
|
||||
Delete
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<Table>
|
||||
<Thead>
|
||||
<Tr>
|
||||
<Th tw="w-10"></Th>
|
||||
<Th tw="w-10"></Th>
|
||||
<Th>Name</Th>
|
||||
<Th>Email</Th>
|
||||
<Th textAlign="right">Permissions</Th>
|
||||
</Tr>
|
||||
</Thead>
|
||||
<Tbody>
|
||||
{query.data.organization.organization?.members.nodes.map(member => (
|
||||
<MemberRow
|
||||
key={member.id}
|
||||
member={member}
|
||||
organization={query.data.organization.organization}
|
||||
owner={query.data.organization.organization.owner}
|
||||
checked={checked}
|
||||
onCheck={onCheck}
|
||||
/>
|
||||
))}
|
||||
</Tbody>
|
||||
</Table>
|
||||
</div>
|
||||
)}
|
||||
</DataWrapper>
|
||||
);
|
||||
};
|
||||
|
||||
const Inner: React.FC<{ organization: OrganizationFieldsFragment }> = ({ organization }) => {
|
||||
const canAccess = useOrganizationAccess({
|
||||
scope: OrganizationAccessScope.Members,
|
||||
member: organization?.me,
|
||||
redirect: true,
|
||||
});
|
||||
|
||||
if (!canAccess) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<Page title="Members" subtitle="Invite others to your organization and manage access.">
|
||||
<MembersManager organization={organization} />
|
||||
</Page>
|
||||
);
|
||||
};
|
||||
|
||||
export default function OrganizationSettingsPage() {
|
||||
return (
|
||||
<OrganizationView title="Members">{({ organization }) => <Inner organization={organization} />}</OrganizationView>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
import React from 'react';
|
||||
import 'twin.macro';
|
||||
import { OrganizationAccessScope, useOrganizationAccess } from '@/lib/access/organization';
|
||||
import { Settings } from '@/components/common/Settings';
|
||||
import { OrganizationView } from '@/components/organization/View';
|
||||
import { DeleteSettings } from '@/components/organization/settings/Delete';
|
||||
import { NameSettings } from '@/components/organization/settings/Name';
|
||||
import { IntegrationsSettings } from '@/components/organization/settings/Integrations';
|
||||
import { OrganizationFieldsFragment, OrganizationType } from '@/graphql';
|
||||
|
||||
const Inner: React.FC<{ organization: OrganizationFieldsFragment }> = ({ organization }) => {
|
||||
const canAccess = useOrganizationAccess({
|
||||
scope: OrganizationAccessScope.Settings,
|
||||
member: organization?.me,
|
||||
redirect: true,
|
||||
});
|
||||
const canAccessIntegrations = useOrganizationAccess({
|
||||
scope: OrganizationAccessScope.Integrations,
|
||||
member: organization?.me,
|
||||
redirect: false,
|
||||
});
|
||||
|
||||
if (!canAccess) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const isRegular = organization.type === OrganizationType.Regular;
|
||||
|
||||
return (
|
||||
<Settings title="Settings" subtitle="Applies to all projects and targets within the organization">
|
||||
{isRegular && <NameSettings organization={organization} />}
|
||||
{canAccessIntegrations && <IntegrationsSettings organization={organization} />}
|
||||
{isRegular && <DeleteSettings />}
|
||||
</Settings>
|
||||
);
|
||||
};
|
||||
|
||||
export default function OrganizationSettingsPage() {
|
||||
return (
|
||||
<OrganizationView title="Settings">{({ organization }) => <Inner organization={organization} />}</OrganizationView>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,94 +0,0 @@
|
|||
import React from 'react';
|
||||
import 'twin.macro';
|
||||
import { OrganizationAccessScope, useOrganizationAccess } from '@/lib/access/organization';
|
||||
import { OrganizationView } from '@/components/organization/View';
|
||||
import { OrganizationUsageEstimationView } from '@/components/organization/Usage';
|
||||
import { OrganizationFieldsFragment, OrgBillingInfoFieldsFragment, OrgRateLimitFieldsFragment } from '@/graphql';
|
||||
import { Card, Page } from '@/components/common';
|
||||
import { BillingView } from '@/components/organization/billing/Billing';
|
||||
import { Button, Stat, StatHelpText, StatLabel, StatNumber } from '@chakra-ui/react';
|
||||
import { useRouteSelector } from '@/lib/hooks/use-route-selector';
|
||||
import { InvoicesList } from '@/components/organization/billing/InvoicesList';
|
||||
import { CurrencyFormatter } from '@/components/organization/billing/helpers';
|
||||
import { RateLimitWarn } from '@/components/organization/billing/RateLimitWarn';
|
||||
|
||||
const Inner: React.FC<{
|
||||
organization: OrganizationFieldsFragment & OrgBillingInfoFieldsFragment & OrgRateLimitFieldsFragment;
|
||||
}> = ({ organization }) => {
|
||||
const router = useRouteSelector();
|
||||
const canAccess = useOrganizationAccess({
|
||||
scope: OrganizationAccessScope.Settings,
|
||||
member: organization?.me,
|
||||
redirect: true,
|
||||
});
|
||||
|
||||
if (!canAccess) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<Page
|
||||
title={'Subscription'}
|
||||
subtitle={'Information about your Hive plan, subscription, usage and data ingestion.'}
|
||||
actions={
|
||||
<Button
|
||||
colorScheme="primary"
|
||||
type="button"
|
||||
size="sm"
|
||||
as="a"
|
||||
href={`/${router.organizationId}/subscription/manage`}
|
||||
>
|
||||
Manage Subscription
|
||||
</Button>
|
||||
}
|
||||
>
|
||||
<RateLimitWarn organization={organization} />
|
||||
<div tw="w-full flex flex-row">
|
||||
<div tw="flex-grow mr-12">
|
||||
<div tw="flex flex-col space-y-6 pb-6">
|
||||
<Card.Root>
|
||||
<Card.Title>Plan and Reserved Volume</Card.Title>
|
||||
<Card.Content>
|
||||
<BillingView organization={organization}>
|
||||
{organization.billingConfiguration?.upcomingInvoice ? (
|
||||
<Stat tw="mb-4">
|
||||
<StatLabel>Next Invoice</StatLabel>
|
||||
<StatNumber>
|
||||
{CurrencyFormatter.format(organization.billingConfiguration.upcomingInvoice.amount)}
|
||||
</StatNumber>
|
||||
<StatHelpText>{organization.billingConfiguration.upcomingInvoice.date}</StatHelpText>
|
||||
</Stat>
|
||||
) : null}
|
||||
</BillingView>
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
</div>
|
||||
</div>
|
||||
<div tw="flex-grow-0 w-5/12">
|
||||
<Card.Root>
|
||||
<Card.Title>Monthly Usage Overview</Card.Title>
|
||||
<Card.Content>
|
||||
<OrganizationUsageEstimationView organization={organization} />
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
</div>
|
||||
</div>
|
||||
{organization.billingConfiguration?.invoices?.length > 0 ? (
|
||||
<Card.Root>
|
||||
<Card.Title>Invoices</Card.Title>
|
||||
<Card.Content>
|
||||
<InvoicesList organization={organization} />
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
) : null}
|
||||
</Page>
|
||||
);
|
||||
};
|
||||
|
||||
export default function SubscriptionPage() {
|
||||
return (
|
||||
<OrganizationView title="Subscription & Usage" includeBilling={true} includeRateLimit={true}>
|
||||
{({ organization }) => <Inner organization={organization} />}
|
||||
</OrganizationView>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in a new issue