@flightctl/ui-components 0.0.4 → 0.0.10

package/src/components/modals/DeleteModal/DeleteModal.tsx

@@ -0,0 +1,68 @@
+import { getErrorMessage } from '../../../utils/error';
+import { Alert, Button, Modal, Stack, StackItem } from '@patternfly/react-core';
+import * as React from 'react';
+import { Trans } from 'react-i18next';
+import { useTranslation } from '../../../hooks/useTranslation';
+
+type DeleteModalProps = {
+  onDelete: () => Promise<unknown>;
+  onClose: VoidFunction;
+  resourceType: string;
+  resourceName: string;
+};
+
+const DeleteModal: React.FC<DeleteModalProps> = ({ onDelete, onClose, resourceType, resourceName }) => {
+  const { t } = useTranslation();
+  const [isDeleting, setIsDeleting] = React.useState(false);
+  const [error, setError] = React.useState<string>();
+  return (
+    <Modal
+      title={t('Delete {{resourceType}} ?', { resourceType })}
+      isOpen
+      onClose={onClose}
+      variant="small"
+      titleIconVariant="warning"
+      actions={[
+        <Button
+          key="confirm"
+          variant="danger"
+          isDisabled={isDeleting}
+          isLoading={isDeleting}
+          onClick={async () => {
+            setError(undefined);
+            try {
+              setIsDeleting(true);
+              await onDelete();
+            } catch (err) {
+              setError(getErrorMessage(err));
+            } finally {
+              setIsDeleting(false);
+            }
+          }}
+        >
+          {t('Delete {{ resourceType }}', { resourceType })}
+        </Button>,
+        <Button key="cancel" variant="link" onClick={onClose} isDisabled={isDeleting}>
+          {t('Cancel')}
+        </Button>,
+      ]}
+    >
+      <Stack hasGutter>
+        <StackItem>
+          <Trans t={t}>
+            Are you sure you want to delete {resourceType} <b>{resourceName}</b>?
+          </Trans>
+        </StackItem>
+        {error && (
+          <StackItem>
+            <Alert isInline variant="danger" title={t('An error occurred')}>
+              {error}
+            </Alert>
+          </StackItem>
+        )}
+      </Stack>
+    </Modal>
+  );
+};
+
+export default DeleteModal;

package/src/components/modals/EditLabelsModal/EditLabelsForm.tsx

