@flightctl/ui-components 1.0.2 → 1.1.0-rc4

package/src/components/charts/DonutChart.css

@@ -1,15 +1,15 @@
 .fctl-charts__donut {
-    display: flex;
-    justify-content: center;
+  display: flex;
+  justify-content: center;
 }
 
 .fctl-charts__donut-container {
-    width: 100%;
-    height: 100%;
+  width: 100%;
+  height: 100%;
 }
 
 .fctl-charts__title {
-    height: 100%;
-    color: var(--pf-v5-global--Color--200);
-    font-size: 14px;
+  height: 100%;
+  color: var(--pf-t--global--text--color--subtle);
+  font-size: 0.85rem;
 }

package/src/components/charts/DonutChart.tsx

@@ -1,6 +1,6 @@
-import { ChartContainer, ChartDonut } from '@patternfly/react-charts';
-import { Flex, FlexItem, Stack, StackItem, Text, TextContent, TextVariants } from '@patternfly/react-core';
 import * as React from 'react';
+import { ChartContainer, ChartDonut } from '@patternfly/react-charts/victory';
+import { Content, ContentVariants, Flex, FlexItem, Stack, StackItem } from '@patternfly/react-core';
 import { Link, LinkProps } from '../../hooks/useNavigate';
 import LabelWithHelperText from '../common/WithHelperText';
 import { useTranslation } from '../../hooks/useTranslation';
@@ -16,6 +16,9 @@ export type Data = {
   tooltip: string;
 };
 
