fix(Component): remove sha hash from container image url

openshift · Jan 23, 2024 · 574814f · 574814f
1 parent 144f5dd
commit 574814f
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 5 deletions.
diff --git a/src/components/Components/ComponentsListRow.tsx b/src/components/Components/ComponentsListRow.tsx
@@ -21,6 +21,11 @@ type ComponentWithLatestBuildPipeline = ComponentKind & {
   latestBuildPipelineRun?: PipelineRunKind;
 };
 
+export const getContainerImageLink = (url: string) => {
+  const imageUrl = url.includes('@sha') ? url.split('@sha')[0] : url;
+  return imageUrl.startsWith('http') ? imageUrl : `https://${imageUrl}`;
+};
+
 const ComponentsListRow: React.FC<RowFunctionArgs<ComponentWithLatestBuildPipeline>> = ({
   obj: component,
   customData,
@@ -67,11 +72,10 @@ const ComponentsListRow: React.FC<RowFunctionArgs<ComponentWithLatestBuildPipeli
           {component.spec.containerImage && (
             <FlexItem>
               <ExternalLink
-                href={
-                  component.spec.containerImage.startsWith('http')
-                    ? component.spec.containerImage
-                    : `https://${component.spec.containerImage}`
-                }
+                /** by default patternfly button disable text selection on Button component
+                    this enables it on <a /> tag */
+                style={{ userSelect: 'auto' }}
+                href={getContainerImageLink(component.spec.containerImage)}
                 text={component.spec.containerImage}
               />
             </FlexItem>

diff --git a/src/components/Components/__tests__/ComponentListView.spec.tsx b/src/components/Components/__tests__/ComponentListView.spec.tsx
@@ -9,6 +9,7 @@ import { ComponentGroupVersionKind, PipelineRunGroupVersionKind } from '../../..
 import { componentCRMocks } from '../__data__/mock-data';
 import { mockPipelineRuns } from '../__data__/mock-pipeline-run';
 import ComponentListView from '../ComponentListView';
+import { getContainerImageLink } from '../ComponentsListRow';
 
 const mockComponents = componentCRMocks.reduce((acc, mock) => {
   acc.push({ ...mock, spec: { ...mock.spec, application: 'test-app' } });
@@ -207,3 +208,18 @@ describe('ComponentListViewPage', () => {
     expect(getNextPageMock).toHaveBeenCalled();
   });
 });
+
+describe('getContainerImageLink', () => {
+  it('should return valid container image url', () => {
+    expect(getContainerImageLink('https://quay.io/repo/image')).toEqual(
+      'https://quay.io/repo/image',
+    );
+    expect(getContainerImageLink('quay.io/repo/image')).toEqual('https://quay.io/repo/image');
+    expect(getContainerImageLink('quay.io/repo/image@sha256:asd23412s1243')).toEqual(
+      'https://quay.io/repo/image',
+    );
+    expect(getContainerImageLink('https://quay.io/repo/image@sha256:asd23412s1243')).toEqual(
+      'https://quay.io/repo/image',
+    );
+  });
+});