@flightctl/ui-components 0.0.5 → 0.4.0-rc1

package/src/components/Fleet/FleetsPage.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import {
-  Button,
   EmptyStateActions,
   EmptyStateBody,
   EmptyStateFooter,
@@ -18,16 +17,11 @@ import { TopologyIcon } from '@patternfly/react-icons/dist/js/icons/topology-ico
 import { Trans } from 'react-i18next';
 import { TFunction } from 'i18next';
 
-import { Fleet, FleetList } from '@flightctl/types';
-import { useFetchPeriodically } from '../../hooks/useFetchPeriodically';
 import ListPage from '../ListPage/ListPage';
 import ListPageBody from '../ListPage/ListPageBody';
-import { sortByName } from '../../utils/sort/generic';
-import { sortByStatus, sortFleetsByOSImg } from '../../utils/sort/fleet';
+import TablePagination from '../Table/TablePagination';
 import TableTextSearch from '../Table/TableTextSearch';
-import Table, { TableColumn } from '../Table/Table';
-import { useTableTextSearch } from '../../hooks/useTableTextSearch';
-import { useTableSort } from '../../hooks/useTableSort';
+import Table, { ApiSortTableColumn } from '../Table/Table';
 import { useTableSelect } from '../../hooks/useTableSelect';
 import TableActions from '../Table/TableActions';
 import { getResourceId } from '../../utils/resource';
@@ -38,21 +32,38 @@ import { useTranslation } from '../../hooks/useTranslation';
 import { ROUTE, useNavigate } from '../../hooks/useNavigate';
 import DeleteFleetModal from './DeleteFleetModal/DeleteFleetModal';
 import FleetResourceSyncs from './FleetResourceSyncs';
+import { useFleetBackendFilters, useFleets } from './useFleets';
+import { useAccessReview } from '../../hooks/useAccessReview';
+import ButtonWithPermissions from '../common/ButtonWithPermissions';
+import { RESOURCE, VERB } from '../../types/rbac';
+import PageWithPermissions from '../common/PageWithPermissions';
+import { useFleetImportAccessReview } from '../../hooks/useFleetImportAccessReview';
 
 const FleetPageActions = ({ createText }: { createText?: string }) => {
   const { t } = useTranslation();
   const navigate = useNavigate();
+  const canCreateFleet = useAccessReview(RESOURCE.FLEET, VERB.CREATE);
+  const canImportFleet = useFleetImportAccessReview();
+
   return (
     <Split hasGutter>
       <SplitItem>
-        <Button variant="primary" onClick={() => navigate(ROUTE.FLEET_CREATE)}>
+        <ButtonWithPermissions
+          permissions={canCreateFleet}
+          variant="primary"
+          onClick={() => navigate(ROUTE.FLEET_CREATE)}
+        >
           {createText || t('Create a fleet')}
-        </Button>
+        </ButtonWithPermissions>
       </SplitItem>
       <SplitItem>
-        <Button variant="secondary" onClick={() => navigate(ROUTE.FLEET_IMPORT)}>
+        <ButtonWithPermissions
+          permissions={canImportFleet}
+          variant="secondary"
+          onClick={() => navigate(ROUTE.FLEET_IMPORT)}
+        >
           {t('Import fleets')}
-        </Button>
+        </ButtonWithPermissions>
       </SplitItem>
     </Split>
   );
@@ -78,84 +89,90 @@ const FleetEmptyState = () => {
   );
 };
 
-const getColumns = (t: TFunction): TableColumn<Fleet>[] => [
+const getColumns = (t: TFunction): ApiSortTableColumn[] => [
   {
     name: t('Name'),
-    onSort: sortByName,
   },
   {
     name: t('System image'),
-    onSort: sortFleetsByOSImg,
   },
   {
     name: t('Devices'),
   },
   {
     name: t('Status'),
-    onSort: sortByStatus,
   },
 ];
 
-const getSearchText = (fleet: Fleet) => [fleet.metadata.name];
-
-const FleetTable = ({ fleetLoad }: { fleetLoad: FleetLoad }) => {
+const FleetTable = () => {
   const { t } = useTranslation();
 
+  const fleetColumns = React.useMemo(() => getColumns(t), [t]);
+  const { name, setName, hasFiltersEnabled } = useFleetBackendFilters();
+
+  const { fleets, isLoading, error, isUpdating, refetch, pagination } = useFleets({ name, addDevicesCount: true });
+
   const [isMassDeleteModalOpen, setIsMassDeleteModalOpen] = React.useState(false);
   const [fleetToDeleteId, setFleetToDeleteId] = React.useState<string>();
 
-  const [fleetList, loading, error, refetch] = fleetLoad;
-  const columns = React.useMemo(() => getColumns(t), [t]);
-  const fleets = fleetList?.items || [];
-  const { search, setSearch, filteredData } = useTableTextSearch(fleets, getSearchText);
-  const { getSortParams, sortedData: sortedFleets } = useTableSort(filteredData, columns);
   const { onRowSelect, isAllSelected, hasSelectedRows, isRowSelected, setAllSelected } = useTableSelect();
 
+  const [canDelete] = useAccessReview(RESOURCE.FLEET, VERB.DELETE);
+  const [canCreate] = useAccessReview(RESOURCE.FLEET, VERB.CREATE);
+  const [canEdit] = useAccessReview(RESOURCE.FLEET, VERB.PATCH);
+
   return (
-    <ListPageBody error={error} loading={loading}>
+    <ListPageBody error={error} loading={isLoading}>
       <Toolbar inset={{ default: 'insetNone' }}>
         <ToolbarContent>
           <ToolbarGroup>
             <ToolbarItem variant="search-filter">
-              <TableTextSearch value={search} setValue={setSearch} placeholder={t('Search by name')} />
+              <TableTextSearch value={name} setValue={setName} placeholder={t('Search by name')} />
             </ToolbarItem>
           </ToolbarGroup>
-          <ToolbarItem>
-            <FleetPageActions createText={t('Create fleet')} />
-          </ToolbarItem>
-          <ToolbarItem>
-            <TableActions isDisabled={!hasSelectedRows}>
-              <SelectList>
-                <SelectOption onClick={() => setIsMassDeleteModalOpen(true)}>{t('Delete')}</SelectOption>
-              </SelectList>
-            </TableActions>
-          </ToolbarItem>
+          {canCreate && (
+            <ToolbarItem>
+              <FleetPageActions createText={t('Create fleet')} />
+            </ToolbarItem>
+          )}
+          {canDelete && (
+            <ToolbarItem>
+              <TableActions isDisabled={!hasSelectedRows}>
+                <SelectList>
+                  <SelectOption onClick={() => setIsMassDeleteModalOpen(true)}>{t('Delete')}</SelectOption>
+                </SelectList>
+              </TableActions>
+            </ToolbarItem>
+          )}
         </ToolbarContent>
       </Toolbar>
       <Table
         aria-label={t('Fleets table')}
-        columns={columns}
-        emptyFilters={filteredData.length === 0}
+        loading={isUpdating}
+        columns={fleetColumns}
+        emptyFilters={!hasFiltersEnabled}
         emptyData={fleets.length === 0}
-        getSortParams={getSortParams}
         isAllSelected={isAllSelected}
         onSelectAll={setAllSelected}
       >
         <Tbody>
-          {sortedFleets.map((fleet, rowIndex) => (
+          {fleets.map((fleet, rowIndex) => (
             <FleetRow
               key={getResourceId(fleet)}
               fleet={fleet}
               rowIndex={rowIndex}
+              canDelete={canDelete}
               onDeleteClick={() => {
                 setFleetToDeleteId(fleet.metadata.name || '');
               }}
               isRowSelected={isRowSelected}
               onRowSelect={onRowSelect}
+              canEdit={canEdit}
             />
           ))}
         </Tbody>
       </Table>
+      <TablePagination pagination={pagination} isUpdating={isUpdating} />
       {fleets.length === 0 && <FleetEmptyState />}
       {fleetToDeleteId && (
         <DeleteFleetModal
@@ -171,7 +188,7 @@ const FleetTable = ({ fleetLoad }: { fleetLoad: FleetLoad }) => {
       {isMassDeleteModalOpen && (
         <MassDeleteFleetModal
           onClose={() => setIsMassDeleteModalOpen(false)}
-          fleets={sortedFleets.filter(isRowSelected)}
+          fleets={fleets.filter(isRowSelected)}
           onDeleteSuccess={() => {
             setIsMassDeleteModalOpen(false);
             refetch();
@@ -182,23 +199,27 @@ const FleetTable = ({ fleetLoad }: { fleetLoad: FleetLoad }) => {
   );
 };
 
-type FleetLoad = [FleetList | undefined, boolean, unknown, VoidFunction, boolean];
-
 const FleetsPage = () => {
   const { t } = useTranslation();
 
-  // TODO move the fetch down to FleetTable when the API includes the filter for pending / errored resource syncs
-  const fleetLoad = useFetchPeriodically<FleetList>({ endpoint: 'fleets?addDevicesCount=true' });
-
   return (
     <>
-      <FleetResourceSyncs fleets={fleetLoad[0]?.items || []} />
+      <FleetResourceSyncs />
 
       <ListPage title={t('Fleets')}>
-        <FleetTable fleetLoad={fleetLoad} />
+        <FleetTable />
       </ListPage>
     </>
   );
 };
 
-export default FleetsPage;
+const FleetsPageWithPermissions = () => {
+  const [allowed, loading] = useAccessReview(RESOURCE.FLEET, VERB.LIST);
+  return (
+    <PageWithPermissions allowed={allowed} loading={loading}>
+      <FleetsPage />
+    </PageWithPermissions>
+  );
+};
+
+export default FleetsPageWithPermissions;

package/src/components/Fleet/ImportFleetWizard/ImportFleetWizard.tsx

@@ -40,6 +40,8 @@ import { useTranslation } from '../../../hooks/useTranslation';
 import { Link, ROUTE, useNavigate } from '../../../hooks/useNavigate';
 import LeaveFormConfirmation from '../../common/LeaveFormConfirmation';
 import ErrorBoundary from '../../common/ErrorBoundary';
+import PageWithPermissions from '../../common/PageWithPermissions';
+import { useFleetImportAccessReview } from '../../../hooks/useFleetImportAccessReview';
 
 import './ImportFleetWizard.css';
 
@@ -97,11 +99,13 @@ const ImportFleetWizard = () => {
   const [errors, setErrors] = React.useState<string[]>();
   const navigate = useNavigate();
   const [currentStep, setCurrentStep] = React.useState<WizardStepType>();
-  const [repoList, isLoading, error] = useFetchPeriodically<RepositoryList>({ endpoint: 'repositories' });
+  const [repoList, isLoading, error] = useFetchPeriodically<RepositoryList>({
+    endpoint: 'repositories',
+  });
 
   const gitRepositories = (repoList?.items || []).filter((repo) => repo.spec.type === RepoSpecType.GIT);
 
-  let body;
+  let body: React.ReactNode;
 
   if (isLoading) {
     body = (
@@ -213,4 +217,13 @@ const ImportFleetWizard = () => {
   );
 };
 
-export default ImportFleetWizard;
+const ImportFleetWizardWithPermissions = () => {
+  const [allowed, isLoading] = useFleetImportAccessReview();
+  return (
+    <PageWithPermissions allowed={allowed} loading={isLoading}>
+      <ImportFleetWizard />
+    </PageWithPermissions>
+  );
+};
+
+export default ImportFleetWizardWithPermissions;

package/src/components/Fleet/ImportFleetWizard/steps/RepositoryStep.tsx

@@ -12,6 +12,8 @@ import { getLastTransitionTimeText, getRepositorySyncStatus } from '../../../../
 import { useTranslation } from '../../../../hooks/useTranslation';
 import FormSelect from '../../../form/FormSelect';
 import FlightCtlForm from '../../../form/FlightCtlForm';
+import { useAccessReview } from '../../../../hooks/useAccessReview';
+import { RESOURCE, VERB } from '../../../../types/rbac';
 
 export const repositoryStepId = 'repository';
 
@@ -75,6 +77,8 @@ const RepositoryStep = ({ repositories, hasLoaded }: { repositories: Repository[
   const { t } = useTranslation();
   const { values, setFieldValue } = useFormikContext<ImportFleetFormValues>();
 
+  const [canCreateRepo] = useAccessReview(RESOURCE.REPOSITORY, VERB.CREATE);
+
   const noRepositoriesExist = hasLoaded && repositories.length === 0;
   React.useEffect(() => {
     if (values.useExistingRepo && noRepositoriesExist) {
@@ -85,25 +89,27 @@ const RepositoryStep = ({ repositories, hasLoaded }: { repositories: Repository[
   return (
     <FlightCtlForm>
       <Grid span={8}>
-        <FormSection>
-          <FormGroup isInline>
-            <Radio
-              isChecked={values.useExistingRepo}
-              onChange={() => setFieldValue('useExistingRepo', true, true)}
-              id="existing-repo"
-              name="repo"
-              label={t('Use an existing Git repository')}
-              isDisabled={noRepositoriesExist}
-            />
-            <Radio
-              isChecked={!values.useExistingRepo}
-              onChange={() => setFieldValue('useExistingRepo', false, true)}
-              id="new-repo"
-              name="repo"
-              label={t('Use a new Git repository')}
-            />
-          </FormGroup>
-        </FormSection>
+        {canCreateRepo && (
+          <FormSection>
+            <FormGroup isInline>
+              <Radio
+                isChecked={values.useExistingRepo}
+                onChange={() => setFieldValue('useExistingRepo', true, true)}
+                id="existing-repo"
+                name="repo"
+                label={t('Use an existing Git repository')}
+                isDisabled={noRepositoriesExist}
+              />
+              <Radio
+                isChecked={!values.useExistingRepo}
+                onChange={() => setFieldValue('useExistingRepo', false, true)}
+                id="new-repo"
+                name="repo"
+                label={t('Use a new Git repository')}
+              />
+            </FormGroup>
+          </FormSection>
+        )}
         <FormSection>
           {values.useExistingRepo ? <ExistingRepoForm repositories={repositories} /> : <RepositoryForm />}
         </FormSection>

package/src/components/Fleet/useFleets.ts

@@ -0,0 +1,104 @@
+import * as React from 'react';
+import { useDebounce } from 'use-debounce';
+
+import { Fleet, FleetList } from '@flightctl/types';
+import { useAppContext } from '../../hooks/useAppContext';
+import { useFetchPeriodically } from '../../hooks/useFetchPeriodically';
+import { PaginationDetails, useTablePagination } from '../../hooks/useTablePagination';
+import { PAGE_SIZE } from '../../constants';
+
+export enum FleetSearchParams {
+  Name = 'name',
+}
+
+type FleetsEndpointArgs = {
+  name?: string;
+  nextContinue?: string;
+  addDevicesCount?: boolean;
+};
+
+export const useFleetBackendFilters = () => {
+  const {
+    router: { useSearchParams },
+  } = useAppContext();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const paramsRef = React.useRef(searchParams);
+  const name = searchParams.get(FleetSearchParams.Name) || undefined;
+
+  const setName = React.useCallback(
+    (nameVal: string) => {
+      const newParams = new URLSearchParams({
+        [FleetSearchParams.Name]: nameVal,
+      });
+      paramsRef.current = newParams;
+      setSearchParams(newParams);
+    },
+    [setSearchParams],
+  );
+
+  const hasFiltersEnabled = !!name;
+
+  return {
+    name,
+    setName,
+    hasFiltersEnabled,
+  };
+};
+
+const getFleetsEndpoint = ({
+  name,
+  addDevicesCount,
+  nextContinue,
+}: {
+  name?: string;
+  addDevicesCount?: boolean;
+  nextContinue?: string;
+}) => {
+  const params = new URLSearchParams({
+    limit: `${PAGE_SIZE}`,
+  });
+  if (name) {
+    params.set('fieldSelector', `metadata.name contains ${name}`);
+  }
+  if (addDevicesCount) {
+    params.set('addDevicesCount', 'true');
+  }
+  if (nextContinue) {
+    params.set('continue', nextContinue);
+  }
+  return `fleets?${params.toString()}`;
+};
+
+const useFleetsEndpoint = (args: FleetsEndpointArgs): [string, boolean] => {
+  const endpoint = getFleetsEndpoint(args);
+  const [fleetsEndpointDebounced] = useDebounce(endpoint, 1000);
+  return [fleetsEndpointDebounced, endpoint !== fleetsEndpointDebounced];
+};
+
+export type FleetLoad = {
+  fleets: Fleet[];
+  isLoading: boolean;
+  error: unknown;
+  isUpdating: boolean;
+  refetch: VoidFunction;
+  pagination: PaginationDetails;
+};
+
+export const useFleets = (args: FleetsEndpointArgs): FleetLoad => {
+  const pagination = useTablePagination();
+  const [fleetsEndpoint, fleetsDebouncing] = useFleetsEndpoint({ ...args, nextContinue: pagination.nextContinue });
+  const [fleetsList, isLoading, error, refetch, updating] = useFetchPeriodically<FleetList>(
+    {
+      endpoint: fleetsEndpoint,
+    },
+    pagination.onPageFetched,
+  );
+  return {
+    fleets: fleetsList?.items || [],
+    isLoading,
+    error,
+    isUpdating: updating || fleetsDebouncing,
+    refetch,
+    pagination,
+  };
+};

package/src/components/OverviewPage/Cards/Status/StatusCard.tsx

@@ -14,16 +14,14 @@ import {
   TextContent,
   TextVariants,
 } from '@patternfly/react-core';
-import { FleetList } from '@flightctl/types';
 import { useTranslation } from '../../../../hooks/useTranslation';
 import ApplicationStatusChart from './ApplicationStatusChart';
 import DeviceStatusChart from './DeviceStatusChart';
 import SystemUpdateStatusChart from './SystemUpdateStatusChart';
-import { useFetchPeriodically } from '../../../../hooks/useFetchPeriodically';
 import StatusCardFilters from './StatusCardFilters';
 import ErrorAlert from '../../../ErrorAlert/ErrorAlert';
 import { FlightCtlLabel } from '../../../../types/extraTypes';
-import { useDevices, useDevicesSummary } from '../../../Device/DevicesPage/useDevices';
+import { useDevicesSummary } from '../../../Device/DevicesPage/useDevices';
 
 const StatusCard = () => {
   const { t } = useTranslation();
@@ -35,31 +33,23 @@ const StatusCard = () => {
     labels,
   });
 
-  // TODO remove "useDevices" (to fetch labels), and fetching of fleets when the new API endpoints are available
-  const [devices, loading, error, , , allLabels] = useDevices({
-    ownerFleets: fleets,
-    labels,
-  });
-
-  const [fleetsList, flLoading, flError] = useFetchPeriodically<FleetList>({
-    endpoint: 'fleets',
-  });
+  const error = false;
 
   let content: React.ReactNode;
-  if (loading || flLoading || summaryLoading) {
+  if (summaryLoading) {
     content = (
       <Bullseye>
         <Spinner />
       </Bullseye>
     );
-  } else if (error || flError) {
-    content = <ErrorAlert error={error || flError} />;
+  } else if (error) {
+    content = <ErrorAlert error={error} />;
   } else {
     content = (
       <Stack>
         <StackItem>
           <TextContent>
-            <Text component={TextVariants.small}>{t('{{count}} Devices', { count: devices.length || 0 })}</Text>
+            <Text component={TextVariants.small}>{t('{{count}} Devices', { count: devicesSummary?.total || 0 })}</Text>
           </TextContent>
         </StackItem>
         <StackItem>
@@ -96,10 +86,8 @@ const StatusCard = () => {
           </FlexItem>
           <FlexItem>
             <StatusCardFilters
-              fleets={fleetsList?.items || []}
               selectedFleets={fleets}
               setSelectedFleets={setFleets}
-              allLabels={allLabels}
               selectedLabels={labels}
               setSelectedLabels={setLabels}
             />

package/src/components/OverviewPage/Cards/Status/StatusCardFilters.tsx

@@ -11,26 +11,21 @@ import {
   ToolbarGroup,
   ToolbarItem,
 } from '@patternfly/react-core';
-import { Fleet } from '@flightctl/types';
 import { useTranslation } from '../../../../hooks/useTranslation';
 import { labelToString } from '../../../../utils/labels';
 import { FlightCtlLabel } from '../../../../types/extraTypes';
 import DeviceTableToolbarFilters from '../../../Device/DevicesPage/DeviceToolbarFilters';
 
 type StatusCardFiltersProps = {
-  fleets: Fleet[];
   selectedFleets: string[];
   setSelectedFleets: (fleets: string[]) => void;
-  allLabels: FlightCtlLabel[];
   selectedLabels: FlightCtlLabel[];
   setSelectedLabels: (labels: FlightCtlLabel[]) => void;
 };
 
 const StatusCardFilters: React.FC<StatusCardFiltersProps> = ({
-  fleets,
   selectedFleets,
   setSelectedFleets,
-  allLabels,
   selectedLabels,
   setSelectedLabels,
 }) => {
@@ -46,10 +41,8 @@ const StatusCardFilters: React.FC<StatusCardFiltersProps> = ({
             <ToolbarGroup>
               <ToolbarItem variant="search-filter">
                 <DeviceTableToolbarFilters
-                  fleets={fleets}
                   selectedFleetNames={selectedFleets}
                   setSelectedFleets={setSelectedFleets}
-                  allLabels={allLabels}
                   selectedLabels={selectedLabels}
                   setSelectedLabels={setSelectedLabels}
                 />

package/src/components/OverviewPage/Cards/ToDo/ToDoCard.tsx

@@ -13,18 +13,15 @@ import {
   TextContent,
   TextVariants,
 } from '@patternfly/react-core';
-import { EnrollmentRequestList } from '@flightctl/types';
 import { useTranslation } from '../../../../hooks/useTranslation';
-import { useFetchPeriodically } from '../../../../hooks/useFetchPeriodically';
-import { EnrollmentRequestStatus, getApprovalStatus } from '../../../../utils/status/enrollmentRequest';
+import { usePendingEnrollmentRequestsCount } from '../../../../hooks/usePendingEnrollmentRequestsCount';
 import { Link, ROUTE } from '../../../../hooks/useNavigate';
 import ErrorAlert from '../../../ErrorAlert/ErrorAlert';
 
 const ToDoCard = () => {
   const { t } = useTranslation();
-  const [erList, loading, error] = useFetchPeriodically<EnrollmentRequestList>({
-    endpoint: 'enrollmentrequests',
-  });
+
+  const [pendingErCount, loading, error] = usePendingEnrollmentRequestsCount();
 
   let content: React.ReactNode;
   if (loading) {
@@ -36,15 +33,14 @@ const ToDoCard = () => {
   } else if (error) {
     content = <ErrorAlert error={error} />;
   } else {
-    const pendingErs = erList?.items.filter((er) => getApprovalStatus(er) === EnrollmentRequestStatus.Pending);
-    if (pendingErs?.length) {
+    if (pendingErCount) {
       content = (
         <List>
           <ListItem>
             <Split hasGutter>
-              <SplitItem isFilled>{t('{{ count }} devices pending approval', { count: pendingErs.length })}</SplitItem>
+              <SplitItem isFilled>{t('{{ count }} devices pending approval', { count: pendingErCount })}</SplitItem>
               <SplitItem>
-                <Link to={ROUTE.DEVICES}>{t('Review pending devices', { count: pendingErs.length })}</Link>
+                <Link to={ROUTE.DEVICES}>{t('Review pending devices', { count: pendingErCount })}</Link>
               </SplitItem>
             </Split>
           </ListItem>

package/src/components/OverviewPage/Overview.tsx

@@ -2,17 +2,29 @@ import * as React from 'react';
 import { Grid, GridItem } from '@patternfly/react-core';
 import StatusCard from './Cards/Status/StatusCard';
 import ToDoCard from './Cards/ToDo/ToDoCard';
+import { useAccessReview } from '../../hooks/useAccessReview';
+import { RESOURCE, VERB } from '../../types/rbac';
+import PageWithPermissions from '../common/PageWithPermissions';
 
 const Overview = () => {
+  const [canListDevices, devicesLoading] = useAccessReview(RESOURCE.DEVICE, VERB.LIST);
+  const [canListErs, erLoading] = useAccessReview(RESOURCE.ENROLLMENT_REQUEST, VERB.LIST);
+
   return (
-    <Grid hasGutter>
-      <GridItem>
-        <StatusCard />
-      </GridItem>
-      <GridItem span={4}>
-        <ToDoCard />
-      </GridItem>
-    </Grid>
+    <PageWithPermissions allowed={canListDevices || canListErs} loading={devicesLoading || erLoading}>
+      <Grid hasGutter>
+        {canListDevices && (
+          <GridItem>
+            <StatusCard />
+          </GridItem>
+        )}
+        {canListErs && (
+          <GridItem md={6} lg={4}>
+            <ToDoCard />
+          </GridItem>
+        )}
+      </Grid>
+    </PageWithPermissions>
   );
 };