Bug 1907793: Show support info in VM template details

frontend/packages/kubevirt-plugin/locales/en/kubevirt-plugin.json

@@ -570,7 +570,6 @@
   "This virtual machine has some pending changes that will apply after it is restarted.": "This virtual machine has some pending changes that will apply after it is restarted.",
   "View Details": "View Details",
   "{{provider}} supported": "{{provider}} supported",
-  "provider}} supported": "provider}} supported",
   "Create new Template from": "Create new Template from",
   "Delete Template": "Delete Template",
   "Red Hat templates cannot be deleted": "Red Hat templates cannot be deleted",
@@ -579,10 +578,10 @@
   "Virtualization": "Virtualization",
   "Virtual Machines Templates": "Virtual Machines Templates",
   "{{name}} Details": "{{name}} Details",
-  "Red Hat provided templates can not be edited": "Red Hat provided templates can not be edited",
+  "{{provider}} provided templates can not be edited": "{{provider}} provided templates can not be edited",
   "Create a new custom template": "Create a new custom template",
   "{{ name }} can not be edited because it is provided by the Red Hat OpenShift Virtualization Operator.": "{{ name }} can not be edited because it is provided by the Red Hat OpenShift Virtualization Operator.",
-  "We suggest you create a custom Template from this Red Hat template.": "We suggest you create a custom Template from this Red Hat template.",
+  "We suggest you create a custom Template from this {{provider}} template.": "We suggest you create a custom Template from this {{provider}} template.",
   "VM Template Details": "VM Template Details",
   "Scheduling and resources requirements": "Scheduling and resources requirements",
   "Workload Profile": "Workload Profile",

frontend/packages/kubevirt-plugin/src/components/create-vm/dev-console/use-catalog-vm-templates.tsx

