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

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

@@ -0,0 +1,95 @@
+import * as React from 'react';
+import {
+  Alert,
+  Breadcrumb,
+  BreadcrumbItem,
+  Content,
+  ContentVariants,
+  EmptyState,
+  PageSection,
+  Spinner,
+  Stack,
+  StackItem,
+  Title,
+} from '@patternfly/react-core';
+import { CatalogItemCategory } from '@flightctl/types/alpha';
+
+import { useTranslation } from '../../../hooks/useTranslation';
+import ErrorBoundary from '../../common/ErrorBoundary';
+import { Link, ROUTE } from '../../../hooks/useNavigate';
+import InstallOsWizard from './InstallOsWizard';
+import InstallAppWizard from './InstallAppWizard';
+import { useAppContext } from '../../../hooks/useAppContext';
+import { useCatalogItem } from '../useCatalogs';
+import { getErrorMessage } from '../../../utils/error';
+import { usePermissionsContext } from '../../common/PermissionsContext';
+import PageWithPermissions from '../../common/PageWithPermissions';
+import { RESOURCE, VERB } from '../../../types/rbac';
+
+const InstallWizard = () => {
+  const { t } = useTranslation();
+  const {
+    router: { useParams },
+  } = useAppContext();
+  const { catalogId, itemId } = useParams() as { catalogId: string; itemId: string };
+  const [catalogItem, loading, error] = useCatalogItem(catalogId, itemId);
+
+  let content: React.ReactNode;
+  if (error) {
+    content = (
+      <Alert isInline variant="danger" title={t('Failed to load catalog item')}>
+        {getErrorMessage(error)}
+      </Alert>
+    );
+  } else if (loading) {
+    content = <EmptyState titleText={t('Loading catalog item')} headingLevel="h4" icon={Spinner} />;
+  } else if (catalogItem?.spec.category === CatalogItemCategory.CatalogItemCategorySystem) {
+    content = <InstallOsWizard catalogItem={catalogItem} />;
+  } else if (catalogItem?.spec.category === CatalogItemCategory.CatalogItemCategoryApplication) {
+    content = <InstallAppWizard catalogItem={catalogItem} />;
+  }
+
+  return (
+    <>
+      <PageSection hasBodyWrapper={false} type="breadcrumb">
+        <Breadcrumb>
+          <BreadcrumbItem>
+            <Link to={ROUTE.CATALOG}>{t('Software Catalog')}</Link>
+          </BreadcrumbItem>
+          <BreadcrumbItem isActive>{catalogItem?.spec.displayName || itemId}</BreadcrumbItem>
+        </Breadcrumb>
+      </PageSection>
+      <PageSection hasBodyWrapper={false}>
+        <Stack>
+          <StackItem>
+            <Title headingLevel="h1" size="3xl">
+              {t('Deploy {{name}}', { name: catalogItem?.spec.displayName || itemId })}
+            </Title>
+          </StackItem>
+          <StackItem>
+            {catalogItem?.spec.shortDescription && (
+              <Content component={ContentVariants.small}>{catalogItem.spec.shortDescription}</Content>
+            )}
+          </StackItem>
+        </Stack>
+      </PageSection>
+      <PageSection hasBodyWrapper={false} type="wizard">
+        <ErrorBoundary>{content}</ErrorBoundary>
+      </PageSection>
+    </>
+  );
+};
+
+const installWizardPermissions = [{ kind: RESOURCE.CATALOG_ITEM, verb: VERB.GET }];
+
+const InstallWizardWithPermissions = () => {
+  const { checkPermissions, loading } = usePermissionsContext();
+  const [canGetItem] = checkPermissions(installWizardPermissions);
+  return (
+    <PageWithPermissions allowed={canGetItem} loading={loading}>
+      <InstallWizard />
+    </PageWithPermissions>
+  );
+};
+
+export default InstallWizardWithPermissions;

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

