Bug 1998550: Add include-media scss mixin for responsivenesss

src/app/home/pages/PlansPage/components/Wizard/CopyOptionsTable.module.scss

@@ -1,3 +1,7 @@
+@import 'src/layout/include-media';
+
 .copySelectStyle {
-  width: 13em;
+  @include media('>=769px', '<=1200px') {
+    width: 10em;
+  }
 }

src/app/home/pages/PlansPage/components/Wizard/CopyOptionsTable.tsx

@@ -15,28 +15,25 @@ import {
   Pagination,
   PaginationVariant,
   Checkbox,
-  Flex,
   Tooltip,
   TooltipPosition,
   Modal,
   Button,
   BaseSizes,
-  FlexItem,
 } from '@patternfly/react-core';
 import {
   Table,
   TableVariant,
   TableHeader,
   TableBody,
   sortable,
-  cellWidth,
+  truncate,
 } from '@patternfly/react-table';
 import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/js/icons/question-circle-icon';
 import ExclamationTriangleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
 
 import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
-import flex from '@patternfly/react-styles/css/utilities/Flex/flex';
 import { useFilterState, useSortState } from '../../../../../common/duck/hooks';
 import { IFormValues, IOtherProps } from './WizardContainer';
 import { capitalize } from '../../../../../common/duck/utils';
@@ -113,10 +110,11 @@ const CopyOptionsTable: React.FunctionComponent<ICopyOptionsTableProps> = ({
   const [verifyWarningState, setVerifyWarningState] = useState(VerifyWarningState.Unread);
 
   const columns = [
-    { title: 'PV name', transforms: [sortable] },
-    { title: 'Claim', transforms: [sortable] },
-    { title: 'Namespace', transforms: [sortable] },
-    { title: 'Copy method', transforms: [sortable, cellWidth(15)] },
+    { title: 'PV name', transforms: [sortable, truncate] },
+    { title: 'Claim', transforms: [sortable, truncate] },
+    { title: 'Namespace', transforms: [sortable, truncate] },
+    { title: 'Copy method', transforms: [sortable, truncate] },
+    { title: 'Target storage class', transforms: [sortable, truncate] },
     {
       title: (
         <React.Fragment>
@@ -136,9 +134,8 @@ const CopyOptionsTable: React.FunctionComponent<ICopyOptionsTableProps> = ({
           </Tooltip>
         </React.Fragment>
       ),
-      transforms: [sortable, cellWidth(10)],
+      transforms: [sortable, truncate],
     },
-    { title: 'Target storage class', transforms: [sortable] },
   ];
   const getSortValues = (pv: IPlanPersistentVolume) => [
     pv.name,
@@ -167,6 +164,13 @@ const CopyOptionsTable: React.FunctionComponent<ICopyOptionsTableProps> = ({
       type: FilterType.search,
       placeholderText: 'Filter by namespace...',
     },
+    {
+      key: 'targetStorageClass',
+      title: 'Target storage class',
+      type: FilterType.search,
+      placeholderText: 'Filter by target storage class...',
+      getItemValue: (pv) => storageClassToString(pvStorageClassAssignment[pv.name]),
+    },
     {
       key: 'copyMethod',
       title: 'Copy method',
@@ -177,13 +181,6 @@ const CopyOptionsTable: React.FunctionComponent<ICopyOptionsTableProps> = ({
       ],
       getItemValue: (pv) => copyMethodToString(pvCopyMethodAssignment[pv.name]),
     },
-    {
-      key: 'targetStorageClass',
-      title: 'Target storage class',
-      type: FilterType.search,
-      placeholderText: 'Filter by target storage class...',
-      getItemValue: (pv) => storageClassToString(pvStorageClassAssignment[pv.name]),
-    },
   ];
 
   const { filterValues, setFilterValues, filteredItems } = useFilterState(
@@ -217,11 +214,17 @@ const CopyOptionsTable: React.FunctionComponent<ICopyOptionsTableProps> = ({
     ];
 
     const isVerifyCopyAllowed = pvCopyMethodAssignment[pv.name] === 'filesystem';
+    let sourcePVCName = pv.pvc.name;
+    const includesMapping = sourcePVCName.includes(':');
+    if (includesMapping) {
+      const mappedPVCNameArr = sourcePVCName.split(':');
+      sourcePVCName = mappedPVCNameArr[0];
+    }
 
     return {
       cells: [
         pv.name,
-        pv.pvc.name,
+        sourcePVCName,
         pv.pvc.namespace,
         {
           title: (
@@ -242,6 +245,23 @@ const CopyOptionsTable: React.FunctionComponent<ICopyOptionsTableProps> = ({
             </div>
           ),
         },
+        {
+          title: (
+            <SimpleSelect
+              id="select-storage-class"
+              aria-label="Select storage class"
+              className={styles.copySelectStyle}
+              onChange={(option: any) => onStorageClassChange(currentPV, option.value)}
+              options={storageClassOptions}
+              value={
+                storageClassOptions.find(
+                  (option) => currentStorageClass && option.value === currentStorageClass.name
+                ) || noneOption
+              }
+              placeholderText="Select a storage class..."
+            />
+          ),
+        },
         {
           title: (
             <Checkbox
@@ -259,22 +279,6 @@ const CopyOptionsTable: React.FunctionComponent<ICopyOptionsTableProps> = ({
             />
           ),
         },
-        {
-          title: (
-            <SimpleSelect
-              id="select-storage-class"
-              aria-label="Select storage class"
-              onChange={(option: any) => onStorageClassChange(currentPV, option.value)}
-              options={storageClassOptions}
-              value={
-                storageClassOptions.find(
-                  (option) => currentStorageClass && option.value === currentStorageClass.name
-                ) || noneOption
-              }
-              placeholderText="Select a storage class..."
-            />
-          ),
-        },
       ],
     };
   });