@flightctl/ui-components 0.0.10 → 0.4.0-rc1

package/src/components/Device/MatchPatternsModal/MatchPatternsForm.tsx

@@ -1,92 +0,0 @@
-import * as React from 'react';
-import { Alert, Button, Label, LabelGroup } from '@patternfly/react-core';
-import { useFormikContext } from 'formik';
-
-import ErrorHelperText from '../../form/FieldHelperText';
-import FlightCtlActionGroup from '../../form/FlightCtlActionGroup';
-import FlightCtlForm from '../../form/FlightCtlForm';
-import { useTranslation } from '../../../hooks/useTranslation';
-import EditableLabelControl from '../../common/EditableLabelControl';
-
-export type MatchPatternsFormValues = {
-  matchPatterns: string[];
-};
-
-export type MatchPatternsFormProps = {
-  onClose: (reload?: boolean) => void;
-  error?: string;
-};
-
-const MatchPatternsForm: React.FC<MatchPatternsFormProps> = ({ onClose, error }) => {
-  const { t } = useTranslation();
-  const {
-    values,
-    setFieldValue,
-    submitForm,
-    isSubmitting,
-    errors: formErrors,
-  } = useFormikContext<MatchPatternsFormValues>();
-
-  const onPatternClose = (e: React.MouseEvent<Element, MouseEvent>, index: number) => {
-    const newMatchPatterns = [...values.matchPatterns];
-    newMatchPatterns.splice(index, 1);
-    void setFieldValue('matchPatterns', newMatchPatterns);
-  };
-
-  const onAdd = (text: string) => {
-    const newMatchPatterns = [...values.matchPatterns, text];
-    void setFieldValue('matchPatterns', newMatchPatterns);
-  };
-
-  const onEdit = (index: number, nextText: string) => {
-    const newMatchPatterns = [...values.matchPatterns];
-    newMatchPatterns.splice(index, 1, nextText);
-    void setFieldValue('matchPatterns', newMatchPatterns);
-  };
-
-  const hasFormErrors = !!formErrors.matchPatterns;
-
-  return (
-    <FlightCtlForm>
-      <LabelGroup
-        isEditable
-        addLabelControl={
-          <EditableLabelControl defaultLabel="name.service" addButtonText={t('Add match pattern')} onAddLabel={onAdd} />
-        }
-        numLabels={20}
-        defaultIsOpen
-      >
-        {values.matchPatterns.map((pattern, index) => (
-          <Label
-            key={index}
-            id={`${index}`}
-            onClose={(e) => onPatternClose(e, index)}
-            onEditCancel={(_, prevText) => onEdit(index, prevText)}
-            onEditComplete={(_, newText) => onEdit(index, newText)}
-            isEditable
-          >
-            {pattern}
-          </Label>
-        ))}
-      </LabelGroup>
-      <ErrorHelperText error={formErrors.matchPatterns} />
-      {error && <Alert isInline title={error} variant="danger" />}
-      <FlightCtlActionGroup>
-        <Button
-          key="confirm"
-          variant="primary"
-          onClick={submitForm}
-          isDisabled={isSubmitting || hasFormErrors}
-          isLoading={isSubmitting}
-        >
-          {t('Update match patterns')}
-        </Button>
-        <Button key="cancel" variant="link" onClick={() => onClose()} isDisabled={isSubmitting}>
-          {t('Cancel')}
-        </Button>
-      </FlightCtlActionGroup>
-    </FlightCtlForm>
-  );
-};
-
-export default MatchPatternsForm;

package/src/components/common/HelperTextItems.tsx

@@ -1,25 +0,0 @@
-import * as React from 'react';
-import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
-import { Button } from '@patternfly/react-core';
-
-import { useTranslation } from '../../hooks/useTranslation';
-
-export const KubernetesLabelHelperText = () => {
-  const { t } = useTranslation();
-  return (
-    <>
-      {t('Must be a valid Kubernetes label')}{' '}
-      <Button
-        component="a"
-        variant="link"
-        isInline
-        icon={<ExternalLinkAltIcon />}
-        target="_blank"
-        rel="noopener noreferrer"
-        href="https://kubernetes.io/docs/concepts/overview/working-with-objects/labels/"
-      >
-        {t('Learn more')}
-      </Button>
-    </>
-  );
-};

package/src/hooks/useApiTableSort.ts

@@ -1,49 +0,0 @@
-import * as React from 'react';
-import { ThProps } from '@patternfly/react-table';
-
-import { ApiSortTableColumn } from '../components/Table/Table';
-import { SortOrder } from '@flightctl/types';
-
-const getDefaultSortField = (columns: ApiSortTableColumn[]) => {
-  let defaultSortCol = columns.find((c) => c.defaultSort);
-  if (!defaultSortCol) {
-    defaultSortCol = columns.find((c) => !!c.sortableField);
-  }
-  return defaultSortCol?.sortableField || '';
-};
-
-export const useApiTableSort = (columns: ApiSortTableColumn[]) => {
-  const [activeSortField, setActiveSortField] = React.useState<string>(getDefaultSortField(columns));
-  const [activeSortDirection, setActiveSortDirection] = React.useState<SortOrder>(SortOrder.ASC);
-
-  const getSortParams = React.useCallback(
-    (columnIndex: number): ThProps['sort'] => {
-      const columnData = columns[columnIndex];
-      if (!columnData.sortableField) {
-        return undefined;
-      }
-
-      const activeColumnIndex = columns.findIndex((column) => column.sortableField === activeSortField);
-      return {
-        sortBy: {
-          index: activeColumnIndex === -1 ? 0 : activeColumnIndex,
-          direction: activeSortDirection === SortOrder.ASC ? 'asc' : 'desc',
-          defaultDirection: 'asc',
-        },
-        onSort: (_, index, direction) => {
-          const column = columns[index];
-          setActiveSortField(column.sortableField || '');
-          setActiveSortDirection(direction === 'asc' ? SortOrder.ASC : SortOrder.DESC);
-        },
-        columnIndex,
-      };
-    },
-    [columns, activeSortField, activeSortDirection],
-  );
-
-  return {
-    getSortParams,
-    sortField: activeSortField,
-    direction: activeSortField ? activeSortDirection : '',
-  };
-};