@@ -13,9 +13,7 @@ import {
   getTemplateName,
   getTemplateProvider,
   getTemplateKindProviderType,
-  getTemplateSupport,
   templateProviders,
-  getTemplateParentProvider,
 } from '../../../selectors/vm-template/basic';
 import {
   getTemplateFlavorDesc,
@@ -28,7 +26,9 @@ import { filterTemplates } from '../../vm-templates/utils';
 import { getTemplateSourceStatus } from '../../../statuses/template/template-source-status';
 import { V1alpha1DataVolume } from '../../../types/vm/disk/V1alpha1DataVolume';
 import { TemplateItem } from '../../../types/template';
+import { VMTemplateSupportDescription } from '../../vm-templates/vm-template-resource';
 import { getDescription } from '../../../selectors/selectors';
+
 import './create-vm-side-drawer.scss';
 
 const normalizeVmTemplates = (
@@ -151,30 +151,10 @@ const normalizeVmTemplates = (
       },
     ];
 
-    const templateSupport = getTemplateSupport(tmp);
-    const parentProvider = getTemplateParentProvider(tmp);
-    let support: React.ReactNode = '-';
-    if (templateSupport.parent && parentProvider && templateSupport.provider && provider) {
-      support = (
-        <>
-          <div>
-            {parentProvider} - {templateSupport.parent}
-          </div>
-          <div>
-            {provider} - {templateSupport.provider}
-          </div>
-        </>
-      );
-    } else if (templateSupport.parent && parentProvider) {
-      support = `${parentProvider} - ${templateSupport.parent}`;
-    } else if (templateSupport.provider && provider) {
-      support = templateSupport.provider;
-    }
-
     const detailsProperties = [
       {
         label: t('kubevirt-plugin~Support'),
-        value: support,
+        value: <VMTemplateSupportDescription template={tmp} />,
       },
     ];
 

frontend/packages/kubevirt-plugin/src/components/vm-templates/label.tsx

@@ -34,7 +34,7 @@ export const VMTemplateLabel: React.FC<VMTemplateLabelProps> = ({ template, clas
         </Tooltip>
       )}
       {templateSupport.provider && provider && (
-        <Tooltip content={t('kubevirt-plugin~provider}} supported', { provider })}>
+        <Tooltip content={t('kubevirt-plugin~{{provider}} supported', { provider })}>
           <Label
             color={isCommonTemplate(template) ? 'green' : 'blue'}
             className={hasParentProvider ? 'kv-template-support__label' : undefined}

frontend/packages/kubevirt-plugin/src/components/vm-templates/vm-template-details.tsx

@@ -18,7 +18,11 @@ import {
 } from './vm-template-resource';
 import { HashAnchor } from '../hash-anchor/hash-anchor';
 import { TemplateSourceStatus } from '../../statuses/template/types';
-import { getTemplateName, isCommonTemplate } from '../../selectors/vm-template/basic';
+import {
+  getTemplateName,
+  getTemplateProvider,
+  isCommonTemplate,
+} from '../../selectors/vm-template/basic';
 import { getVMWizardCreateLink } from '../../utils/url';
 import { VMWizardMode, VMWizardName } from '../../constants';
 
@@ -31,6 +35,8 @@ export const VMTemplateDetails: React.FC<VMTemplateDetailsProps> = ({
     useAccessReview(asAccessReview(TemplateModel, template, 'patch')) &&
     !isCommonTemplate(template);
 
+  const provider = getTemplateProvider(t, template);
+
   return (
     <>
       <ScrollToTopOnMount />
@@ -41,7 +47,9 @@ export const VMTemplateDetails: React.FC<VMTemplateDetailsProps> = ({
               <Alert
                 variant="info"
                 isInline
-                title={t('kubevirt-plugin~Red Hat provided templates can not be edited')}
+                title={t('kubevirt-plugin~{{provider}} provided templates can not be edited', {
+                  provider,
+                })}
                 actionLinks={
                   <>
                     <AlertActionLink
@@ -69,7 +77,8 @@ export const VMTemplateDetails: React.FC<VMTemplateDetailsProps> = ({
                   </StackItem>
                   <StackItem>
                     {t(
-                      'kubevirt-plugin~We suggest you create a custom Template from this Red Hat template.',
+                      'kubevirt-plugin~We suggest you create a custom Template from this {{provider}} template.',
+                      { provider },
                     )}
                   </StackItem>
                 </Stack>

frontend/packages/kubevirt-plugin/src/components/vm-templates/vm-template-resource.tsx

@@ -31,6 +31,11 @@ import { getFlavorText } from '../../selectors/vm/flavor-text';
 import { TemplateSourceStatus } from '../../statuses/template/types';
 
 import './_vm-template-resource.scss';
+import {
+  getTemplateParentProvider,
+  getTemplateProvider,
+  getTemplateSupport,
+} from '../../selectors/vm-template/basic';
 
 export const VMTemplateResourceSummary: React.FC<VMTemplateResourceSummaryProps> = ({
   template,
@@ -90,6 +95,36 @@ export const VMTemplateResourceSummary: React.FC<VMTemplateResourceSummaryProps>
   );
 };
 
+type VMTemplateSupportDescriptionProps = {
+  template: TemplateKind;
+};
+
+export const VMTemplateSupportDescription: React.FC<VMTemplateSupportDescriptionProps> = ({
+  template,
+}) => {
+  const { t } = useTranslation();
+  const provider = getTemplateProvider(t, template);
+  const templateSupport = getTemplateSupport(template);
+  const parentProvider = getTemplateParentProvider(template);
+  if ((templateSupport.parent && parentProvider) || (templateSupport.provider && provider)) {
+    return (
+      <>
+        {templateSupport.parent && parentProvider && (
+          <div>
+            {parentProvider} - {templateSupport.parent}
+          </div>
+        )}
+        {templateSupport.provider && provider && (
+          <div>
+            {provider} - {templateSupport.provider}
+          </div>
+        )}
+      </>
+    );
+  }
+  return <>-</>;
+};
+
 export const VMTemplateDetailsList: React.FC<VMTemplateResourceListProps> = ({
   template,
   sourceStatus,
@@ -124,6 +159,12 @@ export const VMTemplateDetailsList: React.FC<VMTemplateResourceListProps> = ({
           detailed
         />
       </VMDetailsItem>
+      <VMDetailsItem title={t('kubevirt-plugin~Provider')}>
+        {getTemplateProvider(t, template) || '-'}
+      </VMDetailsItem>
+      <VMDetailsItem title={t('kubevirt-plugin~Support')}>
+        <VMTemplateSupportDescription template={template} />
+      </VMDetailsItem>
     </dl>
   );
 };