@flightctl/ui-components 1.1.0-rc4 → 1.1.0-rc6

package/src/components/Catalog/EditWizard/steps/UpdateStep.tsx

@@ -0,0 +1,184 @@
+import {
+  Alert,
+  Button,
+  Content,
+  FormGroup,
+  Grid,
+  GridItem,
+  Icon,
+  Modal,
+  ModalBody,
+  ModalHeader,
+  Title,
+} from '@patternfly/react-core';
+import ArrowRightIcon from '@patternfly/react-icons/dist/js/icons/arrow-right-icon';
+import * as React from 'react';
+import { FormikErrors, useFormikContext } from 'formik';
+import { CatalogItem, CatalogItemVersion } from '@flightctl/types/alpha';
+import semver from 'semver';
+import ReactMarkdown from 'react-markdown';
+
+import FlightCtlForm from '../../../form/FlightCtlForm';
+import { useTranslation } from '../../../../hooks/useTranslation';
+import FormSelect from '../../../form/FormSelect';
+import { InstallSpecFormik } from '../../InstallWizard/types';
+import { StatusDisplayContent } from '../../../Status/StatusDisplay';
+import { InstallSpec, VersionDropdown } from '../../InstallWizard/steps/SpecificationsStep';
+import UpdateGraph from './UpdateGraph';
+import { FormGroupWithHelperText } from '../../../common/WithHelperText';
+import { applyInitialConfig, getInitialAppConfig } from '../../InstallWizard/utils';
+import { getUpdates } from '../../utils';
+
+export const isUpdateStepValid = (errors: FormikErrors<InstallSpecFormik>) => {
+  return !errors.version && !errors.channel;
+};
+
+type UpdateStepProps = {
+  currentVersion: CatalogItemVersion;
+  catalogItem: CatalogItem;
+  isEdit: boolean;
+};
+
+const UpdateStep = ({ currentVersion, catalogItem, isEdit }: UpdateStepProps) => {
+  const [showReadme, setShowReadme] = React.useState(false);
+  const { t } = useTranslation();
+  const { values, initialValues, setFieldValue } = useFormikContext<InstallSpecFormik>();
+
+  const updates = getUpdates(catalogItem, values.channel, currentVersion.version);
+
+  const updateVersion = catalogItem.spec.versions.find((v) => v.version === values.version);
+
+  return isEdit ? (
+    <>
+      <FlightCtlForm>
+        <Grid hasGutter>
+          <GridItem>
+            <Title headingLevel="h3">{t('Version update')}</Title>
+          </GridItem>
+          <GridItem lg={7} md={10} sm={12}>
+            <Grid hasGutter>
+              <GridItem>
+                <Grid style={{ alignItems: 'center' }}>
+                  <GridItem span={4}>
+                    <FormGroup label={t('Current channel')} />
+                  </GridItem>
+                  <GridItem span={1} />
+                  <GridItem span={4}>
+                    <FormGroupWithHelperText
+                      label={t('Target channel')}
+                      content={t('The current version is available in the channels listed in the dropdown below')}
+                    />
+                  </GridItem>
+                  <GridItem span={3} />
+                  <GridItem span={4}>{initialValues.channel}</GridItem>
+                  <GridItem span={1}>
+                    <Icon>
+                      <ArrowRightIcon />
+                    </Icon>
+                  </GridItem>
+                  <GridItem span={4}>
+                    <FormSelect
+                      name="channel"
+                      items={currentVersion.channels.reduce((acc, curr) => {
+                        acc[curr] = curr;
+                        return acc;
+                      }, {})}
+                      onChange={(val) => {
+                        const latestVersion = getUpdates(catalogItem, val, currentVersion.version).sort((a, b) =>
+                          semver.rcompare(a.version, b.version),
+                        )[0]?.version;
+                        const newVersion = latestVersion || currentVersion.version;
+                        setFieldValue('version', newVersion);
+                        const appConfig = getInitialAppConfig(catalogItem, newVersion);
+                        applyInitialConfig(setFieldValue, appConfig);
+                      }}
+                    />
+                  </GridItem>
+                  <GridItem span={3} />
+                </Grid>
+              </GridItem>
+              <GridItem>
+                <Grid style={{ alignItems: 'center' }}>
+                  <GridItem span={4}>
+                    <FormGroup label={t('Current version')} />
+                  </GridItem>
+                  <GridItem span={1} />
+                  <GridItem span={4}>
+                    <FormGroup label={t('Target version')} />
+                  </GridItem>
+                  <GridItem span={3} />
+                  <GridItem span={4}>{currentVersion.version}</GridItem>
+                  <GridItem span={1}>
+                    <Icon>
+                      <ArrowRightIcon />
+                    </Icon>
+                  </GridItem>
+                  <GridItem span={4}>
+                    {updates.length ? (
+                      <VersionDropdown catalogItem={catalogItem} versions={[...updates, currentVersion]} />
+                    ) : (
+                      <StatusDisplayContent level="success" label={t('Up to date')} />
+                    )}
+                  </GridItem>
+                  <GridItem span={3} style={{ paddingLeft: 'var(--pf-t--global--spacer--md)' }}>
+                    {updateVersion?.readme && (
+                      <Button onClick={() => setShowReadme(true)} variant="link">
+                        {t('Show readme')}
+                      </Button>
+                    )}
+                  </GridItem>
+                </Grid>
+              </GridItem>
+            </Grid>
+          </GridItem>
+          <GridItem lg={6} md={9} sm={11}>
+            <Grid hasGutter>
+              {!!updates.length && (
+                <>
+                  {values.version === currentVersion.version && (
+                    <GridItem>
+                      <Alert isInline variant="info" title={t('No version update will be performed')} />
+                    </GridItem>
+                  )}
+                  <GridItem>
+                    <UpdateGraph currentChannel={values.channel} currentVersion={currentVersion} updates={updates} />
+                  </GridItem>
+                </>
+              )}
+              {updateVersion?.deprecation && (
+                <GridItem>
+                  <Alert isInline variant="warning" title={t('This version is deprecated')}>
+                    {updateVersion.deprecation.message}
+                  </Alert>
+                </GridItem>
+              )}
+            </Grid>
+          </GridItem>
+        </Grid>
+      </FlightCtlForm>
+      {showReadme && updateVersion?.readme && (
+        <Modal isOpen onClose={() => setShowReadme(false)} variant="medium">
+          <ModalHeader title={t('Readme')} />
+          <ModalBody>
+            <Content>
+              <ReactMarkdown>{updateVersion.readme}</ReactMarkdown>
+            </Content>
+          </ModalBody>
+        </Modal>
+      )}
+    </>
+  ) : (
+    <FlightCtlForm>
+      <Grid hasGutter>
+        <GridItem>
+          <Title headingLevel="h3">{t('Deployment specifications')}</Title>
+        </GridItem>
+        <GridItem lg={6} md={8} sm={12}>
+          <InstallSpec catalogItem={catalogItem} targetSet />
+        </GridItem>
+      </Grid>
+    </FlightCtlForm>
+  );
+};
+
+export default UpdateStep;

