@flightctl/ui-components 0.0.5 → 0.4.0-rc1

package/src/components/ResourceSync/RepositoryResourceSyncList.tsx

@@ -24,14 +24,6 @@ import { useFetch } from '../../hooks/useFetch';
 import { ResourceSync, ResourceSyncList } from '@flightctl/types';
 import { getObservedHash } from '../../utils/status/repository';
 import { useDeleteListAction } from '../ListPage/ListPageActions';
-import { useTableSort } from '../../hooks/useTableSort';
-import { sortByName } from '../../utils/sort/generic';
-import {
-  sortResourceSyncsByHash,
-  sortResourceSyncsByPath,
-  sortResourceSyncsByRevision,
-  sortResourceSyncsByStatus,
-} from '../../utils/sort/resourceSync';
 import Table, { TableColumn } from '../Table/Table';
 import { useTableTextSearch } from '../../hooks/useTableTextSearch';
 import TableTextSearch from '../Table/TableTextSearch';
@@ -43,6 +35,7 @@ import ResourceSyncStatus from './ResourceSyncStatus';
 import { useTranslation } from '../../hooks/useTranslation';
 import { useAppContext } from '../../hooks/useAppContext';
 import { getErrorMessage } from '../../utils/error';
+import { commonQueries } from '../../utils/query';
 
 import {
   SingleResourceSyncValues,
@@ -54,29 +47,26 @@ import FlightCtlActionGroup from '../form/FlightCtlActionGroup';
 import FlightCtlForm from '../form/FlightCtlForm';
 import ResourceListEmptyState from '../common/ResourceListEmptyState';
 import ListPageBody from '../ListPage/ListPageBody';
+import { useAccessReview } from '../../hooks/useAccessReview';
+import { RESOURCE, VERB } from '../../types/rbac';
 
 import './RepositoryResourceSyncList.css';
 
 const getColumns = (t: TFunction): TableColumn<ResourceSync>[] => [
   {
     name: t('Name'),
-    onSort: sortByName,
   },
   {
     name: t('Path'),
-    onSort: sortResourceSyncsByPath,
   },
   {
     name: t('Target revision'),
-    onSort: sortResourceSyncsByRevision,
   },
   {
     name: t('Status'),
-    onSort: sortResourceSyncsByStatus,
   },
   {
     name: t('Observed hash'),
-    onSort: sortResourceSyncsByHash,
   },
 ];
 
@@ -92,7 +82,7 @@ const createRefs = (rsList: ResourceSync[]): { [key: string]: React.RefObject<HT
 
 const getSearchText = (resourceSync: ResourceSync) => [resourceSync.metadata.name];
 
-const ResourceSyncEmptyState = ({ addResourceSync }: { addResourceSync: VoidFunction }) => {
+const ResourceSyncEmptyState = ({ addResourceSync }: { addResourceSync?: VoidFunction }) => {
   const { t } = useTranslation();
   return (
     <ResourceListEmptyState icon={CodeBranchIcon} titleText={t('No resource syncs here!')}>
@@ -101,13 +91,15 @@ const ResourceSyncEmptyState = ({ addResourceSync }: { addResourceSync: VoidFunc
           "A resource sync is an automated Gitops way to manage imported fleets. The resource syncs monitors changes made to the source repository and updates the fleets' configurations accordingly.",
         )}
       </EmptyStateBody>
-      <EmptyStateFooter>
-        <EmptyStateActions>
-          <Button variant="secondary" onClick={addResourceSync}>
-            {t('Add a resource sync')}
-          </Button>
-        </EmptyStateActions>
-      </EmptyStateFooter>
+      {addResourceSync && (
+        <EmptyStateFooter>
+          <EmptyStateActions>
+            <Button variant="secondary" onClick={addResourceSync}>
+              {t('Add a resource sync')}
+            </Button>
+          </EmptyStateActions>
+        </EmptyStateFooter>
+      )}
     </ResourceListEmptyState>
   );
 };
@@ -177,7 +169,7 @@ const CreateResourceSyncModal = ({
 
 const RepositoryResourceSyncList = ({ repositoryId }: { repositoryId: string }) => {
   const [rsList, isLoading, error, refetch] = useFetchPeriodically<ResourceSyncList>({
-    endpoint: `resourcesyncs?repository=${repositoryId}`,
+    endpoint: commonQueries.getResourceSyncsByRepo(repositoryId),
   });
 
   const resourceSyncs = rsList?.items || [];
@@ -203,7 +195,6 @@ const RepositoryResourceSyncList = ({ repositoryId }: { repositoryId: string })
   const { filteredData, search, setSearch } = useTableTextSearch(resourceSyncs, getSearchText);
 
   const columns = React.useMemo(() => getColumns(t), [t]);
-  const { getSortParams, sortedData } = useTableSort(filteredData, columns);
 
   const { onRowSelect, hasSelectedRows, isAllSelected, isRowSelected, setAllSelected } = useTableSelect();
 
@@ -217,6 +208,9 @@ const RepositoryResourceSyncList = ({ repositoryId }: { repositoryId: string })
   const [isMassDeleteModalOpen, setIsMassDeleteModalOpen] = React.useState(false);
   const [isAddRsModalOpen, setIsAddRsModalOpen] = React.useState(false);
 
+  const [canDelete] = useAccessReview(RESOURCE.RESOURCE_SYNC, VERB.DELETE);
+  const [canCreate] = useAccessReview(RESOURCE.RESOURCE_SYNC, VERB.CREATE);
+
   return (
     <ListPageBody error={error} loading={isLoading}>
       <Toolbar id="resource-sync-toolbar" inset={{ default: 'insetNone' }}>
@@ -226,16 +220,18 @@ const RepositoryResourceSyncList = ({ repositoryId }: { repositoryId: string })
               <TableTextSearch value={search} setValue={setSearch} placeholder={t('Search by name')} />
             </ToolbarItem>
           </ToolbarGroup>
-          <ToolbarItem>
-            <TableActions isDisabled={!hasSelectedRows}>
-              <SelectList>
-                <SelectOption onClick={() => setIsMassDeleteModalOpen(true)}>{t('Delete')}</SelectOption>
-              </SelectList>
-            </TableActions>
-          </ToolbarItem>
+          {canDelete && (
+            <ToolbarItem>
+              <TableActions isDisabled={!hasSelectedRows}>
+                <SelectList>
+                  <SelectOption onClick={() => setIsMassDeleteModalOpen(true)}>{t('Delete')}</SelectOption>
+                </SelectList>
+              </TableActions>
+            </ToolbarItem>
+          )}
         </ToolbarContent>
       </Toolbar>
-      {resourceSyncs.length > 0 && (
+      {canCreate && resourceSyncs.length > 0 && (
         <Button
           variant="link"
           icon={<PlusCircleIcon />}
@@ -249,15 +245,15 @@ const RepositoryResourceSyncList = ({ repositoryId }: { repositoryId: string })
       )}
       <Table
         aria-label={t('Resource syncs table')}
+        loading={isLoading}
         isAllSelected={isAllSelected}
         onSelectAll={setAllSelected}
         columns={columns}
         emptyFilters={filteredData.length === 0}
         emptyData={resourceSyncs.length === 0}
-        getSortParams={getSortParams}
       >
         <Tbody>
-          {sortedData.map((resourceSync, rowIndex) => {
+          {filteredData.map((resourceSync, rowIndex) => {
             const rsName = resourceSync.metadata.name as string;
             const rsRef = rsRefs[rsName];
             const isSelected = rsName === selectedRs;
@@ -277,9 +273,11 @@ const RepositoryResourceSyncList = ({ repositoryId }: { repositoryId: string })
                   <ResourceSyncStatus resourceSync={resourceSync} />
                 </Td>
                 <Td dataLabel={t('Observed hash')}>{getObservedHash(resourceSync)}</Td>
-                <Td isActionCell>
-                  <ActionsColumn items={[deleteAction({ resourceId: resourceSync.metadata.name || '' })]} />
-                </Td>
+                {canDelete && (
+                  <Td isActionCell>
+                    <ActionsColumn items={[deleteAction({ resourceId: resourceSync.metadata.name || '' })]} />
+                  </Td>
+                )}
               </Tr>
             );
           })}
@@ -287,16 +285,20 @@ const RepositoryResourceSyncList = ({ repositoryId }: { repositoryId: string })
       </Table>
       {resourceSyncs.length === 0 && (
         <ResourceSyncEmptyState
-          addResourceSync={() => {
-            setIsAddRsModalOpen(true);
-          }}
+          addResourceSync={
+            canCreate
+              ? () => {
+                  setIsAddRsModalOpen(true);
+                }
+              : undefined
+          }
         />
       )}
       {deleteModal}
       {isMassDeleteModalOpen && (
         <MassDeleteResourceSyncModal
           onClose={() => setIsMassDeleteModalOpen(false)}
-          resources={sortedData.filter(isRowSelected)}
+          resources={filteredData.filter(isRowSelected)}
           onDeleteSuccess={() => {
             setIsMassDeleteModalOpen(false);
             refetch();

package/src/components/Table/Table.tsx

@@ -1,9 +1,19 @@
 import * as React from 'react';
-import { Bullseye, PageSection } from '@patternfly/react-core';
+import { Bullseye, PageSection, Spinner } from '@patternfly/react-core';
 import { Table as PFTable, Td, Th, ThProps, Thead, Tr } from '@patternfly/react-table';
 import { useTranslation } from '../../hooks/useTranslation';
 import WithHelperText from '../common/WithHelperText';
 
+export type ApiSortTableColumn = {
+  name: string;
+  sortableField?: string;
+  defaultSort?: boolean;
+  helperText?: string;
+  thProps?: Omit<ThProps, 'sort'> & {
+    ref?: React.Ref<HTMLTableCellElement> | undefined;
+  };
+};
+
 export type TableColumn<D> = {
   name: string;
   onSort?: (data: D[]) => D[];
@@ -17,10 +27,11 @@ export type TableColumn<D> = {
 type TableProps<D> = {
   columns: TableColumn<D>[];
   children: React.ReactNode;
-  emptyFilters: boolean;
-  emptyData: boolean;
+  loading: boolean;
+  emptyFilters?: boolean;
+  emptyData?: boolean;
   'aria-label': string;
-  getSortParams: (columnIndex: number) => ThProps['sort'];
+  // getSortParams: (columnIndex: number) => ThProps['sort'];
   onSelectAll?: (isSelected: boolean) => void;
   isAllSelected?: boolean;
 };
@@ -30,16 +41,18 @@ type TableFC = <D>(props: TableProps<D>) => JSX.Element;
 const Table: TableFC = ({
   columns,
   children,
+  loading,
   emptyFilters,
   emptyData,
-  getSortParams,
   onSelectAll,
   isAllSelected,
   ...rest
 }) => {
   const { t } = useTranslation();
-  if (emptyFilters && !emptyData) {
-    return (
+  if (emptyData && !emptyFilters) {
+    return loading ? (
+      <Spinner size="md" />
+    ) : (
       <PageSection variant="light">
         <Bullseye>{t('No resources are matching the current filters.')}</Bullseye>
       </PageSection>
@@ -58,8 +71,8 @@ const Table: TableFC = ({
               }}
             />
           )}
-          {columns.map((c, index) => (
-            <Th key={c.name} sort={getSortParams(index)} {...c.thProps}>
+          {columns.map((c) => (
+            <Th key={c.name} {...c.thProps}>
               {c.helperText ? (
                 <WithHelperText ariaLabel={c.name} showLabel content={c.helperText} triggerAction="hover" />
               ) : (

package/src/components/Table/TablePagination.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import { Trans } from 'react-i18next';
+import { Pagination, PaginationVariant, Spinner } from '@patternfly/react-core';
+
+import { PAGE_SIZE } from '../../constants';
+import { PaginationDetails } from '../../hooks/useTablePagination';
+import { useTranslation } from '../../hooks/useTranslation';
+
+const PaginationTemplate = ({
+  currentPage,
+  itemCount,
+  isUpdating,
+}: {
+  currentPage: number;
+  itemCount: number;
+  isUpdating: boolean;
+}) => {
+  const { t } = useTranslation();
+  const totalPages = String(Math.ceil((itemCount || 0) / PAGE_SIZE));
+
+  const pageNum = `${currentPage}`;
+  return (
+    <>
+      {isUpdating && <Spinner size="sm" />}{' '}
+      <Trans t={t}>
+        {pageNum} of <strong>{totalPages}</strong>
+      </Trans>
+    </>
+  );
+};
+
+const TablePagination = ({
+  isUpdating,
+  pagination,
+}: {
+  pagination: Pick<PaginationDetails, 'currentPage' | 'setCurrentPage' | 'itemCount'>;
+  isUpdating: boolean;
+}) => {
+  const { t } = useTranslation();
+  const { itemCount, currentPage, setCurrentPage } = pagination;
+
+  const [prevCount, setPrevCount] = React.useState<number>(0);
+  const [prevCurrentPage, setPrevCurrentPage] = React.useState<number>(0);
+
+  React.useEffect(() => {
+    if (!isUpdating) {
+      setPrevCount(itemCount || 0);
+      setPrevCurrentPage(currentPage);
+    }
+  }, [isUpdating, itemCount, currentPage]);
+
+  const onSetPage = (_event: React.MouseEvent | React.KeyboardEvent | MouseEvent, newPage: number) => {
+    setCurrentPage(newPage);
+  };
+
+  return (
+    <Pagination
+      isDisabled={isUpdating}
+      widgetId="table-pagination"
+      isCompact
+      variant={PaginationVariant.top}
+      toggleTemplate={() => (
+        <PaginationTemplate isUpdating={isUpdating} itemCount={prevCount} currentPage={currentPage} />
+      )}
+      itemCount={prevCount}
+      perPage={PAGE_SIZE}
+      page={prevCurrentPage}
+      perPageOptions={[{ title: t(`{{ numberOfItems }} items`, { numberOfItems: PAGE_SIZE }), value: PAGE_SIZE }]}
+      onSetPage={onSetPage}
+    />
+  );
+};
+
+export default TablePagination;

package/src/components/Terminal/Terminal.tsx

@@ -13,6 +13,7 @@ const terminalOptions: ITerminalOptions & ITerminalInitOnlyOptions = {
   cursorBlink: false,
   cols: 80,
   rows: 25,
+  convertEol: true,
 };
 
 type TerminalProps = {

package/src/components/charts/DonutChart.css

@@ -3,6 +3,11 @@
     justify-content: center;
 }
 
+.fctl-charts__donut-container {
+    width: 100%;
+    height: 100%;
+}
+
 .fctl-charts__title {
     height: 100%;
     color: var(--pf-v5-global--Color--200);

package/src/components/charts/DonutChart.tsx

@@ -75,7 +75,7 @@ const DonutChart = ({ data, title, helperText }: { data: Data[]; title: string;
     >
       <FlexItem className="fctl-charts__donut">
         <div style={{ height: '230px', width: '230px' }}>
-          <ChartContainer>
+          <ChartContainer className="fctl-charts__donut-container">
             <foreignObject x="0" y="0" width="230px" height="230px">
               <Flex
                 alignItems={{ default: 'alignItemsCenter' }}

package/src/components/common/AccessDenied.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { useTranslation } from '../../hooks/useTranslation';
+import { EmptyState, EmptyStateBody, EmptyStateHeader, PageSection } from '@patternfly/react-core';
+
+const AccessDenied = () => {
+  const { t } = useTranslation();
+  return (
+    <PageSection variant="light">
+      <EmptyState>
+        <EmptyStateHeader titleText={t('Restricted Access')} headingLevel="h4" />
+        <EmptyStateBody>{t("You don't have access to this section.")}</EmptyStateBody>
+      </EmptyState>
+    </PageSection>
+  );
+};
+
+export default AccessDenied;

package/src/components/common/ButtonWithPermissions.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { Button, ButtonProps } from '@patternfly/react-core';
+import { AccessReviewResult } from '../../hooks/useAccessReview';
+
+const ButtonWithPermissions = ({
+  permissions,
+  children,
+  ...rest
+}: ButtonProps & { permissions: AccessReviewResult }) => {
+  const [allowed] = permissions;
+  return allowed && <Button {...rest}>{children}</Button>;
+};
+
+export default ButtonWithPermissions;

package/src/components/common/LearnMoreLink.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+
+import { Button } from '@patternfly/react-core';
+import ExternalLinkAltIcon from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
+
+import { useTranslation } from '../../hooks/useTranslation';
+
+const LearnMoreLink = ({ text, link }: { text?: string; link: string }) => {
+  const { t } = useTranslation();
+  return (
+    <Button
+      component="a"
+      variant="link"
+      isInline
+      iconPosition="end"
+      icon={<ExternalLinkAltIcon />}
+      target="_blank"
+      rel="noopener noreferrer"
+      href={link}
+    >
+      {text || t('Learn more')}
+    </Button>
+  );
+};
+
+export default LearnMoreLink;

package/src/components/common/PageWithPermissions.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { Spinner } from '@patternfly/react-core';
+import AccessDenied from './AccessDenied';
+
+const PageWithPermissions = ({
+  children,
+  loading,
+  allowed,
+}: React.PropsWithChildren<{ loading: boolean; allowed: boolean }>) => {
+  if (loading) {
+    return <Spinner size="lg" />;
+  }
+  if (!allowed) {
+    return <AccessDenied />;
+  }
+  return children;
+};
+
+export default PageWithPermissions;

package/src/components/form/FilterSelect.tsx

@@ -18,7 +18,7 @@ type FilterSelectGroupProps = React.PropsWithChildren<{
   label: string;
 }>;
 
-export const FilterSelectGroup: React.FC<FilterSelectGroupProps> = ({ label, children }) => (
+export const FilterSelectGroup = ({ label, children }: FilterSelectGroupProps) => (
   <SelectGroup label={label}>
     <div className="fctl-filter-select__group">{children}</div>
   </SelectGroup>
@@ -26,13 +26,11 @@ export const FilterSelectGroup: React.FC<FilterSelectGroupProps> = ({ label, chi
 
 type FilterSelectProps = React.PropsWithChildren<{
   placeholder: string;
-  filter: string;
-  setFilter: (filter: string) => void;
   selectedFilters: number;
   isFilterUpdating: boolean;
 }>;
 
-const FilterSelect: React.FC<FilterSelectProps> = ({ placeholder, selectedFilters, isFilterUpdating, children }) => {
+const FilterSelect = ({ placeholder, selectedFilters, isFilterUpdating, children }: FilterSelectProps) => {
   const [isExpanded, setIsExpanded] = React.useState(false);
   const textInputRef = React.useRef<HTMLInputElement>();
   const toggleExpand = () => {

package/src/components/form/FlightCtlForm.css

@@ -0,0 +1,3 @@
+.fctl-form {
+    padding-bottom: var(--pf-v5-global--spacer--md)
+}

package/src/components/form/FlightCtlForm.tsx

@@ -2,10 +2,12 @@ import * as React from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { Form } from '@patternfly/react-core';
 
+import './FlightCtlForm.css';
+
 const FlightCtlForm = ({ className, children }: React.PropsWithChildren<{ className?: string }>) => {
   return (
     <Form
-      className={className}
+      className={className ? `fctl-form ${className}` : 'fctl-form'}
       onSubmit={(ev) => {
         ev.preventDefault();
       }}

package/src/components/form/FormSelect.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { FormGroup, MenuToggle, Select, SelectList, SelectOption } from '@patternfly/react-core';
+import { FormGroup, MenuToggle, MenuToggleStatus, Select, SelectList, SelectOption } from '@patternfly/react-core';
 import { useField } from 'formik';
 import ErrorHelperText, { DefaultHelperText } from './FieldHelperText';
 
@@ -14,13 +14,21 @@ type FormSelectProps = {
   helperText?: React.ReactNode;
   children?: React.ReactNode;
   placeholderText?: string;
+  withStatusIcon?: boolean;
 };
 
 const isItemObject = (item: string | SelectItem): item is SelectItem => typeof item === 'object';
 
 const getItemLabel = (item: string | SelectItem) => (isItemObject(item) ? item.label : item);
 
-const FormSelect: React.FC<FormSelectProps> = ({ name, items, helperText, placeholderText, children }) => {
+const FormSelect: React.FC<FormSelectProps> = ({
+  name,
+  items,
+  withStatusIcon,
+  helperText,
+  placeholderText,
+  children,
+}) => {
   const [isOpen, setIsOpen] = React.useState(false);
   const [field, meta, { setValue, setTouched }] = useField<string>({
     name: name,
@@ -38,6 +46,17 @@ const FormSelect: React.FC<FormSelectProps> = ({ name, items, helperText, placeh
 
   const selectedText = field.value ? getItemLabel(items[field.value]) : placeholderText;
 
+  let statusToggle: MenuToggleStatus;
+  if (withStatusIcon) {
+    if (field.value) {
+      statusToggle = MenuToggleStatus.success;
+    } else if (meta.touched) {
+      statusToggle = MenuToggleStatus.danger;
+    } else {
+      statusToggle = MenuToggleStatus.warning;
+    }
+  }
+
   return (
     <FormGroup id={`form-control__${fieldId}`} fieldId={fieldId}>
       <Select
@@ -49,6 +68,7 @@ const FormSelect: React.FC<FormSelectProps> = ({ name, items, helperText, placeh
         }}
         toggle={(toggleRef) => (
           <MenuToggle
+            status={statusToggle}
             ref={toggleRef}
             onClick={() => {
               if (isOpen && !meta.touched) {

package/src/components/form/LabelsField.tsx

@@ -8,10 +8,11 @@ import ErrorHelperText, { DefaultHelperText } from './FieldHelperText';
 
 type LabelsFieldProps = {
   name: string;
-  isFormEditable?: boolean;
+  isLoading?: boolean;
   addButtonText?: string;
   helperText?: React.ReactNode;
   onChangeCallback?: (newLabels: FlightCtlLabel[], hasErrors: boolean) => void;
+  canEdit?: boolean;
 };
 
 const maxWidthDefaultLabel = '18ch'; // Can fit more chars as it doesn't have a "Close" button
@@ -22,7 +23,8 @@ const LabelsField: React.FC<LabelsFieldProps> = ({
   onChangeCallback,
   addButtonText,
   helperText,
-  isFormEditable = true,
+  isLoading,
+  canEdit = true,
 }) => {
   const [{ value: labels }, meta, { setValue: setLabels }] = useField<FlightCtlLabel[]>(name);
   const updateLabels = async (newLabels: FlightCtlLabel[]) => {
@@ -33,7 +35,7 @@ const LabelsField: React.FC<LabelsFieldProps> = ({
   };
 
   const onDelete = async (_ev: React.MouseEvent<Element, MouseEvent>, index: number) => {
-    if (!isFormEditable) {
+    if (isLoading) {
       return;
     }
     const newLabels = [...labels];
@@ -67,14 +69,16 @@ const LabelsField: React.FC<LabelsFieldProps> = ({
     <>
       <LabelGroup
         numLabels={5}
-        isEditable={isFormEditable}
+        isEditable={!isLoading}
         addLabelControl={
-          <EditableLabelControl
-            defaultLabel="key=value"
-            addButtonText={addButtonText}
-            onAddLabel={onAdd}
-            isEditable={isFormEditable}
-          />
+          canEdit && (
+            <EditableLabelControl
+              defaultLabel="key=value"
+              addButtonText={addButtonText}
+              onAddLabel={onAdd}
+              isEditable={!isLoading}
+            />
+          )
         }
       >
         {labels.map(({ key, value, isDefault }, index) => {
@@ -88,14 +92,14 @@ const LabelsField: React.FC<LabelsFieldProps> = ({
             );
           }
 
-          const closeButtonProps = !isFormEditable && { isDisabled: true };
-          const isLabelEditable = isFormEditable && !isDefault;
+          const closeButtonProps = isLoading && { isDisabled: true };
+          const isLabelEditable = !isLoading && !isDefault && canEdit;
           return (
             <Label
               key={elKey}
               textMaxWidth={maxWidthNonDefaultLabel}
               closeBtnProps={closeButtonProps}
-              onClose={(e) => onDelete(e, index)}
+              onClose={canEdit ? (e) => onDelete(e, index) : undefined}
               onEditCancel={(_, prevText) => onEdit(index, prevText)}
               onEditComplete={(_, newText) => onEdit(index, newText)}
               /* Add a basic tooltip as the PF tooltip doesn't work for editable labels */