@flightctl/ui-components 0.7.2 → 0.8.0-rc2

package/src/components/Masthead/UserPreferencesModal.tsx

@@ -1,22 +1,12 @@
 import * as React from 'react';
 import { TFunction } from 'i18next';
-import {
-  Button,
-  FormGroup,
-  MenuToggle,
-  MenuToggleElement,
-  Modal,
-  Select,
-  SelectOption,
-  Stack,
-  StackItem,
-} from '@patternfly/react-core';
+import { Button, FormGroup, MenuToggle, MenuToggleElement, Select, SelectOption } from '@patternfly/react-core';
+import { Modal, ModalBody, ModalFooter, ModalHeader } from '@patternfly/react-core/next';
 
 import { Theme } from '../../hooks/useThemePreferences';
 import { useTranslation } from '../../hooks/useTranslation';
-import FlightCtlActionGroup from '../form/FlightCtlActionGroup';
-import FlightCtlForm from '../form/FlightCtlForm';
 import { UserPreferencesContext } from './UserPreferencesProvider';
+import FlightCtlForm from '../form/FlightCtlForm';
 
 const getThemeLabels = (t: TFunction): { [key in Theme]: string } => ({
   system: t('System default'),
@@ -30,54 +20,51 @@ type UserPreferencesModalProps = {
 
 const UserPreferencesModal: React.FC<UserPreferencesModalProps> = ({ onClose }) => {
   const { t } = useTranslation();
-  const { theme, setTheme } = React.useContext(UserPreferencesContext);
+  const { userTheme, setUserTheme } = React.useContext(UserPreferencesContext);
 
   const themeLabels = getThemeLabels(t);
 
   const [themeExpanded, setThemeExpanded] = React.useState(false);
   return (
-    <Modal title={t('User preferences')} isOpen variant="small" onClose={onClose}>
-      <Stack hasGutter>
-        <StackItem>
-          <FlightCtlForm>
-            <FormGroup label={t('Theme')}>
-              <Select
-                toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
-                  <MenuToggle
-                    ref={toggleRef}
-                    style={{ width: '100%' }}
-                    onClick={() => setThemeExpanded(true)}
-                    isExpanded={themeExpanded}
-                  >
-                    {themeLabels[theme]}
-                  </MenuToggle>
-                )}
-                selected={theme}
-                onSelect={(_, value) => {
-                  setTheme(value as Theme);
-                  setThemeExpanded(false);
-                }}
-                aria-label="theme"
-                isOpen={themeExpanded}
-                onOpenChange={setThemeExpanded}
-              >
-                {Object.keys(themeLabels).map((theme) => (
-                  <SelectOption key={theme} value={theme}>
-                    {themeLabels[theme]}
-                  </SelectOption>
-                ))}
-              </Select>
-            </FormGroup>
-          </FlightCtlForm>
-        </StackItem>
-        <StackItem>
-          <FlightCtlActionGroup>
-            <Button variant="secondary" onClick={onClose}>
-              {t('Close')}
-            </Button>
-          </FlightCtlActionGroup>
-        </StackItem>
-      </Stack>
+    <Modal isOpen variant="small" onClose={onClose}>
+      <ModalHeader title={t('User preferences')} />
+      <ModalBody>
+        <FlightCtlForm>
+          <FormGroup label={t('Theme')}>
+            <Select
+              toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+                <MenuToggle
+                  ref={toggleRef}
+                  style={{ width: '100%' }}
+                  onClick={() => setThemeExpanded(true)}
+                  isExpanded={themeExpanded}
+                >
+                  {themeLabels[userTheme]}
+                </MenuToggle>
+              )}
+              selected={userTheme}
+              onSelect={(_, value) => {
+                setUserTheme(value as Theme);
+                setThemeExpanded(false);
+              }}
+              aria-label="theme"
+              isOpen={themeExpanded}
+              onOpenChange={setThemeExpanded}
+            >
+              {Object.keys(themeLabels).map((theme) => (
+                <SelectOption key={theme} value={theme}>
+                  {themeLabels[theme]}
+                </SelectOption>
+              ))}
+            </Select>
+          </FormGroup>
+        </FlightCtlForm>
+      </ModalBody>
+      <ModalFooter>
+        <Button variant="secondary" onClick={onClose}>
+          {t('Close')}
+        </Button>
+      </ModalFooter>
     </Modal>
   );
 };

package/src/components/Masthead/UserPreferencesProvider.tsx

@@ -1,12 +1,16 @@
 import * as React from 'react';
-import { Theme, useThemePreferences } from '../../hooks/useThemePreferences';
+import { ResolvedTheme, Theme, useThemePreferences } from '../../hooks/useThemePreferences';
 