package/src/components/Catalog/EditWizard/types.ts

@@ -0,0 +1,3 @@
+import { DynamicFormConfigFormik, InstallSpecFormik } from '../InstallWizard/types';
+
+export type AppUpdateFormik = DynamicFormConfigFormik & InstallSpecFormik;

package/src/components/Catalog/ImportCatalogWizard/ImportCatalogWizard.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { ResourceSyncType } from '@flightctl/types';
+
+import { useTranslation } from '../../../hooks/useTranslation';
+import { ROUTE } from '../../../hooks/useNavigate';
+import ImportResourceWizard from '../../ImportResourceWizard/ImportResourceWizard';
+
+const ImportCatalogWizard = () => {
+  const { t } = useTranslation();
+  return (
+    <ImportResourceWizard
+      resourceSyncType={ResourceSyncType.ResourceSyncTypeCatalog}
+      successRoute={ROUTE.CATALOG}
+      breadcrumb={{ label: t('Software Catalog'), route: ROUTE.CATALOG }}
+      title={t('Import catalogs')}
+      resourceSyncDescription={t(
+        'A resource sync is an automated Gitops method that helps manage your imported catalog by monitoring source repository changes and updating your catalog configuration accordingly.',
+      )}
+    />
+  );
+};
+
+export default ImportCatalogWizard;

