Move ViewImageDrawer to /ImageLibrary; update Pendo IDs

Author: DevDW

packages/manager/src/features/Images/ImagesLanding/v2/ImageLibrary/ImageLibraryTabs.tsx

@@ -16,9 +16,9 @@ import { EditImageDrawer } from '../../EditImageDrawer';
 import { ManageImageReplicasForm } from '../../ImageRegions/ManageImageRegionsForm';
 import { RebuildImageDrawer } from '../../RebuildImageDrawer';
 import { VIEW_SHARED_IMAGE_DETAILS_DRAWER_PENDO_IDS } from '../constants';
-import { ViewImageDrawer } from '../ShareGroups/ViewImageDrawer';
 import { imageLibrarySubTabs as subTabs } from './imageLibraryTabsConfig';
 import { ImagesView } from './ImagesView';
+import { ViewImageDrawer } from './ViewImageDrawer';
 
 import type { Handlers as ImageHandlers } from '../../ImagesActionMenu';
 import type { Image } from '@linode/api-v4';

…areGroups/ViewSharedImageDrawer.test.tsx …v2/ImageLibrary/ViewImageDrawer.test.tsxpackages/manager/src/features/Images/ImagesLanding/v2/ShareGroups/ViewSharedImageDrawer.test.tsx renamed to packages/manager/src/features/Images/ImagesLanding/v2/ImageLibrary/ViewImageDrawer.test.tsx packages/manager/src/features/Images/ImagesLanding/v2/ShareGroups/ViewSharedImageDrawer.test.tsx renamed to packages/manager/src/features/Images/ImagesLanding/v2/ImageLibrary/ViewImageDrawer.test.tsx

@@ -56,6 +56,7 @@ const defaultProps = {
   image: baseImage,
   imageError: null,
   isFetching: false,
+  isSharedImage: true,
   onClose,
   open: true,
   pendoIDs: {} as typeof VIEW_SHARED_IMAGE_DETAILS_DRAWER_PENDO_IDS,
@@ -91,7 +92,7 @@ describe('ViewImageDrawer', () => {
       <ViewImageDrawer {...defaultProps} />
     );
 
-    expect(getByText('my-share-group')).toBeVisible();
+    expect(getByText(/my-share-group/)).toBeVisible();
   });
 
   it('renders original image size and total replica size', () => {

…nding/v2/ShareGroups/ViewImageDrawer.tsx …ding/v2/ImageLibrary/ViewImageDrawer.tsxpackages/manager/src/features/Images/ImagesLanding/v2/ShareGroups/ViewImageDrawer.tsx renamed to packages/manager/src/features/Images/ImagesLanding/v2/ImageLibrary/ViewImageDrawer.tsx packages/manager/src/features/Images/ImagesLanding/v2/ShareGroups/ViewImageDrawer.tsx renamed to packages/manager/src/features/Images/ImagesLanding/v2/ImageLibrary/ViewImageDrawer.tsx

@@ -49,8 +49,11 @@ export const ViewImageDrawer = (props: Props) => {
           <StyledLabel>Label:</StyledLabel> {image?.label}
         </Typography>
         <Typography variant="body1">
-          <StyledLabel>Image ID:</StyledLabel>{' '}
-          <CopyTooltip copyableText text={image?.id ?? ''} />
+          <StyledLabel>Image ID:</StyledLabel> {image?.id}
+          <StyledCopyIcon
+            data-pendo-id={pendoIDs.copyImageIdIcon}
+            text={image?.id ?? ''}
+          />
         </Typography>
         {isSharedImage && (
           <Typography variant="body1">
@@ -87,37 +90,33 @@ export const ViewImageDrawer = (props: Props) => {
           </Stack>
         )}
         {image?.description && (
-          <Typography variant="body1">
-            <Stack direction="column" spacing={1}>
-              <StyledLabel>Description</StyledLabel>
-              {image.description}
-            </Stack>
-          </Typography>
+          <Stack direction="column" spacing={1}>
+            <StyledLabel>Description</StyledLabel>
+            <Typography variant="body1">{image.description}</Typography>
+          </Stack>
         )}
-        <Typography variant="body1">
-          <StyledLabel>Replicated in the following regions:</StyledLabel>{' '}
-          {image?.regions.map((region) => {
-            const countryAndLabelObject = getCountryAndLabelFromImageRegion(
-              regions ?? [],
-              region
-            );
+        <StyledLabel>Replicated in the following regions:</StyledLabel>{' '}
+        {image?.regions.map((region) => {
+          const countryAndLabelObject = getCountryAndLabelFromImageRegion(
+            regions ?? [],
+            region
+          );
 
-            const imageCountry = countryAndLabelObject.country ?? 'us';
-            const regionLabel = countryAndLabelObject.label ?? 'Unknown';
+          const imageCountry = countryAndLabelObject.country ?? 'us';
+          const regionLabel = countryAndLabelObject.label ?? 'Unknown';
 
-            return (
-              <Stack
-                alignItems="center"
-                direction="row"
-                key={region.region}
-                marginTop={1}
-              >
-                <Flag country={imageCountry} />
-                <span style={{ paddingLeft: 8 }}>{regionLabel}</span>
-              </Stack>
-            );
-          })}
-        </Typography>
+          return (
+            <Stack
+              alignItems="center"
+              direction="row"
+              key={region.region}
+              marginTop={1}
+            >
+              <Flag country={imageCountry} />
+              <span style={{ paddingLeft: 8 }}>{regionLabel}</span>
+            </Stack>
+          );
+        })}
       </Stack>
       <ActionsPanel
         data-pendo-id={pendoIDs.closeButton}
@@ -143,3 +142,12 @@ const StyledCloudInitIcon = styled(CloudInitIcon, {
   height: 16,
   width: 16,
 }));
+
+const StyledCopyIcon = styled(CopyTooltip)(({ theme }) => ({
+  '& svg': {
+    height: 12,
+    top: 1,
+    width: 12,
+  },
+  marginLeft: theme.spacingFunction(4),
+}));

packages/manager/src/features/Images/ImagesLanding/v2/constants.ts

@@ -4,4 +4,5 @@ export const DEFAULT_PAGE_SIZES = [25, 50, 75, 100];
 export const VIEW_SHARED_IMAGE_DETAILS_DRAWER_PENDO_IDS = {
   xButton: 'Images Library Shared View-X button',
   closeButton: 'Images Library Shared View-Close',
+  copyImageIdIcon: 'Images Library Shared View-Copy ID',
 };