120 lines
4.1 KiB
TypeScript
120 lines
4.1 KiB
TypeScript
import { useState } from 'react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import styled from '@emotion/styled';
|
|
|
|
import { useOptimisticEffect } from '@/apollo/optimistic-effect/hooks/useOptimisticEffect';
|
|
import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
|
|
import { getRecordOptimisticEffectDefinition } from '@/object-record/graphql/optimistic-effect-definition/getRecordOptimisticEffectDefinition';
|
|
import { useFindManyObjectRecords } from '@/object-record/hooks/useFindManyObjectRecords';
|
|
import { objectSettingsWidth } from '@/settings/data-model/constants/objectSettings';
|
|
import { SettingsApiKeysFieldItemTableRow } from '@/settings/developers/components/SettingsApiKeysFieldItemTableRow';
|
|
import { ApiFieldItem } from '@/settings/developers/types/ApiFieldItem';
|
|
import { formatExpirations } from '@/settings/developers/utils/format-expiration';
|
|
import { IconPlus, IconSettings } from '@/ui/display/icon';
|
|
import { H1Title } from '@/ui/display/typography/components/H1Title';
|
|
import { H2Title } from '@/ui/display/typography/components/H2Title';
|
|
import { Button } from '@/ui/input/button/components/Button';
|
|
import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
|
|
import { Table } from '@/ui/layout/table/components/Table';
|
|
import { TableHeader } from '@/ui/layout/table/components/TableHeader';
|
|
import { TableRow } from '@/ui/layout/table/components/TableRow';
|
|
|
|
const StyledContainer = styled.div`
|
|
height: fit-content;
|
|
padding: ${({ theme }) => theme.spacing(8)};
|
|
width: ${objectSettingsWidth};
|
|
`;
|
|
|
|
const StyledTableRow = styled(TableRow)`
|
|
grid-template-columns: 180px 98.7px 98.7px 98.7px 36px;
|
|
`;
|
|
|
|
const StyledHeader = styled.div`
|
|
align-items: center;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: ${({ theme }) => theme.spacing(8)};
|
|
`;
|
|
|
|
const StyledH1Title = styled(H1Title)`
|
|
margin-bottom: 0;
|
|
`;
|
|
|
|
export const SettingsDevelopersApiKeys = () => {
|
|
const navigate = useNavigate();
|
|
|
|
const [apiKeys, setApiKeys] = useState<Array<ApiFieldItem>>([]);
|
|
const { registerOptimisticEffect } = useOptimisticEffect({
|
|
objectNameSingular: 'apiKey',
|
|
});
|
|
const { objectMetadataItem: foundObjectMetadataItem } = useObjectMetadataItem(
|
|
{
|
|
objectNameSingular: 'apiKey',
|
|
},
|
|
);
|
|
const filter = { revokedAt: { is: 'NULL' } };
|
|
useFindManyObjectRecords({
|
|
objectNamePlural: 'apiKeys',
|
|
filter,
|
|
onCompleted: (data) => {
|
|
setApiKeys(
|
|
formatExpirations(
|
|
data.edges.map((apiKey) => ({
|
|
id: apiKey.node.id,
|
|
name: apiKey.node.name,
|
|
expiresAt: apiKey.node.expiresAt,
|
|
})),
|
|
),
|
|
);
|
|
if (foundObjectMetadataItem) {
|
|
registerOptimisticEffect({
|
|
variables: { filter, first: 30, orderBy: {} },
|
|
definition: getRecordOptimisticEffectDefinition({
|
|
objectMetadataItem: foundObjectMetadataItem,
|
|
}),
|
|
});
|
|
}
|
|
},
|
|
});
|
|
|
|
return (
|
|
<SubMenuTopBarContainer Icon={IconSettings} title="Settings">
|
|
<StyledContainer>
|
|
<StyledHeader>
|
|
<StyledH1Title title="APIs" />
|
|
<Button
|
|
Icon={IconPlus}
|
|
title="Create Key"
|
|
accent="blue"
|
|
size="small"
|
|
onClick={() => {
|
|
navigate('/settings/developers/api-keys/new');
|
|
}}
|
|
/>
|
|
</StyledHeader>
|
|
<H2Title
|
|
title="Active Keys"
|
|
description="Active APIs keys created by you or your team"
|
|
/>
|
|
<Table>
|
|
<StyledTableRow>
|
|
<TableHeader>Name</TableHeader>
|
|
<TableHeader>Type</TableHeader>
|
|
<TableHeader>Expiration</TableHeader>
|
|
<TableHeader></TableHeader>
|
|
</StyledTableRow>
|
|
{apiKeys.map((fieldItem) => (
|
|
<SettingsApiKeysFieldItemTableRow
|
|
key={fieldItem.id}
|
|
fieldItem={fieldItem}
|
|
onClick={() => {
|
|
navigate(`/settings/developers/api-keys/${fieldItem.id}`);
|
|
}}
|
|
/>
|
|
))}
|
|
</Table>
|
|
</StyledContainer>
|
|
</SubMenuTopBarContainer>
|
|
);
|
|
};
|