+const chartWidth = 230;
+const chartHeight = 230;
+
 const Legend = ({ rows }: { rows: Data[][] }) => {
   return (
     <Stack>
@@ -74,36 +77,38 @@ const DonutChart = ({ data, title, helperText }: { data: Data[]; title: string;
       alignItems={{ default: 'alignItemsCenter' }}
     >
       <FlexItem className="fctl-charts__donut">
-        <div style={{ height: '230px', width: '230px' }}>
-          <ChartContainer className="fctl-charts__donut-container">
-            <foreignObject x="0" y="0" width="230px" height="230px">
-              <Flex
-                alignItems={{ default: 'alignItemsCenter' }}
-                justifyContent={{ default: 'justifyContentCenter' }}
-                alignContent={{ default: 'alignContentCenter' }}
-                className="fctl-charts__title"
-              >
-                {helperText ? <LabelWithHelperText label={title} content={helperText} /> : title}
-              </Flex>
-            </foreignObject>
-            <ChartDonut
-              ariaDesc={title}
-              ariaTitle={title}
-              constrainToVisibleArea
-              colorScale={isEmpty ? [getDefaultStatusColor('unknown')] : data.map((datum) => datum.color)}
-              data={isEmpty ? [{ y: 100 }] : data}
-              name={title}
-              standalone={false}
-              labels={isEmpty ? [] : data.map((datum) => datum.tooltip)}
-            />
-          </ChartContainer>
-        </div>
+        <ChartContainer
+          className="fctl-charts__donut-container"
+          width={chartWidth}
+          height={chartHeight}
+          role="img"
+          aria-label={title}
+        >
+          <foreignObject x="0" y="0" width={chartWidth} height={chartHeight}>
+            <Flex
+              alignItems={{ default: 'alignItemsCenter' }}
+              justifyContent={{ default: 'justifyContentCenter' }}
+              alignContent={{ default: 'alignContentCenter' }}
+              className="fctl-charts__title"
+            >
+              {helperText ? <LabelWithHelperText label={title} content={helperText} /> : title}
+            </Flex>
+          </foreignObject>
+          <ChartDonut
+            ariaDesc={title}
+            ariaTitle={title}
+            constrainToVisibleArea
+            colorScale={isEmpty ? [getDefaultStatusColor('unknown')] : data.map((datum) => datum.color)}
+            data={isEmpty ? [{ y: 100 }] : data}
+            name={title}
+            standalone={false}
+            labels={isEmpty ? [] : data.map((datum) => datum.tooltip)}
+          />
+        </ChartContainer>
       </FlexItem>
       <FlexItem>
         {isEmpty ? (
-          <TextContent>
-            <Text component={TextVariants.small}>{t('No devices')}</Text>
-          </TextContent>
+          <Content component={ContentVariants.small}>{t('No devices')}</Content>
         ) : (
           <Legend rows={[firstRow, secondRow]} />
         )}

package/src/components/common/AccessDenied.tsx

@@ -1,13 +1,12 @@
 import * as React from 'react';
 import { useTranslation } from '../../hooks/useTranslation';
-import { EmptyState, EmptyStateBody, EmptyStateHeader, PageSection } from '@patternfly/react-core';
+import { EmptyState, EmptyStateBody, PageSection } from '@patternfly/react-core';
 
 const AccessDenied = () => {
   const { t } = useTranslation();
   return (
-    <PageSection variant="light">
-      <EmptyState>
-        <EmptyStateHeader titleText={t('Restricted Access')} headingLevel="h4" />
+    <PageSection hasBodyWrapper={false}>
+      <EmptyState headingLevel="h4" titleText={t('Restricted Access')}>
         <EmptyStateBody>{t("You don't have access to this section.")}</EmptyStateBody>
       </EmptyState>
     </PageSection>

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

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

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

@@ -7,6 +7,6 @@
   --vscode-editorGutter-background: #f5f5f5;
 }
 
-.pf-v5-theme-dark .fctl-yaml-editor .monaco-editor .margin {
+.pf-v6-theme-dark .fctl-yaml-editor .monaco-editor .margin {
   --vscode-editorGutter-background: #292e34;
 }

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

@@ -6,6 +6,7 @@ import { compare } from 'fast-json-patch';
 import type * as monacoEditor from 'monaco-editor/esm/vs/editor/editor.api';
 
 import { AuthProvider, Device, Fleet, PatchRequest, Repository, ResourceKind } from '@flightctl/types';
+import { ImageBuild } from '@flightctl/types/imagebuilder';
 import { fromAPILabel } from '../../../utils/labels';
 import { getLabelPatches } from '../../../utils/patch';
 import { getErrorMessage, isResourceVersionTestFailure } from '../../../utils/error';
@@ -16,7 +17,7 @@ import YamlEditorBase from './YamlEditorBase';
 
 import './YamlEditor.css';
 
-type FlightCtlYamlResource = Fleet | Device | Repository | AuthProvider;
+type FlightCtlYamlResource = Fleet | Device | Repository | AuthProvider | ImageBuild;
 
 type YamlEditorProps<R extends FlightCtlYamlResource> = Partial<Omit<PfCodeEditorProps, 'ref' | 'code'>> & {
   /** FlightCtl resource to display in the editor. */
@@ -204,7 +205,7 @@ const YamlEditor = <R extends FlightCtlYamlResource>({
           navigate('../.');
         }}
         onReload={() => {
-          void refetch();
+          refetch();
           setIsSavedSuccessfully(false);
           setSaveError(undefined);
           setDoUpdate(true);

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

@@ -1,3 +1,9 @@
 .fctl-yaml-editor-base__action-group {
-  --pf-v5-c-form__group--m-action--MarginTop: 0;
+  /* ActionGroup is correctly placed without extra margin */
+  --pf-v6-c-form__group--m-action--MarginBlockStart: 0;
+}
+
+.fctl-yaml-editor-base__action-group .pf-v6-c-form__actions {
+  /* Provide a separation to the "save success/error" alert after modifying the YAML */
+  --pf-v6-c-form__actions--MarginBlockEnd: 1.5rem;
 }

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as monaco from 'monaco-editor';
 import { loader } from '@monaco-editor/react';
-import { ActionGroup, Button } from '@patternfly/react-core';
+import { ActionGroup, Button, Tooltip } from '@patternfly/react-core';
 import { CodeEditor, Language } from '@patternfly/react-code-editor';
 import { DownloadIcon } from '@patternfly/react-icons/dist/js/icons/download-icon';
 import { saveAs } from 'file-saver';
@@ -12,7 +12,6 @@ import FlightCtlForm from '../../form/FlightCtlForm';
 import { useTranslation } from '../../../hooks/useTranslation';
 import { useThemePreferences } from '../../../hooks/useThemePreferences';
 // TODO add useShortcutPopover when adding saving capabilities to the YAML editor
-import WithTooltip from '../WithTooltip';
 import { defineConsoleThemes } from './CodeEditorTheme';
 
 import './YamlEditorBase.css';
@@ -46,6 +45,7 @@ const YamlEditorBase = ({
 }: YamlEditorBaseProps) => {
   const { t } = useTranslation();
   const monacoRef = React.useRef<typeof monacoEditor | null>(null);
+  const saveButtonRef = React.useRef<HTMLButtonElement>(null);
   const { resolvedTheme } = useThemePreferences();
 
   const [editorMounted, setEditorMounted] = React.useState(false);
@@ -119,8 +119,10 @@ const YamlEditorBase = ({
         />
         <ActionGroup className="fctl-yaml-editor-base__action-group">
           {onSave && (
-            <WithTooltip showTooltip={!!disabledEditReason} content={disabledEditReason}>
+            <>
+              {disabledEditReason && <Tooltip content={disabledEditReason} triggerRef={saveButtonRef} />}
               <Button
+                ref={saveButtonRef}
                 variant="primary"
                 aria-label={t('Save')}
                 onClick={handleSave}
@@ -129,7 +131,7 @@ const YamlEditorBase = ({
               >
                 {t('Save')}
               </Button>
-            </WithTooltip>
+            </>
           )}
           {onReload && (
             <Button variant="secondary" aria-label={t('Reload')} onClick={onReload}>
@@ -143,7 +145,7 @@ const YamlEditorBase = ({
             icon={<DownloadIcon />}
             type="submit"
             variant="secondary"
-            className="pf-v5-u-ml-auto hidden-sm hidden-xs"
+            className="pf-v6-u-ml-auto"
             aria-label={t('Download')}
             onClick={downloadYaml}
           >

package/src/components/common/CopyButton.tsx

@@ -13,18 +13,36 @@ interface CopyButtonProps {
 const CopyButton = ({ ariaLabel, text, variant }: CopyButtonProps) => {
   const { t } = useTranslation();
 
+  const [copied, setCopied] = React.useState(false);
+
   const onCopy = () => {
     void navigator.clipboard.writeText(text);
+    setCopied(true);
   };
 
+  React.useEffect(() => {
+    let timeout: ReturnType<typeof setTimeout> | undefined;
+    if (copied) {
+      timeout = setTimeout(() => {
+        setCopied(false);
+      }, 1000);
+    }
+    return () => {
+      if (timeout) {
+        clearTimeout(timeout);
+      }
+    };
+  }, [copied]);
+
   return (
-    <Tooltip content={ariaLabel || t('Copy text')}>
+    <Tooltip content={copied ? t('Copied!') : ariaLabel || t('Copy text')}>
       <Button
         variant={variant || 'plain'}
         isInline={variant === 'link'}
+        onClick={onCopy}
         icon={
           <Icon size="sm">
-            <CopyIcon onClick={onCopy} />
+            <CopyIcon />
           </Icon>
         }
         aria-label={ariaLabel || t('Copy text')}

package/src/components/common/EditableLabelControl.tsx

@@ -54,7 +54,7 @@ const EditableLabelControl = ({
     <Button
       aria-label={addButtonText || t('Add label')}
       variant="link"
-      className="pf-v5-u-ml-xs"
+      className="pf-v6-u-ml-xs"
       isInline
       isDisabled={!isEditable}
       onClick={() => {

package/src/components/common/FlightCtlWizardFooter.tsx

@@ -0,0 +1,95 @@
+import * as React from 'react';
+import { FormikErrors, useFormikContext } from 'formik';
+import {
+  ActionList,
+  ActionListGroup,
+  ActionListItem,
+  Button,
+  // eslint-disable-next-line no-restricted-imports
+  WizardFooterWrapper,
+  useWizardContext,
+} from '@patternfly/react-core';
+
+import { useTranslation } from '../../hooks/useTranslation';
+import { useNavigate } from '../../hooks/useNavigate';
+
+export type FlightCtlWizardFooterProps<T extends Record<string, unknown>> = {
+  firstStepId: string;
+  submitStepId: string;
+  validateStep: (activeStepId: string, errors: FormikErrors<T>, values: T) => boolean;
+  isReadOnly?: boolean;
+  /** Text for the primary button when it will actually perform a save operation */
+  saveButtonText?: string;
+};
+
+const FlightCtlWizardFooter = <T extends Record<string, unknown>>({
+  firstStepId,
+  submitStepId,
+  validateStep,
+  isReadOnly = false,
+  saveButtonText,
+}: FlightCtlWizardFooterProps<T>) => {
+  const { t } = useTranslation();
+  const { goToNextStep, goToPrevStep, activeStep } = useWizardContext();
+  const { submitForm, isSubmitting, errors, values } = useFormikContext<T>();
+  const buttonRef = React.useRef<HTMLButtonElement>(null);
+  const navigate = useNavigate();
+
+  const isSubmitStep = activeStep.id === submitStepId;
+  const stepValid = validateStep(String(activeStep.id), errors, values);
+
+  const onMoveNext = () => {
+    goToNextStep();
+    // Blur the button, otherwise it keeps the focus from the previous click
+    buttonRef?.current?.blur();
+  };
+
+  let primaryBtn: React.ReactNode;
+  if (isSubmitStep && !isReadOnly) {
+    primaryBtn = (
+      <Button variant="primary" onClick={submitForm} isDisabled={isSubmitting} isLoading={isSubmitting}>
+        {saveButtonText || t('Save')}
+      </Button>
+    );
+  } else if (isSubmitStep) {
+    // Read-only "Review" step
+    primaryBtn = (
+      <Button variant="primary" onClick={() => navigate(-1)}>
+        {t('Close')}
+      </Button>
+    );
+  } else {
+    primaryBtn = (
+      <Button variant="primary" onClick={onMoveNext} isDisabled={!isReadOnly && !stepValid} ref={buttonRef}>
+        {t('Next')}
+      </Button>
+    );
+  }
+  return (
+    <WizardFooterWrapper>
+      <ActionList>
+        <ActionListGroup>
+          <ActionListItem>
+            <Button
+              variant="secondary"
+              onClick={goToPrevStep}
+              isDisabled={String(activeStep.id) === firstStepId || isSubmitting}
+            >
+              {t('Back')}
+            </Button>
+          </ActionListItem>
+          <ActionListItem>{primaryBtn}</ActionListItem>
+        </ActionListGroup>
+        <ActionListGroup>
+          <ActionListItem>
+            <Button variant="link" onClick={() => navigate(-1)} isDisabled={isSubmitting}>
+              {t('Cancel')}
+            </Button>
+          </ActionListItem>
+        </ActionListGroup>
+      </ActionList>
+    </WizardFooterWrapper>
+  );
+};
+
+export default FlightCtlWizardFooter;

package/src/components/common/LeaveFormConfirmation.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
-import { Button, Text, TextContent } from '@patternfly/react-core';
-import { Modal, ModalBody, ModalFooter, ModalHeader } from '@patternfly/react-core/next';
+import { Button, Content, Modal, ModalBody, ModalFooter, ModalHeader } from '@patternfly/react-core';
 
 import { Blocker, BlockerFunction } from 'react-router-dom';
 import { useFormikContext } from 'formik';
@@ -19,9 +18,9 @@ const ConfirmNavigationDialog = ({ blocker }: { blocker: Blocker }) => {
     <Modal isOpen variant="small">
       <ModalHeader title={t('There are unsaved changes')} titleIconVariant="warning" />
       <ModalBody>
-        <TextContent>
-          <Text>{t('Are you sure you want to leave the current page? Unsaved changes will be lost.')}</Text>
-        </TextContent>
+        <Content component="p">
+          {t('Are you sure you want to leave the current page? Unsaved changes will be lost.')}
+        </Content>
       </ModalBody>
       <ModalFooter>
         <Button

package/src/components/common/OrganizationGuard.tsx

@@ -3,6 +3,7 @@ import { Organization, OrganizationList } from '@flightctl/types';
 import { useAppContext } from '../../hooks/useAppContext';
 import { getErrorMessage } from '../../utils/error';
 import { getCurrentOrganizationId, storeCurrentOrganizationId } from '../../utils/organizationStorage';
+import { showSpinnerBriefly } from '../../utils/time';
 
 interface OrganizationContextType {
   currentOrganization?: Organization;
@@ -96,7 +97,7 @@ const OrganizationGuard = ({ children }: React.PropsWithChildren) => {
     async (addDelay: number = 0) => {
       setIsReloading(true);
       try {
-        await new Promise((resolve) => setTimeout(resolve, addDelay));
+        await showSpinnerBriefly(addDelay);
         await fetchOrganizations();
       } finally {
         setIsReloading(false);

package/src/components/common/OrganizationSelector.tsx

@@ -9,20 +9,21 @@ import {
   Card,
   CardBody,
   CardTitle,
+  Content,
   Flex,
   FlexItem,
   Menu,
   MenuContent,
   MenuItem,
   MenuList,
+  Modal,
+  ModalBody,
+  ModalHeader,
   PageSection,
   Stack,
   StackItem,
-  Text,
-  TextContent,
   Title,
 } from '@patternfly/react-core';
-import { Modal, ModalBody, ModalHeader } from '@patternfly/react-core/next';
 
 import { Organization } from '@flightctl/types';
 import { useTranslation } from '../../hooks/useTranslation';
@@ -56,13 +57,11 @@ const OrganizationSelectorContent = ({
   return (
     <Stack hasGutter>
       <StackItem>
-        <TextContent>
-          <Text>
-            {isFirstLogin
-              ? t('You have access to multiple organizations. Please select one to continue.')
-              : t('Please select an organization to continue. This will refresh the application.')}
-          </Text>
-        </TextContent>
+        <Content component="p">
+          {isFirstLogin
+            ? t('You have access to multiple organizations. Please select one to continue.')
+            : t('Please select an organization to continue. This will refresh the application.')}
+        </Content>
       </StackItem>
       {organizations.length > 0 && (
         <StackItem>
@@ -115,7 +114,7 @@ const OrganizationSelectorCustomModal = (props: OrganizationSelectorContentProps
   const { t } = useTranslation();
 
   return (
-    <PageSection variant="light">
+    <PageSection hasBodyWrapper={false}>
       <Bullseye>
         <Card isLarge>
           <CardTitle>
@@ -186,41 +185,48 @@ const OrganizationSelector = ({ onClose, isFirstLogin = true }: OrganizationSele
 
   if (selectionError) {
     return (
-      <PageSection variant="light">
+      <PageSection hasBodyWrapper={false}>
         <Bullseye>
           <Alert variant="danger" title={t('Unable to log in to the application')} isInline>
-            <TextContent>
+            <Content>
               {isEmptyOrganizations ? (
                 <>
-                  <Text>{t('You do not have access to any organizations.')}</Text>
-                  <Text>{t('Please contact your administrator to be granted access to an organization.')}</Text>
+                  <Content component="p">{t('You do not have access to any organizations.')}</Content>
+                  <Content component="p">
+                    {t('Please contact your administrator to be granted access to an organization.')}
+                  </Content>
+                  <Content component="p">
+                    {t('You will need to log out and log in again to access the application.')}
+                  </Content>
                 </>
               ) : (
                 <>
-                  <Text>
+                  <Content component="p">
                     {t('We cannot log you in as we could not determine what organizations you have access to.')}
-                  </Text>
-                  <Text>
+                  </Content>
+                  <Content component="p">
                     {t('Please try refreshing the page. If the problem persists, contact your administrator.')}
-                  </Text>
-                  <Text component="pre">
+                  </Content>
+                  <Content component="pre">
                     <details>
                       <summary>{t('Error details')}:</summary>
                       {selectionError}
                     </details>
-                  </Text>
+                  </Content>
                 </>
               )}
-            </TextContent>
-            <ActionList className="pf-v5-u-mt-md">
-              <ActionListGroup>
-                <ActionListItem>
-                  <Button variant="primary" onClick={handleRefetch} isDisabled={isReloading}>
-                    {t('Reload organizations')}
-                  </Button>
-                </ActionListItem>
-              </ActionListGroup>
-            </ActionList>
+            </Content>
+            {!isEmptyOrganizations && (
+              <ActionList className="pf-v6-u-mt-md">
+                <ActionListGroup>
+                  <ActionListItem>
+                    <Button variant="primary" onClick={handleRefetch} isDisabled={isReloading}>
+                      {t('Reload organizations')}
+                    </Button>
+                  </ActionListItem>
+                </ActionListGroup>
+              </ActionList>
+            )}
           </Alert>
         </Bullseye>
       </PageSection>

package/src/components/common/PageNavigation.css

@@ -1,7 +1,6 @@
-.fctl-subnav_panel {
-  border-bottom: 1px solid var(--pf-v5-global--BorderColor--100);
-  --pf-v5-c-panel__main-body--PaddingTop: 0.6rem;
-  --pf-v5-c-panel__main-body--PaddingBottom: 0.6rem;
+.fctl-subnav_panel .pf-v6-c-panel__main-body {
+  padding-block-start: 0.5rem;
+  padding-block-end: 0;
 }
 
 .fctl-subnav_toolbar {

package/src/components/common/PageNavigation.tsx

@@ -19,6 +19,7 @@ import { useTranslation } from '../../hooks/useTranslation';
 import { ROUTE, useNavigate } from '../../hooks/useNavigate';
 import { useOrganizationGuardContext } from './OrganizationGuard';
 import OrganizationSelector from './OrganizationSelector';
+import LoginCommandModal from '../modals/LoginCommandModal/LoginCommandModal';
 import { RESOURCE, VERB } from '../../types/rbac';
 import { usePermissionsContext } from './PermissionsContext';
 import { useAppContext } from '../../hooks/useAppContext';
@@ -106,16 +107,10 @@ const PageNavigation = ({ showSettings = true }: { showSettings?: boolean }) =>
   const { checkPermissions } = usePermissionsContext();
   const [isAdmin] = checkPermissions([{ kind: RESOURCE.AUTH_PROVIDER, verb: VERB.CREATE }]);
   const [showOrganizationModal, setShowOrganizationModal] = React.useState(false);
+  const [showLoginCommandModal, setShowLoginCommandModal] = React.useState(false);
   const showOrganizationSelection = availableOrganizations.length > 1;
   const currentOrgDisplayName = currentOrganization?.spec?.displayName || currentOrganization?.metadata?.name || '';
 
-  // Show navigation bar if there's either org selection OR admin button to show
-  const shouldShowNavigation = showOrganizationSelection || isAdmin;
-
-  if (!shouldShowNavigation) {
-    return null;
-  }
-
   return (
     <>
       <Panel className="fctl-subnav_panel">
@@ -133,6 +128,17 @@ const PageNavigation = ({ showSettings = true }: { showSettings?: boolean }) =>
                     />
                   </ToolbarItem>
                 )}
+                <ToolbarItem>
+                  <Tooltip content={t('Copy login command')}>
+                    <Button
+                      variant="link"
+                      aria-label={t('Copy login command')}
+                      onClick={() => setShowLoginCommandModal(true)}
+                    >
+                      {t('Copy login command')}
+                    </Button>
+                  </Tooltip>
+                </ToolbarItem>
                 {isAdmin && showSettings && (
                   <ToolbarItem>
                     <Tooltip content={t('Manage authentication providers')}>
@@ -165,6 +171,14 @@ const PageNavigation = ({ showSettings = true }: { showSettings?: boolean }) =>
           }}
         />
       )}
+
+      {showLoginCommandModal && (
+        <LoginCommandModal
+          onClose={() => {
+            setShowLoginCommandModal(false);
+          }}
+        />
+      )}
     </>
   );
 };

package/src/components/common/ResourceLink.css

@@ -12,7 +12,7 @@
   overflow-x: hidden;
 }
 
-.fctl-resource-link .pf-v5-c-button {
+.fctl-resource-link .pf-v6-c-button {
   /* The copy name button is hidden by default */
   clip: rect(0 0 0 0);
   clip-path: inset(50%);
@@ -20,7 +20,7 @@
   white-space: nowrap;
 }
 
-.fctl-resource-link:hover .pf-v5-c-button {
+.fctl-resource-link:hover .pf-v6-c-button {
   /* Makes the copy name button visible when hovering over the name */
   clip: initial;
   clip-path: initial;