From 27cb01c318c5b854a13e44825ede2c3a082bf786 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cintia=20S=C3=A1nchez=20Garc=C3=ADa?= <cynthiasg@icloud.com>
Date: Tue, 7 Jan 2025 11:26:56 +0100
Subject: [PATCH] Update Helm installation instructions modal
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Closes #4172

Signed-off-by: Cintia Sánchez García <cynthiasg@icloud.com>
---
 .../installation/ContentInstall.module.css    |  4 +
 .../package/installation/HelmInstall.test.tsx | 11 ++-
 .../package/installation/HelmInstall.tsx      | 45 +++++++----
 .../__snapshots__/HelmInstall.test.tsx.snap   |  2 +-
 .../__snapshots__/Modal.test.tsx.snap         |  2 +-
 web/src/utils/getInstallMethods.test.tsx      | 78 +++++++++++++++++++
 6 files changed, 123 insertions(+), 19 deletions(-)

diff --git a/web/src/layout/package/installation/ContentInstall.module.css b/web/src/layout/package/installation/ContentInstall.module.css
index 3249ee19e3..77d82cd3be 100644
--- a/web/src/layout/package/installation/ContentInstall.module.css
+++ b/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;
diff --git a/web/src/layout/package/installation/HelmInstall.test.tsx b/web/src/layout/package/installation/HelmInstall.test.tsx
index e920073542..6f4704324e 100644
--- a/web/src/layout/package/installation/HelmInstall.test.tsx
+++ b/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 }} />);
 
diff --git a/web/src/layout/package/installation/HelmInstall.tsx b/web/src/layout/package/installation/HelmInstall.tsx
index c5aec7c2c5..7cb8e63111 100644
--- a/web/src/layout/package/installation/HelmInstall.tsx
+++ b/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>
       </>
     );
diff --git a/web/src/layout/package/installation/__snapshots__/HelmInstall.test.tsx.snap b/web/src/layout/package/installation/__snapshots__/HelmInstall.test.tsx.snap
index 959458e55d..4919385d34 100644
--- a/web/src/layout/package/installation/__snapshots__/HelmInstall.test.tsx.snap
+++ b/web/src/layout/package/installation/__snapshots__/HelmInstall.test.tsx.snap
@@ -157,7 +157,7 @@ exports[`HelmInstall creates snapshot 1`] = `
      command if you need to.
   </div>
   <div
-    class="mt-2 d-flex flex-row justify-content-between align-items-baseline"
+    class="mt-2"
   >
     <a
       aria-label="Download Helm"
diff --git a/web/src/layout/package/installation/__snapshots__/Modal.test.tsx.snap b/web/src/layout/package/installation/__snapshots__/Modal.test.tsx.snap
index e95b6feb88..0ad14d2768 100644
--- a/web/src/layout/package/installation/__snapshots__/Modal.test.tsx.snap
+++ b/web/src/layout/package/installation/__snapshots__/Modal.test.tsx.snap
@@ -318,7 +318,7 @@ exports[`HelmInstall creates snapshot 1`] = `
                    command if you need to.
                 </div>
                 <div
-                  class="mt-2 d-flex flex-row justify-content-between align-items-baseline"
+                  class="mt-2"
                 >
                   <a
                     aria-label="Download Helm"
diff --git a/web/src/utils/getInstallMethods.test.tsx b/web/src/utils/getInstallMethods.test.tsx
index 509047207d..cd4da7c337 100644
--- a/web/src/utils/getInstallMethods.test.tsx
+++ b/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: {