@flightctl/ui-components 0.0.5 → 0.4.0-rc1

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?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?labelSelector=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={

package/src/components/Repository/CreateRepository/utils.ts

@@ -139,13 +139,6 @@ export const getRepositoryPatches = (values: RepositoryFormValues, repository: R
     originalValue: repository.spec.url,
     path: '/spec/url',
   });
-  appendJSONPatch({
-    patches,
-    newValue: values.repoType === RepoSpecType.HTTP ? values.validationSuffix : undefined,
-    originalValue:
-      repository.spec.type === RepoSpecType.HTTP ? (repository.spec as HttpRepoSpec).validationSuffix : undefined,
-    path: '/spec/validationSuffix',
-  });
 
   if (!values.useAdvancedConfig) {
     if (isHttpRepoSpec(repository.spec)) {
@@ -153,6 +146,10 @@ export const getRepositoryPatches = (values: RepositoryFormValues, repository: R
         op: 'remove',
         path: '/spec/httpConfig',
       });
+      patches.push({
+        op: 'remove',
+        path: '/spec/validationSuffix',
+      });
     }
     if (isSshRepoSpec(repository.spec)) {
       patches.push({
@@ -199,7 +196,20 @@ export const getRepositoryPatches = (values: RepositoryFormValues, repository: R
         path: '/spec/httpConfig',
         value,
       });
+      appendJSONPatch({
+        patches,
+        newValue: values.validationSuffix,
+        originalValue: undefined,
+        path: '/spec/validationSuffix',
+      });
     } else {
+      appendJSONPatch({
+        patches,
+        newValue: values.repoType === RepoSpecType.HTTP ? values.validationSuffix : undefined,
+        originalValue: repository.spec.validationSuffix,
+        path: '/spec/validationSuffix',
+      });
+
       appendJSONPatch({
         patches,
         newValue: values.httpConfig?.skipServerVerification,
@@ -303,6 +313,12 @@ export const getRepositoryPatches = (values: RepositoryFormValues, repository: R
         op: 'remove',
         path: '/spec/httpConfig',
       });
+      if (repository.spec.validationSuffix) {
+        patches.push({
+          op: 'remove',
+          path: '/spec/validationSuffix',
+        });
+      }
     }
     if (!isSshRepoSpec(repository.spec)) {
       const value: SshConfig = {

package/src/components/Repository/RepositoryDetails/DeleteRepositoryModal.tsx

@@ -1,11 +1,13 @@
 import * as React from 'react';
 import { useEffect } from 'react';
 import { Alert, Button, Modal, Spinner, Stack, StackItem, Text, TextContent } from '@patternfly/react-core';
+import { Trans } from 'react-i18next';
+
+import { ResourceSyncList } from '@flightctl/types';
 
 import { getErrorMessage } from '../../../utils/error';
+import { commonQueries } from '../../../utils/query';
 import { useFetch } from '../../../hooks/useFetch';
-import { ResourceSyncList } from '@flightctl/types';
-import { Trans } from 'react-i18next';
 import { useTranslation } from '../../../hooks/useTranslation';
 
 type DeleteRepositoryModalProps = {
@@ -46,7 +48,7 @@ const DeleteRepositoryModal = ({ repositoryId, onClose, onDeleteSuccess }: Delet
 
   const loadRS = React.useCallback(async () => {
     try {
-      const resourceSyncs = await get<ResourceSyncList>(`resourcesyncs?repository=${repositoryId}`);
+      const resourceSyncs = await get<ResourceSyncList>(commonQueries.getResourceSyncsByRepo(repositoryId));
       setResourceSyncIds(resourceSyncs.items.map((rs) => rs.metadata.name || ''));
       setRsError(undefined);
     } catch (e) {

package/src/components/Repository/RepositoryDetails/RepositoryDetails.tsx

@@ -12,6 +12,9 @@ import DeleteRepositoryModal from './DeleteRepositoryModal';
 import { useTranslation } from '../../../hooks/useTranslation';
 import { ROUTE, useNavigate } from '../../../hooks/useNavigate';
 import { useAppContext } from '../../../hooks/useAppContext';
+import { useAccessReview } from '../../../hooks/useAccessReview';
+import { RESOURCE, VERB } from '../../../types/rbac';
+import PageWithPermissions from '../../common/PageWithPermissions';
 
 const RepositoryDetails = () => {
   const { t } = useTranslation();
@@ -30,6 +33,10 @@ const RepositoryDetails = () => {
     navigate(ROUTE.REPOSITORIES);
   };
 
+  const [canDelete] = useAccessReview(RESOURCE.REPOSITORY, VERB.DELETE);
+  const [canEdit] = useAccessReview(RESOURCE.REPOSITORY, VERB.PATCH);
+  const [canListRS] = useAccessReview(RESOURCE.RESOURCE_SYNC, VERB.LIST);
+
   return (
     <DetailsPage
       loading={isLoading}
@@ -40,14 +47,20 @@ const RepositoryDetails = () => {
       resourceType="Repositories"
       resourceTypeLabel={t('Repositories')}
       actions={
-        <DetailsPageActions>
-          <DropdownList>
-            <DropdownItem onClick={() => navigate({ route: ROUTE.REPO_EDIT, postfix: repositoryId })}>
-              {t('Edit repository')}
-            </DropdownItem>
-            <DropdownItem onClick={() => setIsDeleteModalOpen(true)}>{t('Delete repository')}</DropdownItem>
-          </DropdownList>
-        </DetailsPageActions>
+        (canDelete || canEdit) && (
+          <DetailsPageActions>
+            <DropdownList>
+              {canEdit && (
+                <DropdownItem onClick={() => navigate({ route: ROUTE.REPO_EDIT, postfix: repositoryId })}>
+                  {t('Edit repository')}
+                </DropdownItem>
+              )}
+              {canDelete && (
+                <DropdownItem onClick={() => setIsDeleteModalOpen(true)}>{t('Delete repository')}</DropdownItem>
+              )}
+            </DropdownList>
+          </DetailsPageActions>
+        )
       }
     >
       {repoDetails && (
@@ -56,7 +69,7 @@ const RepositoryDetails = () => {
             <GridItem>
               <RepositoryGeneralDetailsCard repoDetails={repoDetails} />
             </GridItem>
-            {repoDetails.spec.type !== RepoSpecType.HTTP && (
+            {canListRS && repoDetails.spec.type !== RepoSpecType.HTTP && (
               <GridItem>
                 <RepositoryResourceSyncsCard repositoryId={repositoryId} />
               </GridItem>
@@ -75,4 +88,13 @@ const RepositoryDetails = () => {
   );
 };
 
-export default RepositoryDetails;
+const RepositoryDetailsWithPermissions = () => {
+  const [allowed, loading] = useAccessReview(RESOURCE.REPOSITORY, VERB.GET);
+  return (
+    <PageWithPermissions allowed={allowed} loading={loading}>
+      <RepositoryDetails />
+    </PageWithPermissions>
+  );
+};
+
+export default RepositoryDetailsWithPermissions;

package/src/components/Repository/RepositoryList.tsx

@@ -11,18 +11,14 @@ import {
   ToolbarGroup,
   ToolbarItem,
 } from '@patternfly/react-core';
-import { ActionsColumn, Tbody, Td, Tr } from '@patternfly/react-table';
+import { ActionsColumn, IAction, OnSelect, Tbody, Td, Tr } from '@patternfly/react-table';
 import { RepositoryIcon } from '@patternfly/react-icons/dist/js/icons/repository-icon';
 import { TFunction } from 'i18next';
 
-import { RepoSpecType, Repository, RepositoryList } from '@flightctl/types';
-import { useFetchPeriodically } from '../../hooks/useFetchPeriodically';
+import { RepoSpecType, Repository } from '@flightctl/types';
 import ListPageBody from '../ListPage/ListPageBody';
 import ListPage from '../ListPage/ListPage';
 import { getLastTransitionTimeText, getRepositorySyncStatus } from '../../utils/status/repository';
-import { useTableSort } from '../../hooks/useTableSort';
-import { sortByName } from '../../utils/sort/generic';
-import * as repoSort from '../../utils/sort/repository';
 import { useTableTextSearch } from '../../hooks/useTableTextSearch';
 import DeleteRepositoryModal from './RepositoryDetails/DeleteRepositoryModal';
 import TableTextSearch from '../Table/TableTextSearch';
@@ -35,15 +31,23 @@ import { useTranslation } from '../../hooks/useTranslation';
 import { ROUTE, useNavigate } from '../../hooks/useNavigate';
 import ResourceLink from '../common/ResourceLink';
 import RepositoryStatus from '../Status/RepositoryStatus';
+import PageWithPermissions from '../common/PageWithPermissions';
+import { RESOURCE, VERB } from '../../types/rbac';
+import { useAccessReview } from '../../hooks/useAccessReview';
+import { useRepositories } from './useRepositories';
+import TablePagination from '../Table/TablePagination';
 
 const CreateRepositoryButton = ({ buttonText }: { buttonText?: string }) => {
   const { t } = useTranslation();
   const navigate = useNavigate();
+  const [canCreate] = useAccessReview(RESOURCE.REPOSITORY, VERB.CREATE);
 
   return (
-    <Button variant="primary" onClick={() => navigate(ROUTE.REPO_CREATE)}>
-      {buttonText || t('Create a repository')}
-    </Button>
+    canCreate && (
+      <Button variant="primary" onClick={() => navigate(ROUTE.REPO_CREATE)}>
+        {buttonText || t('Create a repository')}
+      </Button>
+    )
   );
 };
 
@@ -71,47 +75,103 @@ const RepositoryEmptyState = () => {
 const getColumns = (t: TFunction): TableColumn<Repository>[] => [
   {
     name: t('Name'),
-    onSort: sortByName,
   },
   {
     name: t('Type'),
-    onSort: repoSort.sortRepositoriesByType,
   },
   {
     name: t('Url'),
-    onSort: repoSort.sortRepositoriesByUrl,
   },
   {
     name: t('Sync status'),
-    onSort: repoSort.sortRepositoriesBySyncStatus,
   },
   {
     name: t('Last transition'),
-    onSort: repoSort.sortRepositoriesByLastTransition,
   },
 ];
 
 const getSearchText = (repo: Repository) => [repo.metadata.name];
 
+const RepositoryTableRow = ({
+  repository,
+  canDelete,
+  canEdit,
+  rowIndex,
+  setDeleteModalRepoId,
+  onRowSelect,
+  isRowSelected,
+}: {
+  repository: Repository;
+  canDelete: boolean;
+  canEdit: boolean;
+  rowIndex: number;
+  setDeleteModalRepoId: (repoId?: string) => void;
+  onRowSelect: (repository: Repository) => OnSelect;
+  isRowSelected: (repository: Repository) => boolean;
+}) => {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+
+  const actions: IAction[] = [];
+  if (canEdit) {
+    actions.push({
+      title: t('Edit repository'),
+      onClick: () => navigate({ route: ROUTE.REPO_EDIT, postfix: repository.metadata.name }),
+    });
+  }
+  if (canDelete) {
+    actions.push({
+      title: t('Delete repository'),
+      onClick: () => setDeleteModalRepoId(repository.metadata.name),
+    });
+  }
+  return (
+    <Tr>
+      <Td
+        select={{
+          rowIndex,
+          onSelect: onRowSelect(repository),
+          isSelected: isRowSelected(repository),
+        }}
+      />
+      <Td dataLabel={t('Name')}>
+        <ResourceLink id={repository.metadata.name as string} routeLink={ROUTE.REPO_DETAILS} />
+      </Td>
+      <Td dataLabel={t('Type')}>
+        {repository.spec.type === RepoSpecType.HTTP ? t('HTTP service') : t('Git repository')}
+      </Td>
+      <Td dataLabel={t('Url')}>{repository.spec.url || '-'}</Td>
+      <Td dataLabel={t('Sync status')}>
+        <RepositoryStatus statusInfo={getRepositorySyncStatus(repository)} />
+      </Td>
+      <Td dataLabel={t('Last transition')}>{getLastTransitionTimeText(repository, t).text}</Td>
+      {!!actions.length && (
+        <Td isActionCell>
+          <ActionsColumn items={actions} />
+        </Td>
+      )}
+    </Tr>
+  );
+};
+
 const RepositoryTable = () => {
   const { t } = useTranslation();
-  const [repositoryList, loading, error, refetch] = useFetchPeriodically<RepositoryList>({ endpoint: 'repositories' });
+  const [repositories, loading, error, isUpdating, refetch, pagination] = useRepositories();
   const [deleteModalRepoId, setDeleteModalRepoId] = React.useState<string>();
   const [isMassDeleteModalOpen, setIsMassDeleteModalOpen] = React.useState(false);
 
-  const navigate = useNavigate();
-
   const onDeleteSuccess = () => {
     setDeleteModalRepoId(undefined);
     refetch();
   };
 
-  const { search, setSearch, filteredData } = useTableTextSearch(repositoryList?.items || [], getSearchText);
-
+  const { search, setSearch, filteredData } = useTableTextSearch(repositories, getSearchText);
   const columns = React.useMemo(() => getColumns(t), [t]);
-  const { getSortParams, sortedData } = useTableSort(filteredData, columns);
 
-  const { onRowSelect, hasSelectedRows, isAllSelected, isRowSelected, setAllSelected } = useTableSelect();
+  const { hasSelectedRows, isAllSelected, isRowSelected, setAllSelected, onRowSelect } = useTableSelect<Repository>();
+
+  const [canDelete] = useAccessReview(RESOURCE.REPOSITORY, VERB.DELETE);
+  const [canEdit] = useAccessReview(RESOURCE.REPOSITORY, VERB.PATCH);
 
   return (
     <ListPageBody error={error} loading={loading}>
@@ -125,64 +185,44 @@ const RepositoryTable = () => {
           <ToolbarItem>
             <CreateRepositoryButton buttonText={t('Create repository')} />
           </ToolbarItem>
-          <ToolbarItem>
-            <TableActions isDisabled={!hasSelectedRows}>
-              <DropdownList>
-                <SelectOption onClick={() => setIsMassDeleteModalOpen(true)}>{t('Delete')}</SelectOption>
-              </DropdownList>
-            </TableActions>
-          </ToolbarItem>
+          {canDelete && (
+            <ToolbarItem>
+              <TableActions isDisabled={!hasSelectedRows}>
+                <DropdownList>
+                  <SelectOption onClick={() => setIsMassDeleteModalOpen(true)}>{t('Delete')}</SelectOption>
+                </DropdownList>
+              </TableActions>
+            </ToolbarItem>
+          )}
         </ToolbarContent>
       </Toolbar>
       <Table
         aria-label={t('Repositories table')}
+        loading={isUpdating}
         emptyFilters={filteredData.length === 0}
-        emptyData={(repositoryList?.items.length || 0) === 0}
+        emptyData={repositories.length === 0}
         isAllSelected={isAllSelected}
         onSelectAll={setAllSelected}
         columns={columns}
-        getSortParams={getSortParams}
       >
         <Tbody>
-          {sortedData.map((repository, rowIndex) => (
-            <Tr key={repository.metadata.name}>
-              <Td
-                select={{
-                  rowIndex,
-                  onSelect: onRowSelect(repository),
-                  isSelected: isRowSelected(repository),
-                }}
-              />
-              <Td dataLabel={t('Name')}>
-                <ResourceLink id={repository.metadata.name as string} routeLink={ROUTE.REPO_DETAILS} />
-              </Td>
-              <Td dataLabel={t('Type')}>
-                {repository.spec.type === RepoSpecType.HTTP ? t('HTTP service') : t('Git repository')}
-              </Td>
-              <Td dataLabel={t('Url')}>{repository.spec.url || '-'}</Td>
-              <Td dataLabel={t('Sync status')}>
-                <RepositoryStatus statusInfo={getRepositorySyncStatus(repository)} />
-              </Td>
-              <Td dataLabel={t('Last transition')}>{getLastTransitionTimeText(repository, t).text}</Td>
-              <Td isActionCell>
-                <ActionsColumn
-                  items={[
-                    {
-                      title: t('Edit repository'),
-                      onClick: () => navigate({ route: ROUTE.REPO_EDIT, postfix: repository.metadata.name }),
-                    },
-                    {
-                      title: t('Delete repository'),
-                      onClick: () => setDeleteModalRepoId(repository.metadata.name),
-                    },
-                  ]}
-                />
-              </Td>
-            </Tr>
+          {filteredData.map((repository, rowIndex) => (
+            <RepositoryTableRow
+              key={repository.metadata.name}
+              repository={repository}
+              rowIndex={rowIndex}
+              canDelete={canDelete}
+              canEdit={canEdit}
+              setDeleteModalRepoId={setDeleteModalRepoId}
+              isRowSelected={isRowSelected}
+              onRowSelect={onRowSelect}
+            />
           ))}
         </Tbody>
       </Table>
-      {repositoryList?.items.length === 0 && <RepositoryEmptyState />}
+      <TablePagination isUpdating={isUpdating} pagination={pagination} />
+
+      {repositories.length === 0 && <RepositoryEmptyState />}
       {!!deleteModalRepoId && (
         <DeleteRepositoryModal
           onClose={() => setDeleteModalRepoId(undefined)}
@@ -197,7 +237,7 @@ const RepositoryTable = () => {
             setIsMassDeleteModalOpen(false);
             refetch();
           }}
-          repositories={sortedData.filter(isRowSelected)}
+          repositories={filteredData.filter(isRowSelected)}
         />
       )}
     </ListPageBody>
@@ -206,10 +246,13 @@ const RepositoryTable = () => {
 
 const RepositoryList = () => {
   const { t } = useTranslation();
+  const [allowed, loading] = useAccessReview(RESOURCE.REPOSITORY, VERB.LIST);
   return (
-    <ListPage title={t('Repositories')}>
-      <RepositoryTable />
-    </ListPage>
+    <PageWithPermissions allowed={allowed} loading={loading}>
+      <ListPage title={t('Repositories')}>
+        <RepositoryTable />
+      </ListPage>
+    </PageWithPermissions>
   );
 };
 

package/src/components/Repository/useRepositories.ts

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { useDebounce } from 'use-debounce';
+
+import { Repository, RepositoryList } from '@flightctl/types';
+
+import { useFetchPeriodically } from '../../hooks/useFetchPeriodically';
+import { PaginationDetails, useTablePagination } from '../../hooks/useTablePagination';
+
+import { PAGE_SIZE } from '../../constants';
+
+type RepositoriesEndpointArgs = {
+  nextContinue?: string;
+};
+
+const getRepositoriesEndpoint = ({ nextContinue }: RepositoriesEndpointArgs) => {
+  const params = new URLSearchParams();
+  if (nextContinue !== undefined) {
+    params.set('limit', `${PAGE_SIZE}`);
+  }
+  if (nextContinue) {
+    params.set('continue', nextContinue);
+  }
+  return `repositories?${params.toString()}`;
+};
+
+export const useRepositoriesEndpoint = (args: RepositoriesEndpointArgs): [string, boolean] => {
+  const endpoint = getRepositoriesEndpoint(args);
+  const [repositoriesEndpointDebounced] = useDebounce(endpoint, 1000);
+  return [repositoriesEndpointDebounced, endpoint !== repositoriesEndpointDebounced];
+};
+
+export const useRepositories = (): [
+  Repository[],
+  boolean,
+  unknown,
+  boolean,
+  VoidFunction,
+  Pick<PaginationDetails, 'currentPage' | 'setCurrentPage' | 'itemCount'>,
+] => {
+  const { currentPage, setCurrentPage, itemCount, nextContinue, onPageFetched } = useTablePagination();
+  const [repoEndpoint, isDebouncing] = useRepositoriesEndpoint({ nextContinue });
+
+  const [repoList, isLoading, error, refetch] = useFetchPeriodically<RepositoryList>(
+    {
+      endpoint: repoEndpoint,
+    },
+    onPageFetched,
+  );
+  const pagination = React.useMemo(
+    () => ({
+      currentPage,
+      setCurrentPage,
+      itemCount,
+    }),
+    [currentPage, setCurrentPage, itemCount],
+  );
+
+  return [repoList?.items || [], isLoading, error, isLoading || isDebouncing, refetch, pagination];
+};