@@ -0,0 +1,80 @@
+import {
+  Button,
+  EmptyState,
+  EmptyStateActions,
+  EmptyStateBody,
+  EmptyStateFooter,
+  EmptyStateStatus,
+  Stack,
+  StackItem,
+} from '@patternfly/react-core';
+import * as React from 'react';
+import { useFormikContext } from 'formik';
+
+import { TargetPickerFormik } from './types';
+import { ROUTE, useNavigate } from '../../../hooks/useNavigate';
+import { useTranslation } from '../../../hooks/useTranslation';
+
+type UpdateSuccessPageContentProps = React.PropsWithChildren<{
+  isDevice: boolean;
+}>;
+
+export const UpdateSuccessPageContent = ({ isDevice, children }: UpdateSuccessPageContentProps) => {
+  const { t } = useTranslation();
+  return (
+    <EmptyState status={EmptyStateStatus.success} titleText={t('Update configuration successful')}>
+      <EmptyStateBody>
+        {isDevice
+          ? t('Device will download and apply the update according to the configured update policies.')
+          : t('Devices will download and apply the update according to the configured update policies.')}
+      </EmptyStateBody>
+      <EmptyStateFooter>
+        <EmptyStateActions>{children}</EmptyStateActions>
+      </EmptyStateFooter>
+    </EmptyState>
+  );
+};
+
+const UpdateSuccessPage = () => {
+  const { t } = useTranslation();
+  const {
+    values: { target, device, fleet },
+  } = useFormikContext<TargetPickerFormik>();
+  const navigate = useNavigate();
+  return (
+    <UpdateSuccessPageContent isDevice={target === 'device'}>
+      <Stack hasGutter>
+        <StackItem>
+          <Button
+            variant="primary"
+            onClick={() => {
+              navigate(ROUTE.CATALOG);
+            }}
+          >
+            {t('Return to catalog')}
+          </Button>
+        </StackItem>
+        <StackItem>
+          <Button
+            variant="link"
+            onClick={() => {
+              if (target === 'device' && device) {
+                navigate({ route: ROUTE.DEVICE_DETAILS, postfix: device.metadata.name });
+                return;
+              }
+              if (target === 'fleet' && fleet) {
+                navigate({ route: ROUTE.FLEET_DETAILS, postfix: fleet.metadata.name });
+                return;
+              }
+              navigate(ROUTE.CATALOG);
+            }}
+          >
+            {target === 'device' ? t('View device') : t('View fleet')}
+          </Button>
+        </StackItem>
+      </Stack>
+    </UpdateSuccessPageContent>
+  );
+};
+
+export default UpdateSuccessPage;

package/src/components/Catalog/InstallWizard/steps/AppConfigStep.css

@@ -0,0 +1,12 @@
+.fctl-yaml-editor .monaco-editor {
+  min-height: 400px;
+}
+
+/* Style of the bar with the line numbers for light and dark themes */
+.fctl-yaml-editor .monaco-editor .margin {
+  --vscode-editorGutter-background: #f5f5f5;
+}
+
+.pf-v6-theme-dark .fctl-yaml-editor .monaco-editor .margin {
+  --vscode-editorGutter-background: #292e34;
+}

package/src/components/Catalog/InstallWizard/steps/AppConfigStep.tsx

