Merge pull request #7905 from rawagner/templates_styles

Bug 1919260: Fix styling issues in VM Template list
openshift · Jan 25, 2021 · 14e1544 · 14e1544
2 parents 9be4a46 + d0fc2a8
commit 14e1544
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 32 deletions.
diff --git a/frontend/packages/kubevirt-plugin/src/components/vm-templates/label.scss b/frontend/packages/kubevirt-plugin/src/components/vm-templates/label.scss
diff --git a/frontend/packages/kubevirt-plugin/src/components/vm-templates/label.tsx b/frontend/packages/kubevirt-plugin/src/components/vm-templates/label.tsx
@@ -10,8 +10,6 @@ import {
   isCommonTemplate,
 } from '../../selectors/vm-template/basic';
 
-import './label.scss';
-
 type VMTemplateLabelProps = {
   template: TemplateKind;
   className?: string;
@@ -23,22 +21,20 @@ export const VMTemplateLabel: React.FC<VMTemplateLabelProps> = ({ template, clas
   const provider = getTemplateProvider(t, template);
   const parentProvider = getTemplateParentProvider(template);
 
-  const hasParentProvider = templateSupport.parent && parentProvider;
   return (
     <div className={className}>
       {templateSupport.parent === 'Full' && parentProvider && (
         <Tooltip
           content={t('kubevirt-plugin~{{provider}} supported', { provider: parentProvider })}
         >
-          <Label color="green">{parentProvider}</Label>
+          <Label isTruncated color="green">
+            {parentProvider}
+          </Label>
         </Tooltip>
       )}
       {templateSupport.provider === 'Full' && provider && (
         <Tooltip content={t('kubevirt-plugin~{{provider}} supported', { provider })}>
-          <Label
-            color={isCommonTemplate(template) ? 'green' : 'blue'}
-            className={hasParentProvider ? 'kv-template-support__label' : undefined}
-          >
+          <Label color={isCommonTemplate(template) ? 'green' : 'blue'} isTruncated>
             {provider}
           </Label>
         </Tooltip>

diff --git a/frontend/packages/kubevirt-plugin/src/components/vm-templates/vm-template-source.tsx b/frontend/packages/kubevirt-plugin/src/components/vm-templates/vm-template-source.tsx
@@ -261,32 +261,28 @@ export const TemplateSource: React.FC<TemplateSourceProps> = ({
   if (!detailed) {
     if (isTemplateSourceError(sourceStatus)) {
       return (
-        <Label variant="outline" color="red" icon={<RedExclamationCircleIcon />}>
+        <Label variant="outline" color="red" icon={<RedExclamationCircleIcon />} isTruncated>
           {t('kubevirt-plugin~Boot source error')}
         </Label>
       );
     }
     if (sourceStatus) {
       return sourceStatus.isReady ? (
-        <Label variant="outline" color="green" icon={<GreenCheckCircleIcon />}>
-          {
-            // t('kubevirt-plugin~User defined boot source')
-            // t('kubevirt-plugin~Community defined boot source')
-          }
+        <Label variant="outline" color="green" icon={<GreenCheckCircleIcon />} isTruncated>
           {t('kubevirt-plugin~{{provider}} boot source', { provider: sourceStatus.provider })}
         </Label>
       ) : (
-        <Label variant="outline" color="blue" icon={<InProgressIcon />}>
+        <Label variant="outline" color="blue" icon={<InProgressIcon />} isTruncated>
           {t('kubevirt-plugin~Preparing boot source')}
         </Label>
       );
     }
     return isCommonTemplate(template) ? (
-      <Label variant="outline" color="orange" icon={<YellowExclamationTriangleIcon />}>
+      <Label variant="outline" color="orange" icon={<YellowExclamationTriangleIcon />} isTruncated>
         {t('kubevirt-plugin~Boot source required')}
       </Label>
     ) : (
-      <Label variant="outline" color="red" icon={<RedExclamationCircleIcon />}>
+      <Label variant="outline" color="red" icon={<RedExclamationCircleIcon />} isTruncated>
         {t('kubevirt-plugin~Boot source error')}
       </Label>
     );

diff --git a/frontend/packages/kubevirt-plugin/src/components/vm-templates/vm-template.scss b/frontend/packages/kubevirt-plugin/src/components/vm-templates/vm-template.scss
@@ -10,11 +10,12 @@
 
 .kubevirt-vm-template-actions {
   text-align: right;
-  display: flex;
+  width: 230px !important;
+  max-width: 350px !important;
 }
 
 .kubevirt-vm-template-details {
-  margin: 0 var(--pf-global--spacer--sm);
+  margin: 0 var(--pf-global--spacer--md) 0 0;
 }
 
 .kubevirt-vm-template-popover {

diff --git a/frontend/packages/kubevirt-plugin/src/components/vm-templates/vm-template.tsx b/frontend/packages/kubevirt-plugin/src/components/vm-templates/vm-template.tsx
@@ -68,12 +68,11 @@ import { CDI_APP_LABEL } from '../../constants';
 import './vm-template.scss';
 
 const tableColumnClasses = (showNamespace: boolean) => [
-  'pf-u-w-33', // name
+  '', // name
   classNames('pf-m-hidden', 'pf-m-visible-on-xl'), // provider
   classNames('pf-m-hidden', { 'pf-m-visible-on-lg': showNamespace }), // namespace
-  '', // boot source
-  'kubevirt-vm-template-actions', // actions
-  Kebab.columnClass,
+  classNames('pf-m-hidden', 'pf-m-visible-on-md'), // boot source
+  classNames('pf-c-table__action', 'kubevirt-vm-template-actions'), // actions
 ];
 
 const VMTemplateTableHeader = (showNamespace: boolean, t: TFunction) =>
@@ -100,9 +99,6 @@ const VMTemplateTableHeader = (showNamespace: boolean, t: TFunction) =>
       {
         title: '',
       },
-      {
-        title: '',
-      },
     ],
     tableColumnClasses(showNamespace),
   );
@@ -223,7 +219,7 @@ const VMTemplateTableRow: RowFunction<TemplateItem, VMTemplateTableRowProps> = (
           detailed
         />
       </TableData>
-      <TableData className={dimensify()}>
+      <TableData className={dimensify(true)}>
         <Popover
           position={PopoverPosition.top}
           headerContent={t('kubevirt-plugin~Template details')}
@@ -236,11 +232,10 @@ const VMTemplateTableRow: RowFunction<TemplateItem, VMTemplateTableRowProps> = (
         <Button
           onClick={() => withSupportModal(obj, () => createVMAction(obj, sourceStatus, namespace))}
           variant="secondary"
+          className="kubevirt-vm-template-details"
         >
           {t('kubevirt-plugin~Create')}
         </Button>
-      </TableData>
-      <TableData className={dimensify(true)}>
         <Kebab
           options={menuActionsCreator(TemplateModel, obj, null, {
             togglePin,