Bug 2099923: Merge SSH access and SSH command

locales/en/plugin__kubevirt-plugin.json

@@ -561,7 +561,6 @@
   "Pod": "Pod",
   "Pod networking": "Pod networking",
   "Pod Networking": "Pod Networking",
-  "port: {{port}}": "port: {{port}}",
   "Preffered": "Preffered",
   "Primary Network": "Primary Network",
   "project": "project",
@@ -598,7 +597,6 @@
   "Remove": "Remove",
   "Requested of ": "Requested of ",
   "Required": "Required",
-  "Requires SSH service": "Requires SSH service",
   "Reset": "Reset",
   "Resource": "Resource",
   "Resource already selected": "Resource already selected",
@@ -650,6 +648,7 @@
   "Server": "Server",
   "Service Accounts": "Service Accounts",
   "Service name": "Service name",
+  "Service port: {{port}}": "Service port: {{port}}",
   "Services": "Services",
   "Set scheduling requirements and affect the ranking of the Node candidates for scheduling.": "Set scheduling requirements and affect the ranking of the Node candidates for scheduling.",
   "Settings": "Settings",
@@ -674,7 +673,6 @@
   "SSH access": "SSH access",
   "SSH Access": "SSH Access",
   "SSH access is using a node port. Node port requires additional port resources.": "SSH access is using a node port. Node port requires additional port resources.",
-  "SSH command": "SSH command",
   "SSH Key is invalid": "SSH Key is invalid",
   "SSH service disabled": "SSH service disabled",
   "Start": "Start",

src/utils/components/SSHAccess/SSHAccess.tsx

@@ -1,28 +1,39 @@
 import * as React from 'react';
 
 import { IoK8sApiCoreV1Service } from '@kubevirt-ui/kubevirt-api/kubernetes';
+import { V1VirtualMachineInstance } from '@kubevirt-ui/kubevirt-api/kubevirt';
 import { useKubevirtTranslation } from '@kubevirt-utils/hooks/useKubevirtTranslation';
 import { getSSHNodePort } from '@kubevirt-utils/utils/utils';
 
+import Loading from '../Loading/Loading';
+import UserCredentials from '../UserCredentials/UserCredentials';
+
 type SSHAccessProps = {
   sshService: IoK8sApiCoreV1Service;
+  vmi: V1VirtualMachineInstance;
+  sshServiceLoaded?: boolean;
 };
 
