@flightctl/ui-components 0.7.1 → 0.8.0-rc1

package/src/components/Repository/RepositoryDetails/DeleteRepositoryModal.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { useEffect } from 'react';
-import { Alert, Button, Modal, Spinner, Stack, StackItem, Text, TextContent } from '@patternfly/react-core';
 import { Trans } from 'react-i18next';
+import { Alert, Button, Spinner, Stack, StackItem, Text, TextContent } from '@patternfly/react-core';
+import { Modal, ModalBody, ModalFooter, ModalHeader } from '@patternfly/react-core/next';
 
 import { ResourceSyncList } from '@flightctl/types';
 
@@ -63,7 +63,7 @@ const DeleteRepositoryModal = ({ repositoryId, onClose, onDeleteSuccess }: Delet
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [get, repositoryId]);
 
-  useEffect(() => {
+  React.useEffect(() => {
     void loadRS();
   }, [loadRS]);
 
@@ -83,14 +83,54 @@ const DeleteRepositoryModal = ({ repositoryId, onClose, onDeleteSuccess }: Delet
   };
 
   return (
-    <Modal
-      title={t('Delete repository ?')}
-      isOpen
-      titleIconVariant="warning"
-      onClose={onClose}
-      variant={hasResourceSyncs ? 'medium' : 'small'}
-      actions={[
-        rsError ? (
+    <Modal isOpen onClose={onClose} variant={hasResourceSyncs ? 'medium' : 'small'}>
+      <ModalHeader title={t('Delete repository ?')} titleIconVariant="warning" />
+      <ModalBody>
+        <Stack hasGutter>
+          {hasResourceSyncs && (
+            <StackItem>
+              <TextContent>
+                <Text>
+                  {t(
+                    'This repository defines resource syncs. By deleting the repository, its resource syncs will also be deleted.',
+                  )}
+                </Text>
+                <Text>
+                  {t(
+                    `Any fleet that is being managed by this repository's resource syncs, will stop being managed by the service.`,
+                  )}
+                </Text>
+              </TextContent>
+            </StackItem>
+          )}
+          {rsError ? (
+            <Alert isInline variant="warning" title={t('Cannot delete repository')}>
+              {rsError}
+            </Alert>
+          ) : (
+            <StackItem>
+              <Trans t={t}>
+                Are you sure you want to delete the repository <b>{repositoryId}</b>?
+              </Trans>
+            </StackItem>
+          )}
+          {(isDeleting && message) ||
+            (isLoadingRSs && (
+              <StackItem>
+                <Spinner size="sm" /> {isLoadingRSs ? t('Checking if the repository has resource syncs') : message}
+              </StackItem>
+            ))}
+          {error && (
+            <StackItem>
+              <Alert isInline variant="danger" title={t('An error occurred')}>
+                {error}
+              </Alert>
+            </StackItem>
+          )}
+        </Stack>
+      </ModalBody>
+      <ModalFooter>
+        {rsError ? (
           <Button variant="primary" onClick={loadRS}>
             {t('Reload resource syncs')}
           </Button>
@@ -105,52 +145,11 @@ const DeleteRepositoryModal = ({ repositoryId, onClose, onDeleteSuccess }: Delet
           >
             {t('Delete repository')}
           </Button>
-        ),
+        )}
         <Button key="cancel" variant="link" onClick={onClose} isDisabled={isDeleting}>
           {t('Cancel')}
-        </Button>,
-      ]}
-    >
-      <Stack hasGutter>
-        {hasResourceSyncs && (
-          <StackItem>
-            <TextContent>
-              <Text>
-                {t(
-                  'This repository defines resource syncs. By deleting the repository, its resource syncs will also be deleted.',
-                )}
-                {t(
-                  `Any fleet that is being managed by this repository's resource syncs, will stop being managed by the service.`,
-                )}
-              </Text>
-            </TextContent>
-          </StackItem>
-        )}
-        {rsError ? (
-          <Alert isInline variant="warning" title={t('Cannot delete repository')}>
-            {rsError}
-          </Alert>
-        ) : (
-          <StackItem>
-            <Trans t={t}>
-              Are you sure you want to delete the repository <b>{repositoryId}</b>?
-            </Trans>
-          </StackItem>
-        )}
-        {(isDeleting && message) ||
-          (isLoadingRSs && (
-            <StackItem>
-              <Spinner size="sm" /> {isLoadingRSs ? t('Checking if the repository has resource syncs') : message}
-            </StackItem>
-          ))}
-        {error && (
-          <StackItem>
-            <Alert isInline variant="danger" title={t('An error occurred')}>
-              {error}
-            </Alert>
-          </StackItem>
-        )}
-      </Stack>
+        </Button>
+      </ModalFooter>
     </Modal>
   );
 };

package/src/components/Repository/RepositoryDetails/RepositoryDetails.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { DropdownItem, DropdownList, Grid, GridItem } from '@patternfly/react-core';
+import { Card, CardBody, DropdownItem, DropdownList, Grid, GridItem, Nav, NavList } from '@patternfly/react-core';
 
 import { useFetchPeriodically } from '../../../hooks/useFetchPeriodically';
-import { RepoSpecType, Repository } from '@flightctl/types';
+import { RepoSpecType, Repository, ResourceKind } from '@flightctl/types';
 
 import DetailsPage from '../../DetailsPage/DetailsPage';
 import DetailsPageActions from '../../DetailsPage/DetailsPageActions';
@@ -15,14 +15,17 @@ import { useAppContext } from '../../../hooks/useAppContext';
 import { useAccessReview } from '../../../hooks/useAccessReview';
 import { RESOURCE, VERB } from '../../../types/rbac';
 import PageWithPermissions from '../../common/PageWithPermissions';
+import YamlEditor from '../../common/CodeEditor/YamlEditor';
+import EventsCard from '../../Events/EventsCard';
+import NavItem from '../../NavItem/NavItem';
 
 const RepositoryDetails = () => {
   const { t } = useTranslation();
   const {
-    router: { useParams },
+    router: { useParams, Routes, Route, Navigate },
   } = useAppContext();
   const { repositoryId } = useParams() as { repositoryId: string };
-  const [repoDetails, isLoading, error] = useFetchPeriodically<Required<Repository>>({
+  const [repoDetails, isLoading, error, refetch] = useFetchPeriodically<Required<Repository>>({
     endpoint: `repositories/${repositoryId}`,
   });
   const [isDeleteModalOpen, setIsDeleteModalOpen] = React.useState<boolean>(false);
@@ -62,19 +65,49 @@ const RepositoryDetails = () => {
           </DetailsPageActions>
         )
       }
+      nav={
+        <Nav variant="tertiary">
+          <NavList>
+            <NavItem to="details">{t('Details')}</NavItem>
+            <NavItem to="yaml">{t('YAML')}</NavItem>
+          </NavList>
+        </Nav>
+      }
     >
       {repoDetails && (
         <>
-          <Grid hasGutter>
-            <GridItem>
-              <RepositoryGeneralDetailsCard repoDetails={repoDetails} />
-            </GridItem>
-            {canListRS && repoDetails.spec.type !== RepoSpecType.HTTP && (
-              <GridItem>
-                <RepositoryResourceSyncsCard repositoryId={repositoryId} />
-              </GridItem>
-            )}
-          </Grid>
+          <Routes>
+            <Route index element={<Navigate to="details" replace />} />
+
+            <Route
+              path="details"
+              element={
+                <Grid hasGutter>
+                  <GridItem md={9}>
+                    <Card>
+                      <CardBody>
+                        <RepositoryGeneralDetailsCard repoDetails={repoDetails} />
+                      </CardBody>
+                    </Card>
+                    {canListRS && repoDetails.spec.type !== RepoSpecType.HTTP && (
+                      <Card>
+                        <CardBody>
+                          <RepositoryResourceSyncsCard repositoryId={repositoryId} />
+                        </CardBody>
+                      </Card>
+                    )}
+                  </GridItem>
+                  <GridItem md={3}>
+                    <EventsCard kind={ResourceKind.REPOSITORY} objId={repositoryId} />
+                  </GridItem>
+                </Grid>
+              }
+            />
+            <Route
+              path="yaml"
+              element={<YamlEditor filename={repositoryId} apiObj={repoDetails} refetch={refetch} />}
+            />
+          </Routes>
           {isDeleteModalOpen && (
             <DeleteRepositoryModal
               onClose={() => setIsDeleteModalOpen(false)}

package/src/components/ResourceSync/RepositoryResourceSyncList.tsx

@@ -6,12 +6,12 @@ import {
   EmptyStateActions,
   EmptyStateBody,
   EmptyStateFooter,
-  Modal,
   Toolbar,
   ToolbarContent,
   ToolbarGroup,
   ToolbarItem,
 } from '@patternfly/react-core';
+import { Modal, ModalBody, ModalHeader } from '@patternfly/react-core/next';
 import { TFunction } from 'i18next';
 import { PlusCircleIcon } from '@patternfly/react-icons/dist/js/icons/plus-circle-icon';
 import { CodeBranchIcon } from '@patternfly/react-icons/dist/js/icons/code-branch-icon';
@@ -136,30 +136,33 @@ const CreateResourceSyncModal = ({
   const [submitError, setSubmitError] = React.useState<string | undefined>();
 
   return (
-    <Modal variant="medium" title={t('Add a resource sync')} onClose={() => onClose()} isOpen>
-      <Formik<SingleResourceSyncValues>
-        initialValues={{ resourceSyncs: [{ name: '', targetRevision: '', path: '' }] }}
-        validationSchema={singleResourceSyncSchema(t, storedRSs)}
-        onSubmit={async (values: SingleResourceSyncValues) => {
-          const rsToAdd = getResourceSync(repositoryId, values.resourceSyncs[0]);
-          try {
-            await post<ResourceSync>('resourcesyncs', rsToAdd);
-            setSubmitError(undefined);
-            onClose(true);
-          } catch (e) {
-            setSubmitError(getErrorMessage(e));
-          }
-        }}
-      >
-        <>
-          <CreateResourceSyncModalForm onClose={onClose} />
-          {submitError && (
-            <Alert variant="danger" title={t('Unexpected error occurred')} isInline>
-              {submitError}
-            </Alert>
-          )}
-        </>
-      </Formik>
+    <Modal variant="medium" onClose={() => onClose()} isOpen>
+      <ModalHeader title={t('Add a resource sync')} />
+      <ModalBody>
+        <Formik<SingleResourceSyncValues>
+          initialValues={{ resourceSyncs: [{ name: '', targetRevision: '', path: '' }] }}
+          validationSchema={singleResourceSyncSchema(t, storedRSs)}
+          onSubmit={async (values: SingleResourceSyncValues) => {
+            const rsToAdd = getResourceSync(repositoryId, values.resourceSyncs[0]);
+            try {
+              await post<ResourceSync>('resourcesyncs', rsToAdd);
+              setSubmitError(undefined);
+              onClose(true);
+            } catch (e) {
+              setSubmitError(getErrorMessage(e));
+            }
+          }}
+        >
+          <>
+            <CreateResourceSyncModalForm onClose={onClose} />
+            {submitError && (
+              <Alert variant="danger" title={t('Unexpected error occurred')} isInline>
+                {submitError}
+              </Alert>
+            )}
+          </>
+        </Formik>
+      </ModalBody>
     </Modal>
   );
 };

package/src/components/common/CodeEditor/CodeEditorTheme.ts

@@ -0,0 +1,53 @@
+import * as monacoEditor from 'monaco-editor';
+
+type Monaco = typeof monacoEditor;
+
+// TODO import from PF6 react-tokens. These are not available in PF5
+const t_color_green_70 = '#204d00';
+const t_color_white = '#ffffff';
+const t_color_black = '#000000';
+const t_color_gray_60 = '#4d4d4d';
+const t_color_yellow_70 = '#73480b';
+const t_color_yellow_30 = '#ffcc17';
+const t_color_green_30 = '#afdc8f';
+const t_color_blue_30 = '#92c5f9';
+const t_color_blue_70 = '#003366';
+const t_color_purple_70 = '#21134d';
+const t_color_purple_30 = '#b6a6e9';
+const t_color_gray_90 = '#1f1f1f';
+const t_color_gray_20 = '#e0e0e0';
+
+// Defines the same color scheme as in the OCP console
+export const defineConsoleThemes = (monaco: Monaco) => {
+  monaco.editor.defineTheme('console-light', {
+    base: 'vs',
+    inherit: true,
+    colors: {
+      'editor.background': t_color_white,
+      'editorLineNumber.activeForeground': t_color_black,
+      'editorLineNumber.foreground': t_color_gray_60,
+    },
+    rules: [
+      { token: 'number', foreground: t_color_green_70 },
+      { token: 'type', foreground: t_color_yellow_70 },
+      { token: 'string', foreground: t_color_blue_70 },
+      { token: 'keyword', foreground: t_color_purple_70 },
+    ],
+  });
+
+  monaco.editor.defineTheme('console-dark', {
+    base: 'vs-dark',
+    inherit: true,
+    colors: {
+      'editor.background': t_color_gray_90,
+      'editorLineNumber.activeForeground': t_color_white,
+      'editorLineNumber.foreground': t_color_gray_20,
+    },
+    rules: [
+      { token: 'number', foreground: t_color_green_30 },
+      { token: 'type', foreground: t_color_blue_30 },
+      { token: 'string', foreground: t_color_yellow_30 },
+      { token: 'keyword', foreground: t_color_purple_30 },
+    ],
+  });
+};

package/src/components/common/CodeEditor/Shortcut.css

@@ -0,0 +1,22 @@
+.fctl-shortcut__cell {
+  padding-bottom: var(--pf-v5-global--spacer--md);
+}
+
+.fctl-shortcut__cell:first-child {
+  padding-right: var(--pf-v5-global--spacer--md);
+  text-align: right;
+  white-space: nowrap;
+  vertical-align: top;
+}
+
+.fctl-shortcut__command:not(:last-child):after {
+  content: ' + ';
+}
+
+.fctl-shortcut__command-key {
+  border: var(--pf-v5-global--BorderWidth--sm) solid var(--pf-v5-global--BorderColor--100);
+  border-radius: 3px;
+  color: var(--pf-v5-global--Color--200);
+  font-size: var(--pf-v5-global--FontSize--sm);
+  padding: 1px 3px;
+}

package/src/components/common/CodeEditor/Shortcut.tsx

@@ -0,0 +1,90 @@
+import * as React from 'react';
+import { MouseIcon } from '@patternfly/react-icons/dist/js/icons/mouse-icon';
+import upperFirst from 'lodash/upperFirst';
+
+import { useTranslation } from '../../../hooks/useTranslation';
+
+import './Shortcut.css';
+
+interface ShortcutProps {
+  children: React.ReactNode;
+  alt?: boolean;
+  click?: boolean;
+  ctrl?: boolean;
+  ctrlCmd?: boolean;
+  drag?: boolean;
+  hover?: boolean;
+  keyName?: string;
+  rightClick?: boolean;
+  shift?: boolean;
+  dragNdrop?: boolean;
+}
+
+export const ShortcutCommand = ({ children }: React.PropsWithChildren) => (
+  <span className="fctl-shortcut__command">
+    <kbd className="fctl-shortcut__command-key">{children}</kbd>
+  </span>
+);
+
+export const isMac = window.navigator.platform.includes('Mac');
+
+const Shortcut = ({
+  children,
+  alt,
+  click,
+  ctrl,
+  ctrlCmd,
+  drag,
+  hover,
+  keyName,
+  rightClick,
+  shift,
+  dragNdrop,
+}: ShortcutProps) => {
+  const { t } = useTranslation();
+  return (
+    <tr role="row">
+      <td className="fctl-shortcut__cell" role="cell">
+        {(ctrl || (!isMac && ctrlCmd)) && <ShortcutCommand>Ctrl</ShortcutCommand>}
+        {alt && <ShortcutCommand>{isMac ? '⌥ Opt' : 'Alt'}</ShortcutCommand>}
+        {shift && <ShortcutCommand>Shift</ShortcutCommand>}
+        {isMac && ctrlCmd && <ShortcutCommand>⌘ Cmd</ShortcutCommand>}
+        {hover && (
+          <ShortcutCommand>
+            <MouseIcon /> {t('Hover')}
+          </ShortcutCommand>
+        )}
+        {keyName && (
+          <ShortcutCommand>
+            {keyName.length === 1 ? keyName.toUpperCase() : upperFirst(keyName.toLowerCase())}
+          </ShortcutCommand>
+        )}
+        {drag && (
+          <ShortcutCommand>
+            <MouseIcon /> {t('Drag')}
+          </ShortcutCommand>
+        )}
+        {click && (
+          <ShortcutCommand>
+            <MouseIcon /> {t('Click')}
+          </ShortcutCommand>
+        )}
+        {rightClick && (
+          <ShortcutCommand>
+            <MouseIcon /> {t('Right click')}
+          </ShortcutCommand>
+        )}
+        {dragNdrop && (
+          <ShortcutCommand>
+            <MouseIcon /> {t('Drag + Drop')}
+          </ShortcutCommand>
+        )}
+      </td>
+      <td className="fctl-shortcut__cell" role="cell">
+        {children}
+      </td>
+    </tr>
+  );
+};
+
+export default Shortcut;

package/src/components/common/CodeEditor/YamlEditor.css

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

package/src/components/common/CodeEditor/YamlEditor.tsx

@@ -0,0 +1,81 @@
+import * as React from 'react';
+import { Alert } from '@patternfly/react-core';
+import { CodeEditorProps as PfCodeEditorProps } from '@patternfly/react-code-editor';
+import { dump } from 'js-yaml';
+
+import { Device, Fleet, Repository } from '@flightctl/types';
+import { useTranslation } from '../../../hooks/useTranslation';
+import { useAppContext } from '../../../hooks/useAppContext';
+import YamlEditorBase from './YamlEditorBase';
+
+import './YamlEditor.css';
+
+type FlightCtlYamlResource = Fleet | Device | Repository;
+
+type YamlEditorProps<R extends FlightCtlYamlResource> = Partial<Omit<PfCodeEditorProps, 'ref' | 'code'>> & {
+  /** FlightCtl resource to display in the editor. */
+  apiObj: R;
+  /** Filename to use when YAML is downloaded */
+  filename: string;
+  /** Function to reload the resource */
+  refetch: VoidFunction;
+};
+
+const convertObjToYAMLString = (obj: FlightCtlYamlResource) => {
+  let yaml = '';
+  if (obj) {
+    try {
+      yaml = dump(obj, { lineWidth: -1 });
+    } catch (e) {
+      yaml = `# Error converting object to YAML\n# ${e instanceof Error ? e.message : String(e)}`;
+    }
+  }
+  return yaml;
+};
+
+const YamlEditor = <R extends FlightCtlYamlResource>({ filename, apiObj, refetch }: YamlEditorProps<R>) => {
+  const [yaml, setYaml] = React.useState<string>(convertObjToYAMLString(apiObj));
+  const [resourceVersion, setResourceVersion] = React.useState<string>(apiObj.metadata.resourceVersion || '0');
+  const [doUpdate, setDoUpdate] = React.useState<boolean>(false);
+
+  const {
+    router: { useNavigate },
+  } = useAppContext();
+  const navigate = useNavigate();
+
+  const hasChanged = resourceVersion !== apiObj.metadata.resourceVersion;
+
+  React.useEffect(() => {
+    if (doUpdate) {
+      setYaml(convertObjToYAMLString(apiObj));
+      setResourceVersion(apiObj.metadata.resourceVersion || '0');
+      setDoUpdate(false);
+    }
+  }, [doUpdate, apiObj]);
+
+  const { t } = useTranslation();
+
+  return (
+    <div className="fctl-yaml-editor">
+      <YamlEditorBase
+        filename={filename}
+        code={yaml}
+        onCancel={() => {
+          navigate('../.');
+        }}
+        onReload={() => {
+          void refetch();
+          setDoUpdate(true);
+        }}
+      />
+
+      {hasChanged && (
+        <Alert isInline variant="info" title={t('This object has been updated.')}>
+          {t('Click reload to see the new version.')}
+        </Alert>
+      )}
+    </div>
+  );
+};
+
+export default YamlEditor;

package/src/components/common/CodeEditor/YamlEditorBase.css

@@ -0,0 +1,3 @@
+.fctl-yaml-editor-base__action-group {
+  --pf-v5-c-form__group--m-action--MarginTop: 0;
+}