@@ -0,0 +1,202 @@
+import {
+  Alert,
+  FormGroup,
+  Grid,
+  GridItem,
+  List,
+  ListItem,
+  Split,
+  SplitItem,
+  Stack,
+  StackItem,
+  Title,
+} from '@patternfly/react-core';
+import { RJSFValidationError } from '@rjsf/utils';
+import { FormikErrors, useFormikContext } from 'formik';
+import type * as monacoEditor from 'monaco-editor/esm/vs/editor/editor.api';
+import * as React from 'react';
+
+import { useTranslation } from '../../../../hooks/useTranslation';
+import DynamicForm, { AssetSelection } from '../../../DynamicForm/DynamicForm';
+import YamlEditorBase from '../../../common/CodeEditor/YamlEditorBase';
+import TextField from '../../../form/TextField';
+import { FormGroupWithHelperText } from '../../../common/WithHelperText';
+import RadioField from '../../../form/RadioField';
+import FlightCtlForm from '../../../form/FlightCtlForm';
+import { DynamicFormConfigFormik, InstallAppFormik } from '../types';
+
+import './AppConfigStep.css';
+
+type DynamicAppFormProps = {
+  schemaErrors?: RJSFValidationError[];
+  isEdit: boolean;
+};
+
+export const DynamicAppForm = ({ schemaErrors, isEdit }: DynamicAppFormProps) => {
+  const editorRef = React.useRef<monacoEditor.editor.IStandaloneCodeEditor | null>(null);
+  const { t } = useTranslation();
+  const { values, setFieldValue, setFieldTouched } = useFormikContext<InstallAppFormik>();
+
+  const formContext = React.useMemo(() => {
+    const onAssetSelected = (selection: AssetSelection) => {
+      const existing = values.selectedAssets.findIndex((a) => a.volumeIndex === selection.volumeIndex);
+      let newAssets: AssetSelection[];
+      if (existing >= 0) {
+        const updated = [...values.selectedAssets];
+        updated[existing] = selection;
+        newAssets = updated;
+      } else {
+        newAssets = [...values.selectedAssets, selection];
+      }
+      setFieldValue('selectedAssets', newAssets);
+    };
+
+    const onBeforeArrayItemRemoved = (arrayId: string, removedIndex: number) => {
+      if (arrayId === 'root_volumes') {
+        const newAssets = values.selectedAssets
+          .filter((a) => a.volumeIndex !== removedIndex)
+          .map((a) => (a.volumeIndex > removedIndex ? { ...a, volumeIndex: a.volumeIndex - 1 } : a));
+        setFieldValue('selectedAssets', newAssets);
+      }
+    };
+
+    const onAssetCleared = (volumeIndex: number) => {
+      const newAssets = values.selectedAssets.filter((a) => a.volumeIndex !== volumeIndex);
+      setFieldValue('selectedAssets', newAssets);
+    };
+
+    return { onAssetSelected, onBeforeArrayItemRemoved, onAssetCleared, selectedAssets: values.selectedAssets };
+  }, [values.selectedAssets, setFieldValue]);
+
+  return (
+    <Stack hasGutter>
+      <StackItem>
+        <FormGroupWithHelperText
+          label={t('Application name')}
+          content={t('Application name must be unique.')}
+          isRequired
+        >
+          <TextField aria-label={t('Application name')} name="appName" isDisabled={isEdit} />
+        </FormGroupWithHelperText>
+      </StackItem>
+      <StackItem>
+        <FormGroup label={t('Application configuration')} />
+        <Split hasGutter>
+          <SplitItem>{t('Configure via:')}</SplitItem>
+          <SplitItem>
+            <RadioField
+              name="configureVia"
+              checkedValue="form"
+              id="form"
+              label={t('Form view')}
+              isDisabled={!values.configSchema}
+            />
+          </SplitItem>
+          <SplitItem>
+            <RadioField name="configureVia" checkedValue="editor" id="editor" label={t('YAML view')} />
+          </SplitItem>
+        </Split>
+      </StackItem>
+      {!values.configSchema && (
+        <StackItem>
+          <Alert
+            variant="info"
+            isInline
+            title={t('Form view is disabled for this application because the schema is not available')}
+          />
+        </StackItem>
+      )}
+      <StackItem>
+        {values.configSchema && values.configureVia === 'form' ? (
+          <Stack hasGutter>
+            <StackItem>
+              <Alert
+                variant="info"
+                isInline
+                title={t(
+                  'Note: Some fields may not be represented in this form view. Please select "YAML view" for full control.',
+                )}
+              />
+            </StackItem>
+            <StackItem>
+              <Grid>
+                <GridItem span={6}>
+                  <DynamicForm
+                    valuesSchema={values.configSchema}
+                    formData={values.formValues}
+                    onChange={async (val) => {
+                      await setFieldValue('formValues', val);
+                      await setFieldTouched('formValues', true);
+                    }}
+                    onValidate={(valid) => {
+                      setFieldValue('dynamicFormValid', valid);
+                    }}
+                    formContext={formContext}
+                  />
+                </GridItem>
+              </Grid>
+            </StackItem>
+          </Stack>
+        ) : (
+          <Stack hasGutter>
+            <StackItem>
+              <div className="fctl-yaml-editor">
+                <YamlEditorBase
+                  showActions={false}
+                  isSaving={false}
+                  onCancel={() => {}}
+                  code={values.editorContent}
+                  editorRef={editorRef}
+                  onChange={async (val) => {
+                    await setFieldValue('editorContent', val);
+                    await setFieldTouched('editorContent', true);
+                  }}
+                />
+              </div>
+            </StackItem>
+          </Stack>
+        )}
+      </StackItem>
+      {schemaErrors?.length ? (
+        <StackItem>
+          <Alert variant="danger" title={t('Configuration is not valid')} isInline>
+            <List>
+              {schemaErrors.map((e, index) => (
+                <ListItem key={index}>
+                  {e.property}: {e.message}
+                </ListItem>
+              ))}
+            </List>
+          </Alert>
+        </StackItem>
+      ) : null}
+    </Stack>
+  );
+};
+
+export const isAppConfigStepValid = (values: DynamicFormConfigFormik, errors: FormikErrors<DynamicFormConfigFormik>) =>
+  !errors.appName && (values.configureVia === 'form' ? values.dynamicFormValid : !errors.editorContent);
+
+type AppConfigStepProps = {
+  schemaErrors?: RJSFValidationError[];
+  isEdit?: boolean;
+};
+
+const AppConfigStep = ({ schemaErrors, isEdit }: AppConfigStepProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <FlightCtlForm>
+      <Stack hasGutter>
+        <StackItem>
+          <Title headingLevel="h3">{t('Application configuration')}</Title>
+        </StackItem>
+        <StackItem>
+          <DynamicAppForm schemaErrors={schemaErrors} isEdit={!!isEdit} />
+        </StackItem>
+      </Stack>
+    </FlightCtlForm>
+  );
+};
+
+export default AppConfigStep;