package/src/components/Catalog/InstallWizard/InstallAppWizard.tsx

@@ -0,0 +1,228 @@
+import { CatalogItem } from '@flightctl/types/alpha';
+import { Wizard, WizardStep, WizardStepType } from '@patternfly/react-core';
+import { Formik, useFormikContext } from 'formik';
+import * as React from 'react';
+import * as Yup from 'yup';
+import { load } from 'js-yaml';
+import { RJSFValidationError } from '@rjsf/utils';
+import { Device, Fleet } from '@flightctl/types';
+
+import { useTranslation } from '../../../hooks/useTranslation';
+import { useFetch } from '../../../hooks/useFetch';
+import { getAppPatches } from '../utils';
+import { InstallAppFormik, appConfigStepId, reviewStepId, selectTargetStepId, specificationsStepId } from './types';
+import SpecificationsStep, { isSpecsStepValid } from './steps/SpecificationsStep';
+import SelectTargetStep, { isSelectTargetStepValid } from './steps/SelectTargetStep';
+import AppConfigStep, { isAppConfigStepValid } from './steps/AppConfigStep';
+import ReviewStep from './steps/ReviewStep';
+import LeaveFormConfirmation from '../../common/LeaveFormConfirmation';
+import UpdateSuccessPage from './UpdateSuccessPage';
+import FlightCtlWizardFooter, { FlightCtlWizardFooterProps } from '../../common/FlightCtlWizardFooter';
+import { useAppContext } from '../../../hooks/useAppContext';
+import { getInitialAppConfig } from './utils';
+import { useSubmitCatalogForm } from '../useSubmitCatalogForm';
+import { validApplicationAndVolumeName } from '../../form/validations';
+
+export const validateAppWizardStep: FlightCtlWizardFooterProps<InstallAppFormik>['validateStep'] = (
+  activeStepId,
+  errors,
+  values,
+) => {
+  if (activeStepId === specificationsStepId) return isSpecsStepValid(errors);
+  if (activeStepId === selectTargetStepId) return isSelectTargetStepValid(errors);
+  if (activeStepId === appConfigStepId) return isAppConfigStepValid(values, errors);
+  return true;
+};
+
+type InstallAppWizardContentProps = {
+  currentStep: WizardStepType | undefined;
+  setCurrentStep: (step: WizardStepType) => void;
+  error: string | undefined;
+  schemaErrors: RJSFValidationError[] | undefined;
+  catalogItem: CatalogItem;
+  isSuccessful: boolean;
+  setError: (err: string | undefined) => void;
+};
+
+const InstallAppWizardContent = ({
+  currentStep,
+  setCurrentStep,
+  error,
+  schemaErrors,
+  catalogItem,
+  isSuccessful,
+  setError,
+}: InstallAppWizardContentProps) => {
+  const { t } = useTranslation();
+  const { values, errors } = useFormikContext<InstallAppFormik>();
+  return isSuccessful ? (
+    <UpdateSuccessPage />
+  ) : (
+    <>
+      <LeaveFormConfirmation />
+      <Wizard
+        footer={
+          <FlightCtlWizardFooter<InstallAppFormik>
+            firstStepId={specificationsStepId}
+            submitStepId={reviewStepId}
+            validateStep={validateAppWizardStep}
+            saveButtonText={t('Deploy')}
+          />
+        }
+        onStepChange={(_, step) => {
+          if (error) {
+            setError(undefined);
+          }
+          setCurrentStep(step);
+        }}
+      >
+        <WizardStep name={t('Specifications')} id={specificationsStepId}>
+          {(!currentStep || currentStep?.id === specificationsStepId) && (
+            <SpecificationsStep catalogItem={catalogItem} />
+          )}
+        </WizardStep>
+        <WizardStep name={t('Select target')} id={selectTargetStepId} isDisabled={!isSpecsStepValid(errors)}>
+          {currentStep?.id === selectTargetStepId && <SelectTargetStep catalogItem={catalogItem} />}
+        </WizardStep>
+        <WizardStep
+          name={t('Application configuration')}
+          id={appConfigStepId}
+          isDisabled={!isSelectTargetStepValid(errors) || !isSpecsStepValid(errors)}
+        >
+          {currentStep?.id === appConfigStepId && <AppConfigStep schemaErrors={schemaErrors} />}
+        </WizardStep>
+        <WizardStep
+          name={t('Review and deploy')}
+          id={reviewStepId}
+          isDisabled={
+            !isAppConfigStepValid(values, errors) || !isSpecsStepValid(errors) || !isSelectTargetStepValid(errors)
+          }
+        >
+          {currentStep?.id === reviewStepId && <ReviewStep error={error} catalogItem={catalogItem} />}
+        </WizardStep>
+      </Wizard>
+    </>
+  );
+};
+
+type InstallAppWizardProps = {
+  catalogItem: CatalogItem;
+};
+
+const InstallAppWizard = ({ catalogItem }: InstallAppWizardProps) => {
+  const { t } = useTranslation();
+  const [isSuccessful, setIsSuccessful] = React.useState(false);
+  const [currentStep, setCurrentStep] = React.useState<WizardStepType>();
+  const { patch, get } = useFetch();
+
+  const {
+    router: { useSearchParams },
+  } = useAppContext();
+  const [searchParams] = useSearchParams();
+  const channel = searchParams.get('channel') || '';
+  const version = searchParams.get('version') || '';
+
+  const validationSchema = Yup.lazy((values: InstallAppFormik) =>
+    Yup.object({
+      target: Yup.string().required(t('Target must be selected')),
+      channel: Yup.string().required(t('Channel must be selected')),
+      version: Yup.string().required(t('Version must be selected')),
+      device: values.target === 'device' ? Yup.object().required(t('Device must be selected')) : Yup.object(),
+      fleet: values.target === 'fleet' ? Yup.object().required(t('Fleet must be selected')) : Yup.object(),
+      appName: validApplicationAndVolumeName(t)
+        .required(t('Application name is required'))
+        .test('is-unique', t('Application with the same name already exists.'), (value) => {
+          if (!value || value.length === 0 || !values.target) {
+            return true;
+          }
+          const apps =
+            values.target === 'device'
+              ? values.device?.spec?.applications
+              : values.fleet?.spec.template.spec.applications;
+          if (!apps?.length) {
+            return true;
+          }
+          return !apps.some((app) => app.name === value);
+        }),
+    }),
+  );
+
+  const initialValues = React.useMemo<InstallAppFormik>(() => {
+    const appConfig = getInitialAppConfig(catalogItem, version);
+    return {
+      version,
+      channel,
+      target: undefined,
+      fleet: undefined,
+      device: undefined,
+      ...appConfig,
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const { onSubmit, error, schemaErrors, setError } = useSubmitCatalogForm<InstallAppFormik>(async (values) => {
+    if (values.target !== 'fleet' && values.target !== 'device') {
+      return;
+    }
+    const selectedDevice = values.device;
+    const selectedFleet = values.fleet;
+    const installToDevice = values.target === 'device';
+    const resourceId = installToDevice
+      ? `devices/${selectedDevice?.metadata.name}`
+      : `fleets/${selectedFleet?.metadata.name}`;
+
+    const res = await get<Device | Fleet>(resourceId);
+    const currentLabels = res?.metadata.labels;
+    const specPath = installToDevice ? '/' : '/spec/template/';
+    const catalogItemVersion = catalogItem.spec.versions.find((v) => v.version === values.version);
+
+    if (!catalogItemVersion) {
+      throw t('Failed to find requested version {{version}}', { version: values.version });
+    }
+    const currentApps = installToDevice
+      ? (res as Device)?.spec?.applications
+      : (res as Fleet)?.spec.template.spec.applications;
+    const allPatches = getAppPatches({
+      appName: values.appName,
+      currentApps,
+      currentLabels,
+      catalogItem,
+      catalogItemVersion,
+      channel: values.channel,
+      formValues:
+        values.configureVia === 'editor' ? (load(values.editorContent) as Record<string, unknown>) : values.formValues,
+      specPath,
+      selectedAssets: values.configureVia === 'form' ? values.selectedAssets : [],
+    });
+    if (!allPatches.length) {
+      return;
+    }
+    await patch(resourceId, allPatches);
+  });
+
+  return (
+    <Formik<InstallAppFormik>
+      validationSchema={validationSchema}
+      initialValues={initialValues}
+      validateOnMount
+      onSubmit={async (values) => {
+        const success = await onSubmit(values);
+        if (success) {
+          setIsSuccessful(true);
+        }
+      }}
+    >
+      <InstallAppWizardContent
+        currentStep={currentStep}
+        setCurrentStep={setCurrentStep}
+        error={error}
+        schemaErrors={schemaErrors}
+        catalogItem={catalogItem}
+        isSuccessful={isSuccessful}
+        setError={setError}
+      />
+    </Formik>
+  );
+};
+
+export default InstallAppWizard;

package/src/components/Catalog/InstallWizard/InstallOsWizard.tsx

@@ -0,0 +1,199 @@
+import { CatalogItem } from '@flightctl/types/alpha';
+import { Wizard, WizardStep, WizardStepType } from '@patternfly/react-core';
+import { Formik, useFormikContext } from 'formik';
+import * as React from 'react';
+import * as Yup from 'yup';
+import { Device, Fleet } from '@flightctl/types';
+
+import { useTranslation } from '../../../hooks/useTranslation';
+import { useFetch } from '../../../hooks/useFetch';
+import { getOsPatches } from '../utils';
+import { getErrorMessage } from '../../../utils/error';
+import { InstallOsFormik, reviewStepId, selectTargetStepId, specificationsStepId } from './types';
+import SpecificationsStep, { isSpecsStepValid } from './steps/SpecificationsStep';
+import SelectTargetStep, { isSelectTargetStepValid } from './steps/SelectTargetStep';
+import ReviewStep from './steps/ReviewStep';
+import LeaveFormConfirmation from '../../common/LeaveFormConfirmation';
+import UpdateSuccessPage from './UpdateSuccessPage';
+import FlightCtlWizardFooter, { FlightCtlWizardFooterProps } from '../../common/FlightCtlWizardFooter';
+import { useAppContext } from '../../../hooks/useAppContext';
+import { useNavigate } from '../../../hooks/useNavigate';
+
+export const validateOsWizardStep: FlightCtlWizardFooterProps<InstallOsFormik>['validateStep'] = (
+  activeStepId,
+  errors,
+) => {
+  if (activeStepId === specificationsStepId) return isSpecsStepValid(errors);
+  if (activeStepId === selectTargetStepId) return isSelectTargetStepValid(errors);
+  return true;
+};
+
+type InstallOsWizardContentProps = {
+  currentStep: WizardStepType | undefined;
+  setCurrentStep: (step: WizardStepType) => void;
+  error: string | undefined;
+  catalogItem: CatalogItem;
+  isSuccessful: boolean;
+  setError: (err: string | undefined) => void;
+};
+
+const InstallOsWizardContent = ({
+  currentStep,
+  setCurrentStep,
+  error,
+  catalogItem,
+  isSuccessful,
+  setError,
+}: InstallOsWizardContentProps) => {
+  const { t } = useTranslation();
+  const { values, errors } = useFormikContext<InstallOsFormik>();
+  const showLeaveConfirmation = !(values.target === 'new-device' && currentStep?.id === selectTargetStepId);
+
+  return isSuccessful ? (
+    <UpdateSuccessPage />
+  ) : (
+    <>
+      {showLeaveConfirmation && <LeaveFormConfirmation />}
+      <Wizard
+        footer={
+          <FlightCtlWizardFooter<InstallOsFormik>
+            firstStepId={specificationsStepId}
+            submitStepId={values.target === 'new-device' ? selectTargetStepId : reviewStepId}
+            validateStep={validateOsWizardStep}
+            saveButtonText={values.target === 'new-device' ? t('Close') : t('Deploy')}
+          />
+        }
+        onStepChange={(_, step) => {
+          if (error) {
+            setError(undefined);
+          }
+          setCurrentStep(step);
+        }}
+      >
+        <WizardStep name={t('Specifications')} id={specificationsStepId}>
+          {(!currentStep || currentStep?.id === specificationsStepId) && (
+            <SpecificationsStep catalogItem={catalogItem} showNewDevice />
+          )}
+        </WizardStep>
+        <WizardStep name={t('Select target')} id={selectTargetStepId} isDisabled={!isSpecsStepValid(errors)}>
+          {currentStep?.id === selectTargetStepId && <SelectTargetStep catalogItem={catalogItem} />}
+        </WizardStep>
+        {values.target !== 'new-device' && (
+          <WizardStep
+            name={t('Review and deploy')}
+            id={reviewStepId}
+            isDisabled={!isSpecsStepValid(errors) || !isSelectTargetStepValid(errors)}
+          >
+            {currentStep?.id === reviewStepId && <ReviewStep error={error} catalogItem={catalogItem} />}
+          </WizardStep>
+        )}
+      </Wizard>
+    </>
+  );
+};
+
+type InstallOsWizardProps = {
+  catalogItem: CatalogItem;
+};
+
+const InstallOsWizard = ({ catalogItem }: InstallOsWizardProps) => {
+  const { t } = useTranslation();
+  const [error, setError] = React.useState<string>();
+  const [isSuccessful, setIsSuccessful] = React.useState(false);
+  const [currentStep, setCurrentStep] = React.useState<WizardStepType>();
+  const { patch, get } = useFetch();
+  const navigate = useNavigate();
+
+  const {
+    router: { useSearchParams },
+  } = useAppContext();
+  const [searchParams] = useSearchParams();
+  const channel = searchParams.get('channel') || '';
+  const version = searchParams.get('version') || '';
+
+  const validationSchema = Yup.lazy((values: InstallOsFormik) =>
+    Yup.object({
+      target: Yup.string().required(t('Target must be selected')),
+      device: values.target === 'device' ? Yup.object().required(t('Device must be selected')) : Yup.object(),
+      fleet: values.target === 'fleet' ? Yup.object().required(t('Fleet must be selected')) : Yup.object(),
+      channel: Yup.string().required(t('Channel must be selected')),
+      version: Yup.string().required(t('Version must be selected')),
+    }),
+  );
+
+  const initialValues = React.useMemo<InstallOsFormik>(
+    () => ({
+      version,
+      channel,
+      target: undefined,
+      fleet: undefined,
+      device: undefined,
+      deploymentTarget: undefined,
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [],
+  );
+
+  const onSubmit = async (values: InstallOsFormik) => {
+    setError(undefined);
+    if (values.target === 'new-device') {
+      navigate(-1);
+      return;
+    }
+    const selectedDevice = values.device;
+    const selectedFleet = values.fleet;
+    const installToDevice = values.target === 'device';
+    const resourceId = installToDevice
+      ? `devices/${selectedDevice?.metadata.name}`
+      : `fleets/${selectedFleet?.metadata.name}`;
+
+    try {
+      const res = await get<Device | Fleet>(resourceId);
+      const catalogItemVersion = catalogItem.spec.versions.find((v) => v.version === values.version);
+
+      if (!catalogItemVersion || !values.channel) {
+        return;
+      }
+      const currentOsImage = installToDevice
+        ? (res as Device)?.spec?.os?.image
+        : (res as Fleet)?.spec.template.spec.os?.image;
+      const allPatches = getOsPatches({
+        currentOsImage,
+        currentLabels: res?.metadata.labels,
+        catalogItem,
+        catalogItemVersion,
+        channel: values.channel,
+        specPath: installToDevice ? '/' : '/spec/template/',
+      });
+
+      if (!allPatches.length) {
+        setIsSuccessful(true);
+      } else {
+        await patch(resourceId, allPatches);
+        setIsSuccessful(true);
+      }
+    } catch (e) {
+      setError(getErrorMessage(e));
+    }
+  };
+
+  return (
+    <Formik<InstallOsFormik>
+      validationSchema={validationSchema}
+      initialValues={initialValues}
+      validateOnMount
+      onSubmit={onSubmit}
+    >
+      <InstallOsWizardContent
+        catalogItem={catalogItem}
+        currentStep={currentStep}
+        error={error}
+        isSuccessful={isSuccessful}
+        setCurrentStep={setCurrentStep}
+        setError={setError}
+      />
+    </Formik>
+  );
+};
+
+export default InstallOsWizard;