Merge pull request #1154 from kubev2v/dont-show-ui-link-on-non-rhev

🧼 Move web ui link to a new details item

packages/forklift-console-plugin/locales/en/plugin__forklift-console-plugin.json

@@ -151,6 +151,7 @@
   "Error: this field must be set to a boolean value.": "Error: this field must be set to a boolean value.",
   "ESXi": "ESXi",
   "Expiration date": "Expiration date",
+  "External management system": "External management system",
   "Failed": "Failed",
   "False": "False",
   "Features": "Features",

packages/forklift-console-plugin/src/modules/Providers/views/details/components/DetailsSection/OVADetailsSection.tsx

@@ -7,7 +7,7 @@ import { DetailsItem } from '../../../../utils';
 
 import {
   CreatedAtDetailsItem,
-  NameAndUiLinkDetailsItem,
+  NameDetailsItem,
   NamespaceDetailsItem,
   OwnerDetailsItem,
   TypeDetailsItem,
@@ -30,7 +30,7 @@ export const OVADetailsSection: React.FC<DetailsSectionProps> = ({ data }) => {
 
       <DetailsItem title={''} content={''} />
 
-      <NameAndUiLinkDetailsItem resource={provider} />
+      <NameDetailsItem resource={provider} />
 
       <NamespaceDetailsItem resource={provider} />
 

packages/forklift-console-plugin/src/modules/Providers/views/details/components/DetailsSection/OpenshiftDetailsSection.tsx

@@ -8,7 +8,7 @@ import { DetailsItem } from '../../../../utils';
 import {
   CreatedAtDetailsItem,
   CredentialsDetailsItem,
-  NameAndUiLinkDetailsItem,
+  NameDetailsItem,
   NamespaceDetailsItem,
   OwnerDetailsItem,
   TransferNetworkDetailsItem,
@@ -32,7 +32,7 @@ export const OpenshiftDetailsSection: React.FC<DetailsSectionProps> = ({ data })
 
       <DetailsItem title={''} content={''} />
 
-      <NameAndUiLinkDetailsItem resource={provider} />
+      <NameDetailsItem resource={provider} />
 
       <NamespaceDetailsItem resource={provider} />
 

packages/forklift-console-plugin/src/modules/Providers/views/details/components/DetailsSection/OpenstackDetailsSection.tsx

@@ -8,7 +8,7 @@ import { DetailsItem } from '../../../../utils';
 import {
   CreatedAtDetailsItem,
   CredentialsDetailsItem,
-  NameAndUiLinkDetailsItem,
+  NameDetailsItem,
   NamespaceDetailsItem,
   OwnerDetailsItem,
   TypeDetailsItem,
@@ -29,7 +29,7 @@ export const OpenstackDetailsSection: React.FC<DetailsSectionProps> = ({ data })
 
       <DetailsItem title={''} content={''} />
 
-      <NameAndUiLinkDetailsItem resource={provider} />
+      <NameDetailsItem resource={provider} />
 
       <NamespaceDetailsItem resource={provider} />
 

packages/forklift-console-plugin/src/modules/Providers/views/details/components/DetailsSection/OvirtDetailsSection.tsx

@@ -1,41 +1,28 @@
 import React from 'react';
 import { useForkliftTranslation } from 'src/utils/i18n';
 
-import { V1beta1Provider } from '@kubev2v/types';
 import { DescriptionList } from '@patternfly/react-core';
 
 import { DetailsItem } from '../../../../utils';
 
 import {
   CreatedAtDetailsItem,
   CredentialsDetailsItem,
-  NameAndUiLinkDetailsItem,
+  ExternalManagementLinkDetailsItem,
+  NameDetailsItem,
   NamespaceDetailsItem,
   OwnerDetailsItem,
   TypeDetailsItem,
   URLDetailsItem,
 } from './components';
 import { DetailsSectionProps } from './DetailsSection';
+import { getOvirtProviderWebUILink } from './utils';
 
 export const OvirtDetailsSection: React.FC<DetailsSectionProps> = ({ data }) => {
   const { t } = useForkliftTranslation();
 
   const { provider, permissions } = data;
-
-  /**
-   * A function for auto calculating the RHV UI link.
-   * It extracts the provider's RHV UI link from the RHV URL by searching for the URL's path of
-   * '/ovirt-engine/api[/]' and cutting out the /api[/] path section.
-   * If RHV URL is invalid then an empty string is returned
-   */
-  const getProviderUiContent = (provider: V1beta1Provider): string => {
-    const uiLinkRegexp = new RegExp('(?<=ovirt-engine)\\/api(\\/)*$', 'g');
-    const regexpResult = uiLinkRegexp.exec(provider?.spec?.url);
-
-    return provider?.spec?.url && regexpResult
-      ? provider?.spec?.url.slice(0, uiLinkRegexp.lastIndex - regexpResult[0].length)
-      : '';
-  };
+  const webUILink = getOvirtProviderWebUILink(provider);
 
   return (
     <DescriptionList
@@ -45,15 +32,15 @@ export const OvirtDetailsSection: React.FC<DetailsSectionProps> = ({ data }) =>
     >
       <TypeDetailsItem resource={provider} />
 
-      <DetailsItem title={''} content={''} />
-
-      <NameAndUiLinkDetailsItem
+      <ExternalManagementLinkDetailsItem
         resource={provider}
         canPatch={permissions.canPatch}
         webUILinkText={t(`Red Hat Virtualization Manager UI`)}
-        webUILinkCalcVal={getProviderUiContent(provider)}
+        webUILink={webUILink}
       />
 
+      <NameDetailsItem resource={provider} />
+
       <NamespaceDetailsItem resource={provider} />
 
       <URLDetailsItem

packages/forklift-console-plugin/src/modules/Providers/views/details/components/DetailsSection/VSphereDetailsSection.tsx

@@ -8,7 +8,7 @@ import { DetailsItem } from '../../../../utils';
 import {
   CreatedAtDetailsItem,
   CredentialsDetailsItem,
-  NameAndUiLinkDetailsItem,
+  NameDetailsItem,
   NamespaceDetailsItem,
   OwnerDetailsItem,
   TypeDetailsItem,
@@ -37,7 +37,7 @@ export const VSphereDetailsSection: React.FC<DetailsSectionProps> = ({ data }) =
         crumbs={['Inventory', 'providers', `${provider.spec.type}`, '[UID]']}
       />
 
-      <NameAndUiLinkDetailsItem resource={provider} />
+      <NameDetailsItem resource={provider} />
 
       <NamespaceDetailsItem resource={provider} />
 

packages/forklift-console-plugin/src/modules/Providers/views/details/components/DetailsSection/components/ExternalManagementLinkDetailsItem.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import { EditProviderUIModal, useModal } from 'src/modules/Providers/modals';
+import { ForkliftTrans, useForkliftTranslation } from 'src/utils/i18n';
+
+import { ExternalLink } from '@kubev2v/common';
+import { DescriptionListDescription } from '@patternfly/react-core';
+
+import { DetailsItem } from '../../../../../utils';
+
+import { ProviderDetailsItemProps } from './ProviderDetailsItem';
+
+/**
+ * @typedef {Object} ExternalManagementLinkDetailsItemProps - extends ProviderDetailsItemProps
+ *
+ * @property {string} [webUILinkText - A label text to be displayed as a content.
+ * @property {string} [webUILink] - provider's management system external link.
+ */
+export interface ExternalManagementLinkDetailsItemProps extends ProviderDetailsItemProps {
+  webUILinkText?: string;
+  webUILink?: string;
+}
+
+/**
+ * Component for displaying the provider management system external link.
+ *
+ * @component
+ * @param {DetailsItemProps} props - The props of the details item.
+ */
+export const ExternalManagementLinkDetailsItem: React.FC<
+  ExternalManagementLinkDetailsItemProps
+> = ({ resource: provider, moreInfoLink, helpContent, canPatch, webUILinkText, webUILink }) => {
+  const { t } = useForkliftTranslation();
+  const { showModal } = useModal();
+
+  const defaultHelpContent = (
+    <ForkliftTrans>
+      <p>
+        Use the external management system link to access the web-based user interface for the
+        provider virtual machine management system.
+      </p>
+      <p>You can edit and store the link to the management system to customize the link URL.</p>
+    </ForkliftTrans>
+  );
+
+  const webUILinkContent = webUILink ? (
+    <ExternalLink text={webUILinkText} href={webUILink} isInline={true}>
+      {webUILink}
+    </ExternalLink>
+  ) : (
+    <span className="text-muted">
+      {canPatch && provider?.metadata
+        ? t('Click the pencil for setting provider web UI link')
+        : t('No value for provider web UI link')}
+    </span>
+  );
+
+  return (
+    <DescriptionListDescription>
+      <DetailsItem
+        title={t('External management system')}
+        moreInfoLink={moreInfoLink}
+        helpContent={helpContent ?? defaultHelpContent}
+        crumbs={['metadata', 'annotations', 'forklift.konveyor.io/providerUI']}
+        content={webUILinkContent}
+        onEdit={
+          canPatch &&
+          provider?.metadata &&
+          (() => showModal(<EditProviderUIModal resource={provider} content={webUILink} />))
+        }
+      />
+    </DescriptionListDescription>
+  );
+};

packages/forklift-console-plugin/src/modules/Providers/views/details/components/DetailsSection/components/NamDetailsItem.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { useForkliftTranslation } from 'src/utils/i18n';
+
+import { DescriptionListDescription } from '@patternfly/react-core';
+
+import { DetailsItem } from '../../../../../utils';
+
+import { ProviderDetailsItemProps } from './ProviderDetailsItem';
+
+/**
+ * Component for displaying the provider name details item.
+ *
+ * @component
+ * @param {DetailsItemProps} props - The props of the details item.
+ */
+export const NameDetailsItem: React.FC<ProviderDetailsItemProps> = ({
+  resource: provider,
+  moreInfoLink,
+  helpContent,
+}) => {
+  const { t } = useForkliftTranslation();
+
+  const defaultMoreInfoLink =
+    'https://kubernetes.io/docs/concepts/overview/working-with-objects/names';
+
+  const defaultHelpContent = `Name is a client-provided string that refers to an object in a resource URL.
+    Only one object of a given kind can have a given name at a time.
+    However, if you delete the object, you can make a new object with the same name.`;
+
+  const nameContent = provider?.metadata?.name;
+
+  return (
+    <DescriptionListDescription>
+      <DetailsItem
+        title={t('Name')}
+        moreInfoLink={moreInfoLink ?? defaultMoreInfoLink}
+        helpContent={helpContent ?? defaultHelpContent}
+        crumbs={['Provider', 'metadata', 'name']}
+        content={nameContent}
+      />
+    </DescriptionListDescription>
+  );
+};

packages/forklift-console-plugin/src/modules/Providers/views/details/components/DetailsSection/components/index.ts

@@ -1,7 +1,8 @@
 // @index(['./*', /style/g], f => `export * from '${f.path}';`)
 export * from './CreatedAtDetailsItem';
 export * from './CredentialsDetailsItem';
-export * from './NameAndUiLinkDetailsItem';
+export * from './ExternalManagementLinkDetailsItem';
+export * from './NamDetailsItem';
 export * from './NamespaceDetailsItem';
 export * from './OwnerDetailsItem';
 export * from './ProviderDetailsItem';

packages/forklift-console-plugin/src/modules/Providers/views/details/components/DetailsSection/index.ts

@@ -1,8 +1,10 @@
 // @index(['./*', /style/g], f => `export * from '${f.path}';`)
+export * from './components';
 export * from './DetailsSection';
 export * from './OpenshiftDetailsSection';
 export * from './OpenstackDetailsSection';
 export * from './OVADetailsSection';
 export * from './OvirtDetailsSection';
+export * from './utils';
 export * from './VSphereDetailsSection';
 // @endindex