-export const UserPreferencesContext = React.createContext<{
-  theme: Theme;
-  setTheme: (theme: Theme) => void;
-}>({
-  theme: 'system',
-  setTheme: () => {},
+type ThemeContext = {
+  userTheme: Theme; // Theme setting chosen by the user
+  resolvedTheme: ResolvedTheme; // Resolved theme based on user theme and system settings
+  setUserTheme: (theme: Theme) => void;
+};
+
+export const UserPreferencesContext = React.createContext<ThemeContext>({
+  userTheme: 'system',
+  resolvedTheme: 'dark',
+  setUserTheme: () => {},
 });
 
 export type UserPreferencesProviderProps = {
@@ -14,13 +18,14 @@ export type UserPreferencesProviderProps = {
 };
 
 export const UserPreferencesProvider: React.FC<UserPreferencesProviderProps> = ({ children }) => {
-  const { theme, setTheme } = useThemePreferences();
+  const { userTheme, resolvedTheme, setUserTheme } = useThemePreferences();
 
   return (
     <UserPreferencesContext.Provider
       value={{
-        theme,
-        setTheme,
+        userTheme,
+        resolvedTheme,
+        setUserTheme,
       }}
     >
       {children}

package/src/components/Repository/CreateRepository/CreateRepositoryForm.tsx

@@ -7,10 +7,11 @@ import {
   FormGroup,
   FormSection,
   Grid,
-  Modal,
   Split,
   SplitItem,
 } from '@patternfly/react-core';
+import { Modal, ModalBody, ModalFooter, ModalHeader } from '@patternfly/react-core/next';
+
 import { Formik, useFormikContext } from 'formik';
 import * as Yup from 'yup';
 import { Trans } from 'react-i18next';
@@ -32,7 +33,6 @@ import {
 } from './utils';
 import { RepoSpecType, Repository, ResourceSync } from '@flightctl/types';
 import { getErrorMessage } from '../../../utils/error';
-import { DEMO_REPOSITORY_URL } from '../../../links';
 import LeaveFormConfirmation from '../../common/LeaveFormConfirmation';
 import LabelWithHelperText, { FormGroupWithHelperText } from '../../common/WithHelperText';
 import NameField from '../../form/NameField';
@@ -42,6 +42,7 @@ import RadioField from '../../form/RadioField';
 import TextField from '../../form/TextField';
 import FlightCtlForm from '../../form/FlightCtlForm';
 import { getDnsSubdomainValidations } from '../../form/validations';
+import { DEMO_REPOSITORY_URL } from '../../../hooks/useAppLinks';
 import { useAccessReview } from '../../../hooks/useAccessReview';
 import { RESOURCE, VERB } from '../../../types/rbac';
 
@@ -199,12 +200,13 @@ const RepositoryType = ({ isEdit }: { isEdit?: boolean }) => {
         </SplitItem>
       </Split>
       {showConfirmChangeType && (
-        <Modal
-          title={'Change repository type?'}
-          titleIconVariant="warning"
-          variant="small"
-          isOpen
-          actions={[
+        <Modal variant="small" isOpen>
+          <ModalHeader title={'Change repository type?'} titleIconVariant="warning" />
+          <ModalBody>
+            {t('Switching the repository type will cause some data to be lost.')}{' '}
+            {t('Are you sure you want to change the repository type?')}
+          </ModalBody>
+          <ModalFooter>
             <Button
               key="change"
               variant={ButtonVariant.primary}
@@ -214,7 +216,7 @@ const RepositoryType = ({ isEdit }: { isEdit?: boolean }) => {
               }}
             >
               {t('Change')}
-            </Button>,
+            </Button>
             <Button
               key="cancel"
               variant="link"
@@ -223,11 +225,8 @@ const RepositoryType = ({ isEdit }: { isEdit?: boolean }) => {
               }}
             >
               {t('Cancel')}
-            </Button>,
-          ]}
-        >
-          {t('Switching the repository type will cause some data to be lost.')}
-          {t('Are you sure you want to change the repository type?')}
+            </Button>
+          </ModalFooter>
         </Modal>
       )}
     </>
@@ -261,7 +260,7 @@ export const RepositoryForm = ({ isEdit }: { isEdit?: boolean }) => {
   );
 };
 
-type CreateRepositoryFormContentProps = React.PropsWithChildren<Record<never, never>> &
+type CreateRepositoryFormContentProps = React.PropsWithChildren &
   Pick<CreateRepositoryFormProps, 'onClose'> & {
     isEdit: boolean;
     isReadOnly: boolean;

package/src/components/Repository/CreateRepository/utils.ts

@@ -17,7 +17,6 @@ import { API_VERSION } from '../../../constants';
 import { getErrorMessage } from '../../../utils/error';
 import { appendJSONPatch } from '../../../utils/patch';
 import { MAX_TARGET_REVISION_LENGTH, maxLengthString, validKubernetesDnsSubdomain } from '../../form/validations';
-import { DEMO_REPOSITORY_URL } from '../../../links';
 
 const MAX_PATH_LENGTH = 2048;
 const gitRepoUrlRegex = new RegExp(
@@ -25,7 +24,7 @@ const gitRepoUrlRegex = new RegExp(
 );
 const httpRepoUrlRegex = /^(http|https)/;
 const pathRegex = /\/.+/;
-const jwtTokenRegexp = /^[A-Za-z0-9-_=]+\.[A-Za-z0-9-_=]+\.?[A-Za-z0-9-_.+/=]*$/;
+const jwtTokenRegexp = /^[A-Za-z0-9-_]+\.[A-Za-z0-9-_]+\.[A-Za-z0-9-_]+$/;
 
 export const isHttpRepoSpec = (repoSpec: RepositorySpec): repoSpec is HttpRepoSpec =>
   !!(repoSpec['httpConfig'] || (repoSpec as HttpRepoSpec).validationSuffix);
@@ -441,7 +440,7 @@ export const repositorySchema =
             .matches(
               gitRepoUrlRegex,
               t('Enter a valid repository URL. Example: {{ demoRepositoryUrl }}', {
-                demoRepositoryUrl: DEMO_REPOSITORY_URL,
+                demoRepositoryUrl: 'https://github.com/flightctl/flightctl-demos',
               }),
             )
             .defined(t('Repository URL is required')),

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;
+}