package/src/components/Catalog/InstallWizard/steps/ReviewStep.tsx

@@ -0,0 +1,193 @@
+import {
+  Alert,
+  Card,
+  CardBody,
+  CardTitle,
+  DescriptionList,
+  DescriptionListDescription,
+  DescriptionListGroup,
+  DescriptionListTerm,
+  Stack,
+  StackItem,
+  Title,
+} from '@patternfly/react-core';
+import { useFormikContext } from 'formik';
+import * as React from 'react';
+import { CatalogItem, CatalogItemType } from '@flightctl/types/alpha';
+
+import { useTranslation } from '../../../../hooks/useTranslation';
+import FlightCtlForm from '../../../form/FlightCtlForm';
+import { InstallAppFormik, InstallOsFormik } from '../types';
+import { OS_ITEM_LABEL_KEY } from '../../const';
+import { getFullContainerURI } from '../../utils';
+import { DeviceSpec } from '@flightctl/types';
+import { Trans } from 'react-i18next';
+
+const isOsUpdate = (
+  catalogItem: CatalogItem,
+  version: string,
+  labels: Record<string, string> | undefined,
+  spec: DeviceSpec,
+) => {
+  const existingOsItem = labels?.[OS_ITEM_LABEL_KEY];
+  const catalogItemVersion = catalogItem.spec.versions.find((v) => v.version === version);
+  if (existingOsItem === catalogItem.metadata.name && catalogItemVersion) {
+    const imgUri = getFullContainerURI(catalogItem.spec.artifacts, catalogItemVersion);
+    return !!imgUri && !!spec?.os?.image && imgUri !== spec.os.image;
+  }
+  return false;
+};
+
+type UpdateAlertsProps = {
+  catalogItem: CatalogItem;
+};
+
+const UpdateAlerts = ({ catalogItem }: UpdateAlertsProps) => {
+  const { t } = useTranslation();
+  const { values } = useFormikContext<InstallOsFormik>();
+
+  if (catalogItem.spec.type !== CatalogItemType.CatalogItemTypeOS) {
+    return false;
+  }
+
+  const osImageName = `${catalogItem.spec.displayName || catalogItem.metadata.name}:${values.version}`;
+
+  if (values.target === 'fleet') {
+    const numOfDevices = `${values.fleet?.status?.devicesSummary?.total || 0}`;
+    if (!values.fleet?.spec.template.spec.os?.image) {
+      return (
+        <Alert isInline variant="warning" title={t('Fleet update')}>
+          <Trans t={t}>
+            This will deploy the OS <strong>{osImageName}</strong> for all <strong>({numOfDevices})</strong> devices in
+            the <strong>{values.fleet?.metadata.name}</strong> fleet. Devices will download and apply the update
+            according to the configured update policies.
+          </Trans>
+        </Alert>
+      );
+    } else {
+      if (isOsUpdate(catalogItem, values.version, values.fleet?.metadata.labels, values.fleet?.spec.template.spec)) {
+        return (
+          <Alert isInline variant="info" title={t('Version update')}>
+            <Trans t={t}>
+              You are about to update OS <strong>{osImageName}</strong>. This will update the OS image for all{' '}
+              <strong>({numOfDevices})</strong> devices in the <strong>{values.fleet?.metadata.name}</strong> fleet.
+              Devices will download and apply the update according to the configured update policies.
+            </Trans>
+          </Alert>
+        );
+      }
+
+      return (
+        <Alert isInline variant="warning" title={t('Existing OS image detected')}>
+          <Trans t={t}>
+            You are about to replace OS with <strong>{osImageName}</strong>. This will update the OS image for all{' '}
+            <strong>({numOfDevices})</strong> devices in the <strong>{values.fleet?.metadata.name}</strong> fleet.
+            Devices will download and apply the update according to the configured update policies.
+          </Trans>
+        </Alert>
+      );
+    }
+  } else if (values.target === 'device') {
+    if (!values.device?.spec?.os?.image) {
+      return (
+        <Alert isInline variant="warning" title={t('Device update')}>
+          <Trans t={t}>
+            This will deploy the OS <strong>{osImageName}</strong>. Device will download and apply the update according
+            to the configured update policies.
+          </Trans>
+        </Alert>
+      );
+    } else {
+      if (isOsUpdate(catalogItem, values.version, values.device?.metadata.labels, values.device?.spec)) {
+        return (
+          <Alert isInline variant="info" title={t('Version update')}>
+            <Trans t={t}>
+              You are about to update OS with <strong>{osImageName}</strong>. Device will download and apply the update
+              according to the configured update policies.
+            </Trans>
+          </Alert>
+        );
+      }
+
+      return (
+        <Alert isInline variant="warning" title={t('Existing OS image detected')}>
+          <Trans t={t}>
+            You are about to replace OS with <strong>{osImageName}</strong>. Device will download and apply the update
+            according to the configured update policies.
+          </Trans>
+        </Alert>
+      );
+    }
+  }
+  return false;
+};
+
+type ReviewStepProps = {
+  catalogItem: CatalogItem;
+  error?: string;
+};
+
+const ReviewStep = ({ error, catalogItem }: ReviewStepProps) => {
+  const { t } = useTranslation();
+  const { values } = useFormikContext<InstallOsFormik | InstallAppFormik>();
+
+  return (
+    <FlightCtlForm>
+      <Stack hasGutter>
+        <StackItem>
+          <Title headingLevel="h3">{t('Review deployment specifications')}</Title>
+        </StackItem>
+        <UpdateAlerts catalogItem={catalogItem} />
+        <StackItem>
+          <Card>
+            <CardTitle>{t('Deployment specifications')}</CardTitle>
+            <CardBody>
+              <DescriptionList>
+                <DescriptionListGroup>
+                  <DescriptionListTerm>{t('Channel')}</DescriptionListTerm>
+                  <DescriptionListDescription>{values.channel}</DescriptionListDescription>
+                </DescriptionListGroup>
+                <DescriptionListGroup>
+                  <DescriptionListTerm>{t('Version')}</DescriptionListTerm>
+                  <DescriptionListDescription>{values.version}</DescriptionListDescription>
+                </DescriptionListGroup>
+              </DescriptionList>
+            </CardBody>
+          </Card>
+        </StackItem>
+        <StackItem>
+          <Card>
+            <CardTitle>{t('Target')}</CardTitle>
+            <CardBody>
+              <DescriptionList>
+                <DescriptionListGroup>
+                  <DescriptionListTerm>{t('Target type')}</DescriptionListTerm>
+                  <DescriptionListDescription>
+                    {values.target === 'fleet' ? t('Fleet') : t('Device')}
+                  </DescriptionListDescription>
+                </DescriptionListGroup>
+                <DescriptionListGroup>
+                  <DescriptionListTerm>{t('Target')}</DescriptionListTerm>
+                  <DescriptionListDescription>
+                    {values.target === 'fleet'
+                      ? values.fleet?.metadata.name
+                      : values.device?.metadata.labels?.alias || values.device?.metadata.name}
+                  </DescriptionListDescription>
+                </DescriptionListGroup>
+              </DescriptionList>
+            </CardBody>
+          </Card>
+        </StackItem>
+        {error && (
+          <StackItem>
+            <Alert variant="danger" title={t('Failed to deploy')} isInline>
+              {error}
+            </Alert>
+          </StackItem>
+        )}
+      </Stack>
+    </FlightCtlForm>
+  );
+};
+
+export default ReviewStep;