@@ -0,0 +1,101 @@
+import * as React from 'react';
+import { Formik, FormikProps } from 'formik';
+import { Alert } from '@patternfly/react-core';
+import { TFunction } from 'i18next';
+import * as Yup from 'yup';
+import debounce from 'lodash/debounce';
+
+import { Device } from '@flightctl/types';
+import LabelsField from '../../form/LabelsField';
+import FlightCtlForm from '../../form/FlightCtlForm';
+import { FlightCtlLabel } from '../../../types/extraTypes';
+import { useFetch } from '../../../hooks/useFetch';
+import { useTranslation } from '../../../hooks/useTranslation';
+import { fromAPILabel } from '../../../utils/labels';
+import { validLabelsSchema } from '../../form/validations';
+import { getErrorMessage } from '../../../utils/error';
+import { getLabelPatches } from '../../../utils/patch';
+
+type EditLabelsFormValues = {
+  labels: FlightCtlLabel[];
+};
+
+type EditLabelsFormContentProps = {
+  isSubmitting: FormikProps<EditLabelsFormValues>['isSubmitting'];
+  submitForm: (values: EditLabelsFormValues) => Promise<string>;
+};
+
+const getValidationSchema = (t: TFunction) => {
+  return Yup.object<EditLabelsFormValues>({
+    labels: validLabelsSchema(t),
+  });
+};
+
+const delayResponse = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
+
+const EditLabelsFormContent = ({ isSubmitting, submitForm }: EditLabelsFormContentProps) => {
+  const { t } = useTranslation();
+  const [submitError, setSubmitError] = React.useState<string>();
+
+  const onChangedLabels = async (newLabels: FlightCtlLabel[], hasErrors: boolean) => {
+    setSubmitError(undefined);
+    if (!hasErrors) {
+      const error = await submitForm({ labels: newLabels });
+      setSubmitError(error);
+    }
+  };
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const debouncedSubmit = React.useCallback(debounce(onChangedLabels, 2000), []);
+
+  return (
+    <FlightCtlForm>
+      <LabelsField
+        name="labels"
+        addButtonText={isSubmitting ? t('Saving...') : undefined}
+        isFormEditable={!isSubmitting}
+        onChangeCallback={debouncedSubmit}
+      />
+      {submitError && <Alert isInline title={submitError} variant="danger" />}
+    </FlightCtlForm>
+  );
+};
+
+type EditLabelsFormProps = {
+  device: Device;
+  onDeviceUpdate: () => void;
+};
+
+const EditLabelsForm = ({ device, onDeviceUpdate }: EditLabelsFormProps) => {
+  const { t } = useTranslation();
+  const { patch } = useFetch();
+
+  const currentLabels = device.metadata.labels || {};
+
+  return (
+    <Formik<EditLabelsFormValues>
+      initialValues={{
+        labels: fromAPILabel(currentLabels),
+      }}
+      onSubmit={async (values: EditLabelsFormValues) => {
+        try {
+          const labelsPatch = getLabelPatches('/metadata/labels', currentLabels, values.labels);
+          if (labelsPatch.length > 0) {
+            await patch(`devices/${device.metadata.name}`, labelsPatch);
+            // The API call is "too" quick, allow the "Saving" button to be briefly seen
+            await delayResponse(150);
+            onDeviceUpdate();
+          }
+          return null;
+        } catch (e) {
+          return getErrorMessage(e);
+        }
+      }}
+      validationSchema={getValidationSchema(t)}
+    >
+      {({ isSubmitting, submitForm }) => <EditLabelsFormContent isSubmitting={isSubmitting} submitForm={submitForm} />}
+    </Formik>
+  );
+};
+
+export default EditLabelsForm;

package/src/components/modals/massModals/MassApproveDeviceModal/MassApproveDeviceModal.css

@@ -0,0 +1,4 @@
+.fctl-mass-approve__table {
+    max-height: 20rem;
+    overflow: auto;
+}

package/src/components/modals/massModals/MassApproveDeviceModal/MassApproveDeviceModal.tsx

