Update Helm installation instructions modal (#4217)

Closes #4172

Signed-off-by: Cintia Sánchez García <[email protected]>

web/src/layout/package/installation/ContentInstall.module.css

@@ -62,6 +62,10 @@
   height: 335px;
 }
 
+.ociBadge {
+  font-size: 95%;
+}
+
 @media only screen and (max-width: 767.98px) {
   .blockWrapper {
     font-size: 0.9rem;

web/src/layout/package/installation/HelmInstall.test.tsx

@@ -48,13 +48,20 @@ describe('HelmInstall', () => {
     it('renders component with content url', () => {
       render(<HelmInstall {...defaultProps} contentUrl="http://content.url" />);
 
-      expect(screen.getByText(/You can also download this package's content directly using/)).toBeInTheDocument();
-      const contentUrl = screen.getAllByRole('button')[3];
+      expect(screen.getByText(/You can also download this package's content using/)).toBeInTheDocument();
+      const contentUrl = screen.getAllByRole('button')[2];
       expect(contentUrl).toBeInTheDocument();
       expect(contentUrl).toHaveTextContent('this link');
       expect(contentUrl).toHaveProperty('href', 'http://content.url/');
     });
 
+    it('renders component with oci url', async () => {
+      render(<HelmInstall {...defaultProps} contentUrl="oci://content.url:0.0.1" />);
+
+      expect(screen.getByText(/You can also download this package's content using/)).toBeInTheDocument();
+      expect(await screen.findByText('helm pull oci://content.url --version 0.0.1')).toBeInTheDocument();
+    });
+
     it('renders private repo', () => {
       render(<HelmInstall {...defaultProps} repository={{ ...defaultProps.repository, private: true }} />);
 

web/src/layout/package/installation/HelmInstall.tsx

@@ -1,4 +1,5 @@
 import { Repository } from '../../../types';
+import { OCI_PREFIX } from '../../../utils/data';
 import ExternalLink from '../../common/ExternalLink';
 import CommandBlock from './CommandBlock';
 import styles from './ContentInstall.module.css';
@@ -14,6 +15,11 @@ interface Props {
 
 const HelmInstall = (props: Props) => {
   const getInstallationVersionInfo = (installCmd: string) => {
+    const compoundOCICommand = (contentUrl: string): string => {
+      const index = contentUrl.lastIndexOf(':');
+      return `helm pull ${contentUrl.substring(0, index)} --version ${contentUrl.substring(index + 1)}`;
+    };
+
     return (
       <>
         <CommandBlock
@@ -31,19 +37,18 @@ const HelmInstall = (props: Props) => {
           command if you need to.
         </div>
 
-        <div className="mt-2 d-flex flex-row justify-content-between align-items-baseline">
-          <ExternalLink
-            href="https://helm.sh/docs/intro/quickstart/"
-            className="btn btn-link ps-0"
-            label="Download Helm"
-          >
-            Need Helm?
-          </ExternalLink>
-
-          {props.contentUrl && (
-            <div className="d-none d-lg-block">
-              <small className="text-muted ps-2">
-                You can also download this package's content directly using{' '}
+        {props.contentUrl && (
+          <div className="d-none d-lg-block mt-2">
+            {props.contentUrl.startsWith(OCI_PREFIX) ? (
+              <div className="mt-4">
+                <CommandBlock
+                  command={compoundOCICommand(props.contentUrl)}
+                  title="You can also download this package's content using this command"
+                />
+              </div>
+            ) : (
+              <small className="text-muted">
+                You can also download this package's content using{' '}
                 <ExternalLink
                   href={props.contentUrl}
                   className="text-secondary fw-bold"
@@ -54,8 +59,18 @@ const HelmInstall = (props: Props) => {
                 </ExternalLink>
                 .
               </small>
-            </div>
-          )}
+            )}
+          </div>
+        )}
+
+        <div className="mt-2">
+          <ExternalLink
+            href="https://helm.sh/docs/intro/quickstart/"
+            className="btn btn-link ps-0"
+            label="Download Helm"
+          >
+            Need Helm?
+          </ExternalLink>
         </div>
       </>
     );

web/src/utils/getInstallMethods.test.tsx

@@ -93,6 +93,84 @@ const tests: Tests[] = [
       ],
     },
   },
+  {
+    title: 'Helm package with oci content url',
+    input: {
+      pkg: {
+        packageId: 'id',
+        name: 'test',
+        normalizedName: 'test',
+        displayName: 'test',
+        description: 'desc',
+        logoImageId: 'img',
+        deprecated: false,
+        signed: false,
+        ts: 1574121600,
+        isOperator: false,
+        version: '0.11.0',
+        availableVersions: [
+          { version: '0.6.0', ts: 1600841229, containsSecurityUpdates: false, prerelease: false },
+          { version: '0.5.0', ts: 1599125273, containsSecurityUpdates: false, prerelease: false },
+        ],
+        appVersion: '0.11.0',
+        contentUrl: 'oci://registry-1.docker.io/test/test:0.11.0',
+        repository: {
+          repositoryId: 'd2b93c16-4f70-43e7-b50c-0dccb4c82756',
+          name: 'repo-test',
+          url: 'https://test/charts/',
+          private: false,
+          kind: 0,
+          verifiedPublisher: false,
+          official: false,
+          userAlias: 'user',
+        },
+      },
+    },
+    output: {
+      methods: [
+        {
+          label: 'v3',
+          title: 'Helm v3',
+          kind: 1,
+          props: {
+            name: 'test',
+            version: '0.11.0',
+            repository: {
+              repositoryId: 'd2b93c16-4f70-43e7-b50c-0dccb4c82756',
+              name: 'repo-test',
+              url: 'https://test/charts/',
+              private: false,
+              kind: 0,
+              verifiedPublisher: false,
+              official: false,
+              userAlias: 'user',
+            },
+            contentUrl: 'oci://registry-1.docker.io/test/test:0.11.0',
+          },
+        },
+        {
+          label: 'v2',
+          title: 'Helm v2',
+          kind: 1,
+          props: {
+            name: 'test',
+            version: '0.11.0',
+            repository: {
+              repositoryId: 'd2b93c16-4f70-43e7-b50c-0dccb4c82756',
+              name: 'repo-test',
+              url: 'https://test/charts/',
+              private: false,
+              kind: 0,
+              verifiedPublisher: false,
+              official: false,
+              userAlias: 'user',
+            },
+            contentUrl: 'oci://registry-1.docker.io/test/test:0.11.0',
+          },
+        },
+      ],
+    },
+  },
   {
     title: 'Helm OCI package',
     input: {