-const SSHAccess: React.FC<SSHAccessProps> = ({ sshService }) => {
+const SSHAccess: React.FC<SSHAccessProps> = ({ sshService, sshServiceLoaded, vmi }) => {
   const { t } = useKubevirtTranslation();
 
   const sshServiceNodePort = getSSHNodePort(sshService);
 
+  if (!sshServiceLoaded) return <Loading />;
+
   return (
-    <span data-test="details-item-ssh-access-port">
-      {sshService ? (
-        t('port: {{port}}', {
-          port: sshServiceNodePort,
-        })
-      ) : (
-        <span className="text-muted">{t('SSH service disabled')} </span>
-      )}
-    </span>
+    <>
+      <span data-test="details-item-ssh-access-port">
+        {sshService ? (
+          t('Service port: {{port}}', {
+            port: sshServiceNodePort,
+          })
+        ) : (
+          <span className="text-muted">{t('SSH service disabled')} </span>
+        )}
+      </span>
+      <UserCredentials vmi={vmi} sshService={sshService} />
+    </>
   );
 };
 

src/utils/components/UserCredentials/UserCredentials.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 
 import { IoK8sApiCoreV1Service } from '@kubevirt-ui/kubevirt-api/kubernetes';
 import { V1VirtualMachineInstance } from '@kubevirt-ui/kubevirt-api/kubevirt';
-import MutedTextSpan from '@kubevirt-utils/components/MutedTextSpan/MutedTextSpan';
 import { useKubevirtTranslation } from '@kubevirt-utils/hooks/useKubevirtTranslation';
 import { ClipboardCopy } from '@patternfly/react-core';
 
@@ -17,7 +16,7 @@ const UserCredentials: React.FC<UserCredentialsProps> = ({ vmi, sshService }) =>
   const { t } = useKubevirtTranslation();
   const { command, sshServiceRunning } = useSSHCommand(vmi, sshService);
 
-  if (!sshServiceRunning) return <MutedTextSpan text={t('Requires SSH service')} />;
+  if (!sshServiceRunning) return null;
 
   return (
     <ClipboardCopy

src/views/virtualmachines/details/tabs/details/components/VirtualMachineDescriptionItem/VirtualMachineDescriptionItem.tsx

@@ -31,6 +31,7 @@ type VirtualMachineDescriptionItemProps = {
   onEditClick?: () => void;
   isDisabled?: boolean;
   showEditOnTitle?: boolean;
+  editOnTitleJustify?: boolean;
   'data-test-id'?: string;
 };
 
@@ -45,6 +46,7 @@ const VirtualMachineDescriptionItem: React.FC<VirtualMachineDescriptionItemProps
   onEditClick,
   isDisabled,
   showEditOnTitle,
+  editOnTitleJustify = false,
   'data-test-id': testId,
 }) => {
   const { t } = useKubevirtTranslation();
@@ -106,7 +108,12 @@ const VirtualMachineDescriptionItem: React.FC<VirtualMachineDescriptionItemProps
   return (
     <DescriptionListGroup>
       <DescriptionListTermHelpText>
-        <Flex className="vm-description-item__title">
+        <Flex
+          className="vm-description-item__title"
+          justifyContent={{
+            default: editOnTitleJustify ? 'justifyContentSpaceBetween' : 'justifyContentFlexStart',
+          }}
+        >
           <FlexItem>{getItemHeader()}</FlexItem>
           {isEdit && showEditOnTitle && (
             <FlexItem>

src/views/virtualmachines/details/tabs/details/components/grid/leftGrid/VirtualMachineDetailsLeftGrid.tsx

@@ -129,6 +129,7 @@ const VirtualMachineDetailsLeftGrid: React.FC<VirtualMachineDetailsLeftGridProps
           breadcrumb="VirtualMachine.metadata.labels"
           isEdit
           showEditOnTitle
+          editOnTitleJustify
           onEditClick={() =>
             createModal(({ isOpen, onClose }) => (
               <LabelsModal

src/views/virtualmachines/details/tabs/details/components/grid/rightGrid/VirtualMachineDetailsRightGridLayout.tsx

@@ -113,6 +113,7 @@ const VirtualMachineDetailsRightGridLayout: React.FC<VirtualMachineDetailsRightG
         <VirtualMachineDescriptionItem
           descriptionData={vmDetailsRightGridObj?.sshAccess}
           isEdit={!!vmi}
+          showEditOnTitle
           onEditClick={() =>
             createModal(({ isOpen, onClose }) => (
               <SSHAccessModal
@@ -127,11 +128,6 @@ const VirtualMachineDetailsRightGridLayout: React.FC<VirtualMachineDetailsRightG
           descriptionHeader={t('SSH access')}
           data-test-id={`${vm?.metadata?.name}-ssh-access`}
         />
-        <VirtualMachineDescriptionItem
-          descriptionData={vmDetailsRightGridObj?.userCredentials}
-          descriptionHeader={t('SSH command')}
-          data-test-id={`${vm?.metadata?.name}-user-credentials`}
-        />
         <VirtualMachineDescriptionItem
           descriptionData={<HardwareDevices vm={vm} canEdit onSubmit={onSubmit} />}
           descriptionHeader={t('Hardware devices')}

src/views/virtualmachines/details/tabs/details/utils/gridHelper.tsx

@@ -7,11 +7,9 @@ import {
   V1VirtualMachineInstance,
   V1VirtualMachineInstanceGuestAgentInfo,
 } from '@kubevirt-ui/kubevirt-api/kubevirt';
-import Loading from '@kubevirt-utils/components/Loading/Loading';
 import MutedTextSpan from '@kubevirt-utils/components/MutedTextSpan/MutedTextSpan';
 import SSHAccess from '@kubevirt-utils/components/SSHAccess/SSHAccess';
 import { UseSSHServiceReturnType } from '@kubevirt-utils/components/SSHAccess/useSSHService';
-import UserCredentials from '@kubevirt-utils/components/UserCredentials/UserCredentials';
 import { getVMIIPAddresses, getVMIPod } from '@kubevirt-utils/resources/vmi';
 import { K8sResourceCommon, ResourceLink } from '@openshift-console/dynamic-plugin-sdk';
 
@@ -24,7 +22,6 @@ export type VirtualMachineDetailsRightGridLayoutPresentation = {
   hostname: React.ReactNode;
   timezone: React.ReactNode;
   node: React.ReactNode;
-  userCredentials: React.ReactNode;
   sshAccess: React.ReactNode;
 };
 
@@ -41,7 +38,6 @@ export const getStoppedVMRightGridPresentation = (
     hostname: NotAvailable,
     timezone: VirtualMachineIsNotRunning,
     node: NotAvailable,
-    userCredentials: VirtualMachineIsNotRunning,
     sshAccess: VirtualMachineIsNotRunning,
   };
 };
@@ -83,11 +79,6 @@ export const getRunningVMRightGridPresentation = (
       ? GuestAgentIsRequiredText
       : guestAgentData?.timezone?.split(',')[0],
     node: <ResourceLink kind={NodeModel.kind} name={nodeName} />,
-    userCredentials: sshServiceLoaded ? (
-      <UserCredentials vmi={vmi} sshService={sshService} />
-    ) : (
-      <Loading />
-    ),
-    sshAccess: sshServiceLoaded ? <SSHAccess sshService={sshService} /> : <Loading />,
+    sshAccess: <SSHAccess sshService={sshService} sshServiceLoaded={sshServiceLoaded} vmi={vmi} />,
   };
 };

src/views/virtualmachinesinstance/details/tabs/details/components/Details/Details.tsx

@@ -2,9 +2,7 @@ import * as React from 'react';
 
 import { VirtualMachineModelGroupVersionKind } from '@kubevirt-ui/kubevirt-api/console/models/VirtualMachineModel';
 import { V1VirtualMachine, V1VirtualMachineInstance } from '@kubevirt-ui/kubevirt-api/kubevirt';
-import Loading from '@kubevirt-utils/components/Loading/Loading';
 import useSSHService from '@kubevirt-utils/components/SSHAccess/useSSHService';
-import UserCredentials from '@kubevirt-utils/components/UserCredentials/UserCredentials';
 import { useKubevirtTranslation } from '@kubevirt-utils/hooks/useKubevirtTranslation';
 import { getMachineType } from '@kubevirt-utils/resources/vm';
 import { NO_DATA_DASH } from '@kubevirt-utils/resources/vm/utils/constants';
@@ -38,7 +36,7 @@ import Node from './Node/Node';
 import OperatingSystem from './OperatingSystem/OperatingSystem';
 import Owner from './Owner/Owner';
 import Pods from './Pods/Pods';
-import SSHDetails from './SSHAccess/SSHAccess';
+import SSHDetails from './SSHDetails/SSHDetails';
 import Timezone from './Timezone/Timezone';
 import WorkloadProfile from './WorkloadProfile/WorkloadProfile';
 
@@ -55,7 +53,7 @@ const Details: React.FC<DetailsProps> = ({ vmi, pathname }) => {
     name: vmi?.metadata?.name,
     namespace: vmi?.metadata?.namespace,
   });
-  const [sshService, sshServiceLoading] = useSSHService(vmi);
+  const [sshService, sshServiceLoaded] = useSSHService(vmi);
 
   return (
     <div>
@@ -66,7 +64,7 @@ const Details: React.FC<DetailsProps> = ({ vmi, pathname }) => {
         {t('VirtualMachineInstance Details')}
       </Title>
       <Grid hasGutter>
-        <GridItem span={6}>
+        <GridItem span={5}>
           <DescriptionList>
             <DescriptionListGroup>
               <Name name={vmi?.metadata?.name} />
@@ -109,7 +107,8 @@ const Details: React.FC<DetailsProps> = ({ vmi, pathname }) => {
             </DescriptionListGroup>
           </DescriptionList>
         </GridItem>
-        <GridItem span={6}>
+        <GridItem span={1}></GridItem>
+        <GridItem span={5}>
           <DescriptionList>
             <DescriptionListGroup>
               <DescriptionListTerm>{t('Status')}</DescriptionListTerm>
@@ -167,19 +166,9 @@ const Details: React.FC<DetailsProps> = ({ vmi, pathname }) => {
                 vmi={vmi}
                 vm={vm}
                 sshService={sshService}
-                sshServiceLoaded={sshServiceLoading}
+                sshServiceLoaded={sshServiceLoaded}
               />
             </DescriptionListGroup>
-            <DescriptionListGroup>
-              <DescriptionListTerm>{t('SSH command')}</DescriptionListTerm>
-              <DescriptionListDescription>
-                {sshServiceLoading ? (
-                  <UserCredentials sshService={sshService} vmi={vmi} />
-                ) : (
-                  <Loading />
-                )}
-              </DescriptionListDescription>
-            </DescriptionListGroup>
             <DescriptionListGroup>
               <DescriptionListTerm>{t('Hardware devices')}</DescriptionListTerm>
               <DescriptionListDescription>

src/views/virtualmachinesinstance/details/tabs/details/components/Details/SSHDetails/SSHDetails.tsx

@@ -0,0 +1,67 @@
+import * as React from 'react';
+
+import { IoK8sApiCoreV1Service } from '@kubevirt-ui/kubevirt-api/kubernetes';
+import { V1VirtualMachine, V1VirtualMachineInstance } from '@kubevirt-ui/kubevirt-api/kubevirt';
+import { useModal } from '@kubevirt-utils/components/ModalProvider/ModalProvider';
+import SSHAccess from '@kubevirt-utils/components/SSHAccess/SSHAccess';
+import SSHAccessModal from '@kubevirt-utils/components/SSHAccess/SSHAccessModal';
+import { useKubevirtTranslation } from '@kubevirt-utils/hooks/useKubevirtTranslation';
+import {
+  Button,
+  DescriptionListDescription,
+  DescriptionListTerm,
+  Flex,
+  FlexItem,
+} from '@patternfly/react-core';
+import { PencilAltIcon } from '@patternfly/react-icons';
+
+type SSHDetailsProps = {
+  vmi: V1VirtualMachineInstance;
+  vm: V1VirtualMachine;
+  sshService: IoK8sApiCoreV1Service;
+  sshServiceLoaded: boolean;
+};
+
+const SSHDetails: React.FC<SSHDetailsProps> = ({ vmi, vm, sshService, sshServiceLoaded }) => {
+  const { t } = useKubevirtTranslation();
+  const { createModal } = useModal();
+
+  return (
+    <>
+      <DescriptionListTerm>
+        <Flex>
+          <FlexItem>{t('SSH access')}</FlexItem>
+          <FlexItem>
+            <Button
+              variant="link"
+              isInline
+              icon={
+                <PencilAltIcon className="co-icon-space-l co-icon-space-r pf-c-button-icon--plain" />
+              }
+              iconPosition={'right'}
+              onClick={() =>
+                createModal(({ isOpen, onClose }) => (
+                  <SSHAccessModal
+                    vmi={vmi}
+                    vm={vm}
+                    isOpen={isOpen}
+                    onClose={onClose}
+                    sshService={sshService}
+                  />
+                ))
+              }
+            >
+              {t('Edit')}
+            </Button>
+          </FlexItem>
+        </Flex>
+      </DescriptionListTerm>
+
+      <DescriptionListDescription className="SSHAccess--container">
+        <SSHAccess sshService={sshService} vmi={vmi} sshServiceLoaded={sshServiceLoaded} />
+      </DescriptionListDescription>
+    </>
+  );
+};
+
+export default SSHDetails;