@flightctl/ui-components 0.0.10 → 0.4.0-rc2

package/src/components/Fleet/FleetsPage.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import {
-  Button,
   EmptyStateActions,
   EmptyStateBody,
   EmptyStateFooter,
@@ -13,14 +12,14 @@ import {
   ToolbarGroup,
   ToolbarItem,
 } from '@patternfly/react-core';
-import { Tbody, ThProps } from '@patternfly/react-table';
+import { Tbody } from '@patternfly/react-table';
 import { TopologyIcon } from '@patternfly/react-icons/dist/js/icons/topology-icon';
 import { Trans } from 'react-i18next';
 import { TFunction } from 'i18next';
 
-import { Fleet } from '@flightctl/types';
 import ListPage from '../ListPage/ListPage';
 import ListPageBody from '../ListPage/ListPageBody';
+import TablePagination from '../Table/TablePagination';
 import TableTextSearch from '../Table/TableTextSearch';
 import Table, { ApiSortTableColumn } from '../Table/Table';
 import { useTableSelect } from '../../hooks/useTableSelect';
@@ -33,23 +32,38 @@ import { useTranslation } from '../../hooks/useTranslation';
 import { ROUTE, useNavigate } from '../../hooks/useNavigate';
 import DeleteFleetModal from './DeleteFleetModal/DeleteFleetModal';
 import FleetResourceSyncs from './FleetResourceSyncs';
-import { useApiTableSort } from '../../hooks/useApiTableSort';
 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,12 +92,9 @@ const FleetEmptyState = () => {
 const getColumns = (t: TFunction): ApiSortTableColumn[] => [
   {
     name: t('Name'),
-    sortableField: 'metadata.name',
-    defaultSort: true,
   },
   {
     name: t('System image'),
-    sortableField: 'spec.template.spec.os.image',
   },
   {
     name: t('Devices'),
@@ -93,26 +104,25 @@ const getColumns = (t: TFunction): ApiSortTableColumn[] => [
   },
 ];
 
-type FleetTableProps = {
-  fleetColumns: ApiSortTableColumn[];
-  fleetLoad: FleetLoad;
-  getSortParams: (columnIndex: number) => ThProps['sort'];
-  hasFiltersEnabled: boolean;
-  name: string | undefined;
-  setName: (name: string) => void;
-};
-
-const FleetTable = ({ name, setName, hasFiltersEnabled, getSortParams, fleetColumns, fleetLoad }: FleetTableProps) => {
+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 [fleets, loading, error, isFilterUpdating, refetch] = fleetLoad;
 
   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>
@@ -120,25 +130,28 @@ const FleetTable = ({ name, setName, hasFiltersEnabled, getSortParams, fleetColu
               <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')}
-        loading={isFilterUpdating}
+        loading={isUpdating}
         columns={fleetColumns}
         emptyFilters={!hasFiltersEnabled}
         emptyData={fleets.length === 0}
-        getSortParams={getSortParams}
         isAllSelected={isAllSelected}
         onSelectAll={setAllSelected}
       >
@@ -148,15 +161,18 @@ const FleetTable = ({ name, setName, hasFiltersEnabled, getSortParams, fleetColu
               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
@@ -183,33 +199,27 @@ const FleetTable = ({ name, setName, hasFiltersEnabled, getSortParams, fleetColu
   );
 };
 
-type FleetLoad = [Fleet[], boolean, unknown, boolean, VoidFunction];
-
 const FleetsPage = () => {
   const { t } = useTranslation();
 
-  // TODO move the fetch down to FleetTable when the API includes the filter for pending / errored resource syncs
-  const columns = React.useMemo(() => getColumns(t), [t]);
-  const { name, setName, hasFiltersEnabled } = useFleetBackendFilters();
-  const { getSortParams, sortField, direction } = useApiTableSort(columns);
-  const fleetLoad = useFleets({ name, addDevicesCount: true, sortField, direction });
-
   return (
     <>
-      <FleetResourceSyncs fleets={fleetLoad[0] || []} />
+      <FleetResourceSyncs />
 
       <ListPage title={t('Fleets')}>
-        <FleetTable
-          name={name}
-          setName={setName}
-          hasFiltersEnabled={hasFiltersEnabled}
-          getSortParams={getSortParams}
-          fleetLoad={fleetLoad}
-          fleetColumns={columns}
-        />
+        <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

@@ -1,9 +1,11 @@
 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 { Fleet, FleetList, SortOrder } from '@flightctl/types';
-import { useDebounce } from 'use-debounce';
+import { PaginationDetails, useTablePagination } from '../../hooks/useTablePagination';
+import { PAGE_SIZE } from '../../constants';
 
 export enum FleetSearchParams {
   Name = 'name',
@@ -11,9 +13,8 @@ export enum FleetSearchParams {
 
 type FleetsEndpointArgs = {
   name?: string;
+  nextContinue?: string;
   addDevicesCount?: boolean;
-  sortField?: string;
-  direction?: string;
 };
 
 export const useFleetBackendFilters = () => {
@@ -45,29 +46,27 @@ export const useFleetBackendFilters = () => {
 };
 
 const getFleetsEndpoint = ({
-  addDevicesCount,
   name,
-  sortField,
-  direction,
+  addDevicesCount,
+  nextContinue,
 }: {
-  addDevicesCount?: boolean;
   name?: string;
-  sortField?: string;
-  direction?: string;
+  addDevicesCount?: boolean;
+  nextContinue?: string;
 }) => {
-  const params = new URLSearchParams();
+  const params = new URLSearchParams({
+    limit: `${PAGE_SIZE}`,
+  });
   if (name) {
     params.set('fieldSelector', `metadata.name contains ${name}`);
   }
   if (addDevicesCount) {
     params.set('addDevicesCount', 'true');
   }
-
-  if (sortField) {
-    params.set('sortBy', sortField);
-    params.set('sortOrder', direction || SortOrder.ASC);
+  if (nextContinue) {
+    params.set('continue', nextContinue);
   }
-  return params.size ? `fleets?${params.toString()}` : 'fleets';
+  return `fleets?${params.toString()}`;
 };
 
 const useFleetsEndpoint = (args: FleetsEndpointArgs): [string, boolean] => {
@@ -76,11 +75,30 @@ const useFleetsEndpoint = (args: FleetsEndpointArgs): [string, boolean] => {
   return [fleetsEndpointDebounced, endpoint !== fleetsEndpointDebounced];
 };
 
-export const useFleets = (args: FleetsEndpointArgs): [Fleet[], boolean, unknown, boolean, VoidFunction] => {
-  const [fleetsEndpoint, fleetsDebouncing] = useFleetsEndpoint(args);
-  const [fleetsList, fleetsLoading, fleetsError, fleetsRefetch, updating] = useFetchPeriodically<FleetList>({
-    endpoint: fleetsEndpoint,
-  });
+export type FleetLoad = {
+  fleets: Fleet[];
+  isLoading: boolean;
+  error: unknown;
+  isUpdating: boolean;
+  refetch: VoidFunction;
+  pagination: PaginationDetails;
+};
 
-  return [fleetsList?.items || [], fleetsLoading, fleetsError, updating || fleetsDebouncing, fleetsRefetch];
+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,26 +33,17 @@ const StatusCard = () => {
     labels,
   });
 
-  // TODO https://issues.redhat.com/browse/EDM-684 Use the new API endpoint to retrieve device labels
-  const [, /* devices */ loading, error, , , allLabels] = useDevices({
-    ownerFleets: fleets,
-    labels,
-  });
-
-  // TODO https://issues.redhat.com/browse/EDM-683 Use the new API endpoint to retrieve fleet names
-  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>
@@ -97,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/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 md={6} lg={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>
   );
 };
 

package/src/components/Repository/CreateRepository/CreateRepository.tsx

@@ -13,16 +13,21 @@ import {
   StackItem,
   Title,
 } from '@patternfly/react-core';
-import { useTranslation } from '../../../hooks/useTranslation';
-import { useFetch } from '../../../hooks/useFetch';
 
-import CreateRepositoryForm from './CreateRepositoryForm';
-
-import { isPromiseFulfilled } from '../../../types/typeUtils';
 import { Repository, ResourceSync, ResourceSyncList } from '@flightctl/types';
-import { getErrorMessage } from '../../../utils/error';
+
+import { useTranslation } from '../../../hooks/useTranslation';
+import { useFetch } from '../../../hooks/useFetch';
 import { Link, ROUTE, useNavigate } from '../../../hooks/useNavigate';
 import { useAppContext } from '../../../hooks/useAppContext';
+import { useAccessReview } from '../../../hooks/useAccessReview';
+import { isPromiseFulfilled } from '../../../types/typeUtils';
+import { RESOURCE, VERB } from '../../../types/rbac';
+import { getErrorMessage } from '../../../utils/error';
+import { commonQueries } from '../../../utils/query';
+import PageWithPermissions from '../../common/PageWithPermissions';
+
+import CreateRepositoryForm from './CreateRepositoryForm';
 
 const CreateRepository = () => {
   const { t } = useTranslation();
@@ -30,6 +35,7 @@ const CreateRepository = () => {
     router: { useParams },
   } = useAppContext();
   const { repositoryId } = useParams<{ repositoryId: string }>();
+
   const { get } = useFetch();
   const [repoError, setRepoError] = React.useState<string>();
   const [rsError, setRsError] = React.useState<string>();
@@ -44,7 +50,7 @@ const CreateRepository = () => {
       try {
         const results = await Promise.allSettled([
           get<Repository>(`repositories/${repositoryId}`),
-          get<ResourceSyncList>(`resourcesyncs?fieldSelector=spec.repository=${repositoryId}`),
+          get<ResourceSyncList>(commonQueries.getResourceSyncsByRepo(repositoryId as string)),
         ]);
 
         if (isPromiseFulfilled(results[0])) {
@@ -70,7 +76,8 @@ const CreateRepository = () => {
     const reload = async () => {
       try {
         setIsLoading(true);
-        const rsList = await get<ResourceSyncList>(`resourcesyncs?fieldSelector=spec.repository${repositoryId}`);
+
+        const rsList = await get<ResourceSyncList>(commonQueries.getResourceSyncsByRepo(repositoryId as string));
         setResourceSyncs(rsList.items);
         setRsError(undefined);
       } catch (e) {
@@ -141,4 +148,13 @@ const CreateRepository = () => {
   );
 };
 
-export default CreateRepository;
+const CreateRepositoryWithPermissions = () => {
+  const [allowed, loading] = useAccessReview(RESOURCE.REPOSITORY, VERB.CREATE);
+  return (
+    <PageWithPermissions allowed={allowed} loading={loading}>
+      <CreateRepository />
+    </PageWithPermissions>
+  );
+};
+
+export default CreateRepositoryWithPermissions;

package/src/components/Repository/CreateRepository/CreateRepositoryForm.tsx

@@ -40,8 +40,9 @@ import CheckboxField from '../../form/CheckboxField';
 import RadioField from '../../form/RadioField';
 import TextField from '../../form/TextField';
 import FlightCtlForm from '../../form/FlightCtlForm';
-
 import { getDnsSubdomainValidations } from '../../form/validations';
+import { useAccessReview } from '../../../hooks/useAccessReview';
+import { RESOURCE, VERB } from '../../../types/rbac';
 
 import './CreateRepositoryForm.css';
 
@@ -285,13 +286,15 @@ const CreateRepositoryFormContent = ({ isEdit, isReadOnly, onClose, children }:
   const { values, setFieldValue, isValid, dirty, submitForm, isSubmitting } = useFormikContext<RepositoryFormValues>();
   const isSubmitDisabled = isSubmitting || !dirty || !isValid;
 
+  const [canCreateRS] = useAccessReview(RESOURCE.RESOURCE_SYNC, VERB.CREATE);
+
   const showResourceSyncs = values.canUseResourceSyncs && values.repoType === RepoSpecType.GIT;
   return (
     <FlightCtlForm className="fctl-create-repo">
       <fieldset disabled={isReadOnly}>
         <Grid hasGutter span={8}>
           <RepositoryForm isEdit={isEdit} />
-          {showResourceSyncs && (
+          {showResourceSyncs && canCreateRS && (
             <Checkbox
               id="use-resource-syncs"
               label={