@@ -0,0 +1,192 @@
+import * as React from 'react';
+import { EnrollmentRequest, EnrollmentRequestApproval } from '@flightctl/types';
+import {
+  Alert,
+  Button,
+  FormGroup,
+  Modal,
+  Progress,
+  ProgressMeasureLocation,
+  Stack,
+  StackItem,
+} from '@patternfly/react-core';
+import { Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
+import { Formik } from 'formik';
+
+import TextField from '../../../form/TextField';
+import LabelsField from '../../../form/LabelsField';
+import FlightCtlForm from '../../../form/FlightCtlForm';
+import { deviceApprovalValidationSchema } from '../../../form/validations';
+import ResourceLink from '../../../common/ResourceLink';
+import { isPromiseRejected } from '../../../../types/typeUtils';
+import { getErrorMessage } from '../../../../utils/error';
+import { useAppContext } from '../../../../hooks/useAppContext';
+import { useTranslation } from '../../../../hooks/useTranslation';
+import { toAPILabel } from '../../../../utils/labels';
+
+import './MassApproveDeviceModal.css';
+
+const templateToName = (index: number, nameTemplate: string) =>
+  nameTemplate ? nameTemplate.replace(/{{n+}}/g, `${index + 1}`) : '';
+
+type MassApproveDeviceFormValues = {
+  labels: { key: string; value: string }[];
+  deviceAlias: string;
+};
+type MassApproveDeviceModalProps = {
+  onClose: VoidFunction;
+  pendingEnrollments: Array<EnrollmentRequest>;
+  onApproveSuccess: VoidFunction;
+};
+
+const MassApproveDeviceModal: React.FC<MassApproveDeviceModalProps> = ({
+  onClose,
+  onApproveSuccess,
+  pendingEnrollments,
+}) => {
+  const { t } = useTranslation();
+  const [progress, setProgress] = React.useState(0);
+  const [totalProgress, setTotalProgress] = React.useState(0);
+  const [errors, setErrors] = React.useState<string[]>();
+  const {
+    user,
+    fetch: { post },
+  } = useAppContext();
+
+  const approveEnrollments = async (values: MassApproveDeviceFormValues) => {
+    setProgress(0);
+    setErrors(undefined);
+    const promises = pendingEnrollments.map(async (r, index) => {
+      const labels = toAPILabel(values.labels);
+      const aliasLabel = templateToName(index, values.deviceAlias);
+      if (aliasLabel) {
+        labels.alias = aliasLabel;
+      }
+
+      await post<EnrollmentRequestApproval>(`enrollmentrequests/${r.metadata.name}/approval`, {
+        approved: true,
+        labels,
+        approvedBy: user,
+      });
+      setProgress((p) => p + 1);
+    });
+    setTotalProgress(promises.length);
+    const results = await Promise.allSettled(promises);
+    const rejectedResults = results.filter(isPromiseRejected);
+
+    if (rejectedResults.length) {
+      setErrors(rejectedResults.map((r) => getErrorMessage(r.reason)));
+    } else {
+      onApproveSuccess();
+    }
+  };
+
+  return (
+    <Formik<MassApproveDeviceFormValues>
+      initialValues={{
+        labels: [],
+        deviceAlias: '',
+      }}
+      validationSchema={deviceApprovalValidationSchema(t, { isSingleDevice: false })}
+      onSubmit={approveEnrollments}
+    >
+      {({ isSubmitting, values, submitForm, isValid }) => (
+        <Modal
+          title={t('Approve pending devices')}
+          isOpen
+          onClose={onClose}
+          showClose={!isSubmitting}
+          variant="medium"
+          actions={[
+            <Button
+              key="approve"
+              variant="primary"
+              onClick={submitForm}
+              isLoading={isSubmitting}
+              isDisabled={isSubmitting || !isValid}
+            >
+              {t('Approve')}
+            </Button>,
+            <Button key="cancel" variant="link" onClick={onClose} isDisabled={isSubmitting}>
+              {t('Cancel')}
+            </Button>,
+          ]}
+        >
+          <Stack hasGutter>
+            <StackItem>
+              {t(
+                'Make sure you recognise and expect the following devices before approving them. Are you sure you want to approve the listed devices?',
+              )}
+            </StackItem>
+            <StackItem className="fctl-mass-approve__table">
+              <Table>
+                <Thead>
+                  <Tr>
+                    <Th width={60}>{t('Name')}</Th>
+                    <Th width={40}>{t('Alias')}</Th>
+                  </Tr>
+                </Thead>
+                <Tbody>
+                  {pendingEnrollments.map((pendingEr, index) => (
+                    <Tr key={pendingEr.metadata.name}>
+                      <Td dataLabel={t('Name')}>
+                        <ResourceLink id={pendingEr.metadata.name as string} />
+                      </Td>
+                      <Td dataLabel={t('Alias')}>{templateToName(index, values.deviceAlias)}</Td>
+                    </Tr>
+                  ))}
+                </Tbody>
+              </Table>
+            </StackItem>
+            <StackItem>
+              <FlightCtlForm>
+                <FormGroup label={t('Labels')}>
+                  <LabelsField name="labels" />
+                </FormGroup>
+                <FormGroup label={t('Alias')}>
+                  <TextField
+                    name="deviceAlias"
+                    aria-label={t('Alias')}
+                    placeholder="device-{{n}}"
+                    helperText={
+                      <>
+                        {t('Alias devices using a custom template. Add a number using')}
+                        <strong> {`{{n}}`}</strong>
+                      </>
+                    }
+                  />
+                </FormGroup>
+              </FlightCtlForm>
+            </StackItem>
+            {isSubmitting && (
+              <StackItem>
+                <Progress
+                  value={progress}
+                  min={0}
+                  max={totalProgress}
+                  title={t('Approving...')}
+                  measureLocation={ProgressMeasureLocation.top}
+                  label={t('{{progress}} of {{totalProgress}}', { progress, totalProgress })}
+                  valueText={t('{{progress}} of {{totalProgress}}', { progress, totalProgress })}
+                />
+              </StackItem>
+            )}
+            {errors?.length && (
+              <StackItem>
+                <Alert isInline variant="danger" title={t('An error occurred')}>
+                  <Stack hasGutter>
+                    {errors.map((e, index) => (
+                      <StackItem key={index}>{e}</StackItem>
+                    ))}
+                  </Stack>
+                </Alert>
+              </StackItem>
+            )}
+          </Stack>
+        </Modal>
+      )}
+    </Formik>
+  );
+};
+
+export default MassApproveDeviceModal;

package/src/components/modals/massModals/MassDeleteDeviceModal/MassDeleteDeviceModal.tsx

@@ -0,0 +1,117 @@
+import * as React from 'react';
+import { Alert, Button, Modal, Progress, ProgressMeasureLocation, Stack, StackItem } from '@patternfly/react-core';
+import { Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
+
+import { Device, EnrollmentRequest } from '@flightctl/types';
+import { isEnrollmentRequest } from '../../../../types/extraTypes';
+
+import { getErrorMessage } from '../../../../utils/error';
+import { useFetch } from '../../../../hooks/useFetch';
+import { useTranslation } from '../../../../hooks/useTranslation';
+import { isPromiseRejected } from '../../../../types/typeUtils';
+import ResourceLink from '../../../common/ResourceLink';
+
+type MassDeleteDeviceModalProps = {
+  onClose: VoidFunction;
+  resources: Array<Device | EnrollmentRequest>;
+  onDeleteSuccess: VoidFunction;
+};
+
+const MassDeleteDeviceModal: React.FC<MassDeleteDeviceModalProps> = ({ onClose, resources, onDeleteSuccess }) => {
+  const { t } = useTranslation();
+  const [progress, setProgress] = React.useState(0);
+  const [totalProgress, setTotalProgress] = React.useState(0);
+  const [isDeleting, setIsDeleting] = React.useState(false);
+  const [errors, setErrors] = React.useState<string[]>();
+  const { remove } = useFetch();
+
+  const deleteResources = async () => {
+    setProgress(0);
+    setIsDeleting(true);
+    const promises = resources.map(async (r) => {
+      await remove(`${isEnrollmentRequest(r) ? 'enrollmentrequests' : 'devices'}/${r.metadata.name}`);
+      setProgress((p) => p + 1);
+    });
+    setTotalProgress(promises.length);
+    const results = await Promise.allSettled(promises);
+    setIsDeleting(false);
+
+    const rejectedResults = results.filter(isPromiseRejected);
+
+    if (rejectedResults.length) {
+      setErrors(rejectedResults.map((r) => getErrorMessage(r.reason)));
+    } else {
+      onDeleteSuccess();
+    }
+  };
+  return (
+    <Modal
+      title={t('Delete devices ?')}
+      isOpen
+      onClose={onClose}
+      showClose={!isDeleting}
+      titleIconVariant="warning"
+      variant="medium"
+      actions={[
+        <Button key="delete" variant="danger" onClick={deleteResources} isLoading={isDeleting} isDisabled={isDeleting}>
+          {t('Delete devices')}
+        </Button>,
+        <Button key="cancel" variant="link" onClick={onClose} isDisabled={isDeleting}>
+          {t('Cancel')}
+        </Button>,
+      ]}
+    >
+      <Stack hasGutter>
+        <StackItem>{t('Are you sure you want to delete the following devices ?')}</StackItem>
+        <StackItem>
+          <Table>
+            <Thead>
+              <Tr>
+                <Th>{t('Name')}</Th>
+                <Th>{t('Alias')}</Th>
+              </Tr>
+            </Thead>
+            <Tbody>
+              {resources.map((resource) => {
+                return (
+                  <Tr key={resource.metadata.name}>
+                    <Td dataLabel={t('Name')}>
+                      <ResourceLink id={resource.metadata.name as string} />
+                    </Td>
+                    <Td dataLabel={t('Alias')}>{resource.metadata.labels?.alias || '-'}</Td>
+                  </Tr>
+                );
+              })}
+            </Tbody>
+          </Table>
+        </StackItem>
+        {isDeleting && (
+          <StackItem>
+            <Progress
+              value={progress}
+              min={0}
+              max={totalProgress}
+              title={t('Deleting...')}
+              measureLocation={ProgressMeasureLocation.top}
+              label={t('{{progress}} of {{totalProgress}}', { progress, totalProgress })}
+              valueText={t('{{progress}} of {{totalProgress}}', { progress, totalProgress })}
+            />
+          </StackItem>
+        )}
+        {errors?.length && (
+          <StackItem>
+            <Alert isInline variant="danger" title={t('An error occurred')}>
+              <Stack hasGutter>
+                {errors.map((e, index) => (
+                  <StackItem key={index}>{e}</StackItem>
+                ))}
+              </Stack>
+            </Alert>
+          </StackItem>
+        )}
+      </Stack>
+    </Modal>
+  );
+};
+
+export default MassDeleteDeviceModal;

package/src/components/modals/massModals/MassDeleteFleetModal/MassDeleteFleetModal.tsx

@@ -0,0 +1,193 @@
+import * as React from 'react';
+import {
+  Alert,
+  Button,
+  ExpandableSection,
+  Modal,
+  Progress,
+  ProgressMeasureLocation,
+  Stack,
+  StackItem,
+} from '@patternfly/react-core';
+import { Fleet } from '@flightctl/types';
+import { Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
+
+import { getErrorMessage } from '../../../../utils/error';
+import { useFetch } from '../../../../hooks/useFetch';
+import FleetOwnerLink from '../../../Fleet/FleetDetails/FleetOwnerLink';
+import { useTranslation } from '../../../../hooks/useTranslation';
+import { isPromiseRejected } from '../../../../types/typeUtils';
+
+type MassDeleteFleetModalProps = {
+  onClose: VoidFunction;
+  fleets: Array<Fleet>;
+  onDeleteSuccess: VoidFunction;
+};
+
+const MassDeleteFleetTable = ({ fleets }: { fleets: Array<Fleet> }) => {
+  const { t } = useTranslation();
+  return (
+    <Table>
+      <Thead>
+        <Tr>
+          <Th>{t('Name')}</Th>
+          <Th>{t('Managed by')}</Th>
+        </Tr>
+      </Thead>
+      <Tbody>
+        {fleets.map((fleet) => {
+          const name = fleet.metadata.name as string;
+          return (
+            <Tr key={name}>
+              <Td dataLabel={t('Name')}>{name}</Td>
+              <Td dataLabel={t('Managed by')}>
+                <FleetOwnerLink owner={fleet.metadata.owner} />
+              </Td>
+            </Tr>
+          );
+        })}
+      </Tbody>
+    </Table>
+  );
+};
+
+const MassDeleteFleetModal: React.FC<MassDeleteFleetModalProps> = ({ onClose, fleets, onDeleteSuccess }) => {
+  const { t } = useTranslation();
+  const [progress, setProgress] = React.useState(0);
+  const [progressTotal, setProgressTotal] = React.useState(0);
+  const [isDeleting, setIsDeleting] = React.useState(false);
+  const [errors, setErrors] = React.useState<string[]>();
+  const { remove } = useFetch();
+
+  const fleetsToDelete = fleets.filter((r) => !r.metadata.owner);
+  const fleetsToSkip = fleets.filter((r) => r.metadata.owner);
+
+  const deleteFleets = async () => {
+    setProgress(0);
+    setIsDeleting(true);
+    const promises = fleetsToDelete.map(async (r) => {
+      await remove(`fleets/${r.metadata.name}`);
+      setProgress((p) => p + 1);
+    });
+
+    setProgressTotal(promises.length);
+    const results = await Promise.allSettled(promises);
+    setIsDeleting(false);
+
+    const rejectedResults = results.filter(isPromiseRejected);
+
+    if (rejectedResults.length) {
+      setErrors(rejectedResults.map((r) => getErrorMessage(r.reason)));
+    } else {
+      onDeleteSuccess();
+    }
+  };
+
+  if (fleetsToDelete.length === 0) {
+    return (
+      <Modal
+        title={t('Delete fleets')}
+        isOpen
+        onClose={onClose}
+        showClose
+        variant="medium"
+        actions={[
+          <Button key="close" variant="primary" onClick={onClose}>
+            {t('Close')}
+          </Button>,
+        ]}
+      >
+        <Stack hasGutter>
+          <StackItem>
+            <Alert
+              variant="info"
+              isInline
+              title={t(
+                'All the fleets you selected are managed by a resource sync and cannot be deleted. You can remove each fleet individually. Alternatively, to delete multiple fleets, first delete the resource syncs from the related repositories inside the "Repositories" tab.',
+              )}
+            />
+          </StackItem>
+          <StackItem>
+            <MassDeleteFleetTable fleets={fleets} />
+          </StackItem>
+        </Stack>
+      </Modal>
+    );
+  }
+
+  return (
+    <Modal
+      title={t('Delete fleets ?')}
+      isOpen
+      onClose={onClose}
+      showClose={!isDeleting}
+      variant="medium"
+      titleIconVariant="warning"
+      actions={[
+        <Button key="delete" variant="danger" onClick={deleteFleets} isLoading={isDeleting} isDisabled={isDeleting}>
+          {t('Delete fleets')}
+        </Button>,
+        <Button key="cancel" variant="link" onClick={onClose} isDisabled={isDeleting}>
+          {t('Cancel')}
+        </Button>,
+      ]}
+    >
+      <Stack hasGutter>
+        <StackItem>
+          {t(
+            'The following fleets will be deleted and as a result, the devices managed by them will be left unmanaged. Are you sure you want to delete the listed fleets?',
+          )}
+        </StackItem>
+        <StackItem>
+          <MassDeleteFleetTable fleets={fleetsToDelete} />
+        </StackItem>
+
+        {fleetsToSkip.length > 0 && (
+          <>
+            <StackItem>
+              <Alert
+                variant="info"
+                isInline
+                title={t(
+                  `Some fleets you selected are managed by a resource sync and cannot be deleted. To remove those fleets, delete the resource syncs from the related repositories inside the "Repositories" tab.`,
+                )}
+              />
+            </StackItem>
+            <StackItem>
+              <ExpandableSection toggleText={t('Show fleets')}>
+                <MassDeleteFleetTable fleets={fleetsToSkip} />
+              </ExpandableSection>
+            </StackItem>
+          </>
+        )}
+
+        {isDeleting && (
+          <StackItem>
+            <Progress
+              value={progress}
+              min={0}
+              max={progressTotal}
+              title={t('Deleting...')}
+              measureLocation={ProgressMeasureLocation.top}
+              label={t('{{progress}} of {{progressTotal}}', { progress, progressTotal })}
+              valueText={t('{{progress}} of {{progressTotal}}', { progress, progressTotal })}
+            />
+          </StackItem>
+        )}
+        {errors?.length && (
+          <StackItem>
+            <Alert isInline variant="danger" title={t('An error occurred')}>
+              <Stack hasGutter>
+                {errors.map((e, index) => (
+                  <StackItem key={index}>{e}</StackItem>
+                ))}
+              </Stack>
+            </Alert>
+          </StackItem>
+        )}
+      </Stack>
+    </Modal>
+  );
+};
+
+export default MassDeleteFleetModal;