Chore inc webhooks modal form (#5938)

https://linear.app/unleash/issue/2-1818/ui-create-incoming-webhook-newedit-modal Adds the incoming webhooks modal form, which allows users to create and edit incoming webhooks, along with their respective tokens. Follows a logic similar to service accounts and their tokens, and tries to use the newest form validation flow that we implemented in the roles form. ![image](https://github.com/Unleash/unleash/assets/14320932/5d37a72e-2777-4c8b-b71b-3c0610959a52)
Unleash · Jan 18, 2024 · 5b56fac · 5b56fac
1 parent 4b02d6a
commit 5b56fac
Show file tree

Hide file tree

Showing 14 changed files with 1,162 additions and 84 deletions.
diff --git a/frontend/src/component/admin/banners/BannerModal/BannerForm.tsx b/frontend/src/component/admin/banners/BannerModal/BannerForm.tsx
@@ -10,7 +10,7 @@ import { ChangeEvent, Dispatch, SetStateAction, useState } from 'react';
 import { Visibility } from '@mui/icons-material';
 import { BannerDialog } from 'component/banners/Banner/BannerDialog/BannerDialog';
 
-const StyledForm = styled('form')(({ theme }) => ({
+const StyledForm = styled('div')(({ theme }) => ({
     display: 'flex',
     flexDirection: 'column',
     gap: theme.spacing(4),

diff --git a/...ts/ServiceAccountsTable/ServiceAccountModal/ServiceAccountTokens/ServiceAccountTokens.tsx b/...ts/ServiceAccountsTable/ServiceAccountModal/ServiceAccountTokens/ServiceAccountTokens.tsx
@@ -23,13 +23,7 @@ import {
     IPersonalAPIToken,
 } from 'interfaces/personalAPIToken';
 import { useMemo, useState } from 'react';
-import {
-    useTable,
-    SortingRule,
-    useSortBy,
-    useFlexLayout,
-    Column,
-} from 'react-table';
+import { useTable, SortingRule, useSortBy, useFlexLayout } from 'react-table';
 import { sortTypes } from 'utils/sortTypes';
 import { ServiceAccountCreateTokenDialog } from './ServiceAccountCreateTokenDialog/ServiceAccountCreateTokenDialog';
 import { ServiceAccountTokenDialog } from 'component/admin/serviceAccounts/ServiceAccountsTable/ServiceAccountTokenDialog/ServiceAccountTokenDialog';
@@ -157,66 +151,62 @@ export const ServiceAccountTokens = ({
     };
 
     const columns = useMemo(
-        () =>
-            [
-                {
-                    Header: 'Description',
-                    accessor: 'description',
-                    Cell: HighlightCell,
-                    minWidth: 100,
-                    searchable: true,
-                },
-                {
-                    Header: 'Expires',
-                    accessor: 'expiresAt',
-                    Cell: ({ value }: { value: string }) => {
-                        const date = new Date(value);
-                        if (
-                            date.getFullYear() >
-                            new Date().getFullYear() + 100
-                        ) {
-                            return <TextCell>Never</TextCell>;
-                        }
-                        return <DateCell value={value} />;
-                    },
-                    maxWidth: 150,
-                },
-                {
-                    Header: 'Created',
-                    accessor: 'createdAt',
-                    Cell: DateCell,
-                    maxWidth: 150,
-                },
-                {
-                    Header: 'Last seen',
-                    accessor: 'seenAt',
-                    Cell: TimeAgoCell,
-                    maxWidth: 150,
-                },
-                {
-                    Header: 'Actions',
-                    id: 'Actions',
-                    align: 'center',
-                    Cell: ({ row: { original: rowToken } }: any) => (
-                        <ActionCell>
-                            <Tooltip title='Delete token' arrow describeChild>
-                                <span>
-                                    <IconButton
-                                        onClick={() => {
-                                            setSelectedToken(rowToken);
-                                            setDeleteOpen(true);
-                                        }}
-                                    >
-                                        <Delete />
-                                    </IconButton>
-                                </span>
-                            </Tooltip>
-                        </ActionCell>
-                    ),
-                    maxWidth: 100,
-                    disableSortBy: true,
+        () => [
+            {
+                Header: 'Description',
+                accessor: 'description',
+                Cell: HighlightCell,
+                minWidth: 100,
+                searchable: true,
+            },
+            {
+                Header: 'Expires',
+                accessor: 'expiresAt',
+                Cell: ({ value }: { value: string }) => {
+                    const date = new Date(value);
+                    if (date.getFullYear() > new Date().getFullYear() + 100) {
+                        return <TextCell>Never</TextCell>;
+                    }
+                    return <DateCell value={value} />;
                 },
-            ] as Column<IPersonalAPIToken>[],
+                maxWidth: 150,
+            },
+            {
+                Header: 'Created',
+                accessor: 'createdAt',
+                Cell: DateCell,
+                maxWidth: 150,
+            },
+            {
+                Header: 'Last seen',
+                accessor: 'seenAt',
+                Cell: TimeAgoCell,
+                maxWidth: 150,
+            },
+            {
+                Header: 'Actions',
+                id: 'Actions',
+                align: 'center',
+                Cell: ({ row: { original: rowToken } }: any) => (
+                    <ActionCell>
+                        <Tooltip title='Delete token' arrow describeChild>
+                            <span>
+                                <IconButton
+                                    onClick={() => {
+                                        setSelectedToken(rowToken);
+                                        setDeleteOpen(true);
+                                    }}
+                                >
+                                    <Delete />
+                                </IconButton>
+                            </span>
+                        </Tooltip>
+                    </ActionCell>
+                ),
+                maxWidth: 100,
+                disableSortBy: true,
+            },
+        ],
         [setSelectedToken, setDeleteOpen],
     );
 
@@ -228,7 +218,7 @@ export const ServiceAccountTokens = ({
 
     const { headerGroups, rows, prepareRow, setHiddenColumns } = useTable(
         {
-            columns,
+            columns: columns as any[],
             data,
             initialState,
             sortTypes,