feat: paginated applications view (#6308)

frontend/src/component/application/ApplicationList/PaginatedApplicationList.tsx

@@ -0,0 +1,162 @@
+import { useMemo } from 'react';
+import { Avatar, CircularProgress, Icon, Link } from '@mui/material';
+import { Warning } from '@mui/icons-material';
+import { styles as themeStyles } from 'component/common';
+import { PageContent } from 'component/common/PageContent/PageContent';
+import { PageHeader } from 'component/common/PageHeader/PageHeader';
+import useApplications from 'hooks/api/getters/useApplications/useApplications';
+import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
+import { Search } from 'component/common/Search/Search';
+import { SearchHighlightProvider } from 'component/common/Table/SearchHighlightContext/SearchHighlightContext';
+import { PaginatedTable } from 'component/common/Table';
+import { IconCell } from 'component/common/Table/cells/IconCell/IconCell';
+import { LinkCell } from 'component/common/Table/cells/LinkCell/LinkCell';
+import { ApplicationUsageCell } from './ApplicationUsageCell/ApplicationUsageCell';
+import { ApplicationSchema } from '../../../openapi';
+import { NumberParam, StringParam, withDefault } from 'use-query-params';
+import { DEFAULT_PAGE_LIMIT } from 'hooks/api/getters/useProjectApplications/useProjectApplications';
+import { usePersistentTableState } from 'hooks/usePersistentTableState';
+import { createColumnHelper, useReactTable } from '@tanstack/react-table';
+import { withTableState } from 'utils/withTableState';
+import useLoading from 'hooks/useLoading';
+
+const renderNoApplications = () => (
+    <>
+        <section style={{ textAlign: 'center' }}>
+            <Warning titleAccess='Warning' /> <br />
+            <br />
+            Oh snap, it does not seem like you have connected any applications.
+            To connect your application to Unleash you will require a Client
+            SDK.
+            <br />
+            <br />
+            You can read more about how to use Unleash in your application in
+            the{' '}
+            <Link href='https://docs.getunleash.io/docs/sdks/'>
+                documentation.
+            </Link>
+        </section>
+    </>
+);
+
+const columnHelper = createColumnHelper<ApplicationSchema>();
+
+export const PaginatedApplicationList = () => {
+    const { applications: data, loading } = useApplications();
+    const total = 1000;
+
+    const stateConfig = {
+        offset: withDefault(NumberParam, 0),
+        limit: withDefault(NumberParam, DEFAULT_PAGE_LIMIT),
+        query: StringParam,
+        sortBy: withDefault(StringParam, 'appName'),
+        sortOrder: withDefault(StringParam, 'asc'),
+    };
+    const [tableState, setTableState] = usePersistentTableState(
+        `applications-table`,
+        stateConfig,
+    );
+
+    const columns = useMemo(
+        () => [
+            columnHelper.accessor('icon', {
+                id: 'Icon',
+                cell: ({
+                    row: {
+                        original: { icon },
+                    },
+                }: any) => (
+                    <IconCell
+                        icon={
+                            <Avatar>
+                                <Icon>{icon || 'apps'}</Icon>
+                            </Avatar>
+                        }
+                    />
+                ),
+            }),
+            columnHelper.accessor('appName', {
+                header: 'Name',
+                meta: { width: '50%' },
+                cell: ({
+                    row: {
+                        original: { appName, description },
+                    },
+                }: any) => (
+                    <LinkCell
+                        title={appName}
+                        to={`/applications/${appName}`}
+                        subtitle={description}
+                    />
+                ),
+            }),
+            columnHelper.accessor('usage', {
+                header: 'Project(environment)',
+                meta: { width: '50%' },
+                cell: ({
+                    row: { original },
+                }: {
+                    row: { original: ApplicationSchema };
+                }) => <ApplicationUsageCell usage={original.usage} />,
+            }),
+        ],
+        [],
+    );
+
+    const table = useReactTable(
+        withTableState(tableState, setTableState, {
+            columns,
+            data,
+        }),
+    );
+
+    const rows = table.getRowModel().rows;
+
+    const { offset, limit, query, sortBy, sortOrder, ...filterState } =
+        tableState;
+
+    const setSearchValue = (query = '') => {
+        setTableState({ query });
+    };
+
+    const bodyLoadingRef = useLoading(loading);
+
+    if (!data) {
+        return <CircularProgress variant='indeterminate' />;
+    }
+
+    return (
+        <>
+            <PageContent
+                header={
+                    <PageHeader
+                        title={`Applications (${rows.length})`}
+                        actions={
+                            <Search
+                                initialValue={query || ''}
+                                onChange={setSearchValue}
+                            />
+                        }
+                    />
+                }
+            >
+                <div className={themeStyles.fullwidth}>
+                    <ConditionallyRender
+                        condition={data.length > 0 || loading}
+                        show={
+                            <SearchHighlightProvider value={query || ''}>
+                                <div ref={bodyLoadingRef}>
+                                    <PaginatedTable
+                                        tableInstance={table}
+                                        totalItems={total}
+                                    />
+                                </div>
+                            </SearchHighlightProvider>
+                        }
+                        elseShow={renderNoApplications()}
+                    />
+                </div>
+            </PageContent>
+        </>
+    );
+};