package/src/hooks/useTableSort.ts

@@ -1,42 +0,0 @@
-import { TableColumn } from '../components/Table/Table';
-import { ThProps } from '@patternfly/react-table';
-import * as React from 'react';
-
-const getDefaultIndex = <D>(columns: TableColumn<D>[]) => {
-  const defaultColumnIndex = columns.findIndex((c) => c.defaultSort);
-  return defaultColumnIndex === -1 ? 0 : defaultColumnIndex;
-};
-
-export const useTableSort = <D>(data: D[], columns: TableColumn<D>[]) => {
-  const [activeSortIndex, setActiveSortIndex] = React.useState<number>(getDefaultIndex(columns));
-  const [activeSortDirection, setActiveSortDirection] = React.useState<'asc' | 'desc'>('asc');
-
-  const getSortParams = React.useCallback(
-    (columnIndex: number): ThProps['sort'] =>
-      columns[columnIndex].onSort
-        ? {
-            sortBy: {
-              index: activeSortIndex,
-              direction: activeSortDirection,
-              defaultDirection: 'asc',
-            },
-            onSort: (_, index, direction) => {
-              setActiveSortIndex(index);
-              setActiveSortDirection(direction);
-            },
-            columnIndex,
-          }
-        : undefined,
-    [activeSortIndex, activeSortDirection, columns],
-  );
-
-  const sortedData = React.useMemo(() => {
-    const sorted = columns[activeSortIndex].onSort?.(data);
-    if (activeSortDirection === 'desc') {
-      sorted?.reverse();
-    }
-    return sorted || data;
-  }, [columns, data, activeSortIndex, activeSortDirection]);
-
-  return { getSortParams, sortedData };
-};

package/src/utils/sort/generic.ts

@@ -1,8 +0,0 @@
-import { ObjectMeta } from '@flightctl/types';
-
-export const sortByName = <R extends { metadata: ObjectMeta }>(resources: R[]) =>
-  resources.sort((a, b) => {
-    const aName = a.metadata.name || '-';
-    const bName = b.metadata.name || '-';
-    return aName.localeCompare(bName);
-  });

package/src/utils/sort/repository.ts

@@ -1,28 +0,0 @@
-import { RepoSpecType, Repository } from '@flightctl/types';
-import { getLastTransitionTimeText, getRepositorySyncStatus } from '../status/repository';
-
-export const sortRepositoriesByUrl = (resources: Repository[]) =>
-  resources.sort((a, b) => {
-    const aUrl = a.spec.url || '-';
-    const bUrl = b.spec.url || '-';
-    return aUrl.localeCompare(bUrl);
-  });
-
-export const sortRepositoriesBySyncStatus = (resources: Repository[]) =>
-  resources.sort((a, b) => {
-    const aStatus = getRepositorySyncStatus(a);
-    const bStatus = getRepositorySyncStatus(b);
-    return aStatus.status.localeCompare(bStatus.status);
-  });
-
-export const sortRepositoriesByLastTransition = (resources: Repository[]) =>
-  resources.sort((a, b) => {
-    const aTransition = getLastTransitionTimeText(a).timestamp;
-    const bTransition = getLastTransitionTimeText(b).timestamp;
-    return new Date(bTransition).getTime() - new Date(aTransition).getTime();
-  });
-
-export const sortRepositoriesByType = (resources: Repository[]) =>
-  resources.sort((a, b) => {
-    return (a.spec.type || RepoSpecType.GIT).localeCompare(b.spec.type || RepoSpecType.GIT);
-  });

package/src/utils/sort/resourceSync.ts

@@ -1,30 +0,0 @@
-import { ResourceSync } from '@flightctl/types';
-import { getObservedHash, getRepositorySyncStatus } from '../status/repository';
-
-export const sortResourceSyncsByPath = (resources: ResourceSync[]) =>
-  resources.sort((a, b) => {
-    const aPath = a.spec.path || '-';
-    const bPath = b.spec.path || '-';
-    return aPath.localeCompare(bPath);
-  });
-
-export const sortResourceSyncsByRevision = (resources: ResourceSync[]) =>
-  resources.sort((a, b) => {
-    const aRevision = a.spec.targetRevision || '-';
-    const bRevision = b.spec.targetRevision || '-';
-    return aRevision.localeCompare(bRevision);
-  });
-
-export const sortResourceSyncsByStatus = (resources: ResourceSync[]) =>
-  resources.sort((a, b) => {
-    const aStatus = getRepositorySyncStatus(a);
-    const bStatus = getRepositorySyncStatus(b);
-    return aStatus.status.localeCompare(bStatus.status);
-  });
-
-export const sortResourceSyncsByHash = (resources: ResourceSync[]) =>
-  resources.sort((a, b) => {
-    const aHash = getObservedHash(a) || '-';
-    const bHash = getObservedHash(b) || '-';
-    return aHash.localeCompare(bHash);
-  });