EPMRPP-89379 || Adjust Installation Page (Google Cloud Marketplace) (#…

…476)

* EPMRPP-89379 || Adjust Installation Page (Google Cloud Marketplace)

* EPMRPP-89379 || code review fixes - 1

* EPMRPP-89379 || code review fixes - 2

src/components/ButtonSwitcher/ButtonSwitcher.scss

@@ -34,6 +34,10 @@
     transition: all 0.4s ease-out;
     cursor: pointer;
 
+    @include m.breakpoint-max(v.$tablet-sm-exact - 1) {
+      transform: scale(1);
+    }
+
     &:hover {
       color: var(--white);
     }
@@ -42,12 +46,14 @@
   &__text {
     margin-left: 10px;
 
-    &-increased {
-      display: none;
-
-      @include m.breakpoint(v.$tablet-sm) {
-        display: inline-block;
-      }
+    @include m.breakpoint-max(v.$tablet-sm-exact - 1) {
+      position: absolute;
+      top: 58px;
+      display: inline-block;
+      margin: unset;
+      color: var(--white);
+      font-size: 14px;
+      font-weight: v.$fw-regular;
     }
   }
 
@@ -62,23 +68,7 @@
   }
 
   &__icon {
-    display: none;
+    display: inline-block;
     margin-bottom: -4px;
-
-    @include m.breakpoint(v.$phone) {
-      display: none;
-
-      &-increased {
-        display: inline-block;
-      }
-    }
-
-    @include m.breakpoint(v.$tablet-sm) {
-      display: inline-block;
-    }
-
-    &-increased {
-      display: inline-block;
-    }
   }
 }

src/components/ButtonSwitcher/ButtonSwitcher.tsx

@@ -34,20 +34,8 @@ export const ButtonSwitcher: FC<ButtonSwitcherProps> = ({
   const getWrappedButton = (btn: Button) => {
     const buttonText = (
       <>
-        <div
-          className={classNames(getBlocksWith('__icon'), {
-            [getBlocksWith('__icon-increased')]: hasAdditionalButton,
-          })}
-        >
-          {btn.icon}
-        </div>
-        <span
-          className={classNames(getBlocksWith('__text'), {
-            [getBlocksWith('__text-increased')]: hasAdditionalButton,
-          })}
-        >
-          {btn.text}
-        </span>
+        <div className={classNames(getBlocksWith('__icon'))}>{btn.icon}</div>
+        <span className={classNames(getBlocksWith('__text'))}>{btn.text}</span>
       </>
     );
 

src/containers/InstallationPage/GoogleCloudContent/GoogleCloudContent.tsx

@@ -0,0 +1,65 @@
+import React, { FC } from 'react';
+import { Link } from '@app/components';
+import { createBemBlockBuilder } from '@app/utils';
+
+import { Notice } from '../Notice';
+
+import '../InstallationPage.scss';
+
+export const GoogleCloudContent: FC = () => {
+  const getBlocksWith = createBemBlockBuilder(['installation']);
+
+  return (
+    <div className={getBlocksWith('__wrapper')}>
+      <div className={getBlocksWith('__chapter')}>Step 1</div>
+      <h3 className={getBlocksWith('__title-content')}>
+        Configure and deploy ReportPortal on Google Cloud Marketplace
+      </h3>
+      <p>
+        Starting from December 2023, the ReportPortal application is available in the Google Cloud
+        Marketplace.
+      </p>
+      <Notice title="PRECONDITION">
+        Please create a{' '}
+        <Link
+          className={getBlocksWith('__link')}
+          to="https://cloud.google.com/billing/docs/how-to/create-billing-account"
+        >
+          Cloud Billing account
+        </Link>{' '}
+        before proceeding with the deployment
+      </Notice>
+      <p>
+        1.{' '}
+        <Link
+          className={getBlocksWith('__link')}
+          to="https://console.cloud.google.com/marketplace/product/epam-mp-rp/reportportal?project=epam-mp-rp"
+        >
+          Open ReportPortal
+        </Link>{' '}
+        at Google Cloud Marketplace and press <b>&apos;Get Started&apos;</b>.
+      </p>
+      <p>
+        2. Choose an existing Project from the dropdown menu, or create a new one. Once selected,
+        click <b>&apos;Agree&apos;</b>.
+      </p>
+      <p>
+        3. If not completed already, set up your billing account for the chosen project. Click on
+        the <b>&apos;Deploy&apos;</b> button to proceed.
+      </p>
+      <p>
+        4. Ensure the Kubernetes Engine API is enabled. If it&apos;s not, press{' '}
+        <b>&apos;Enable&apos;</b> on the appeared page to proceed.
+      </p>
+      <p>
+        5. Fill up the mandatory fields and <b>create a new cluster</b> on the &apos;Click to deploy
+        on GKE&apos; tab.
+      </p>
+      <Notice>
+        By default, we create a three-node cluster, which reduces to one after installation, but can
+        be expanded to five based on project needs.
+      </Notice>
+      <p>Once complete, start deploying.</p>
+    </div>
+  );
+};

src/containers/InstallationPage/GoogleCloudContent/GoogleCloudLaunchPortal.tsx

@@ -0,0 +1,46 @@
+import React, { FC } from 'react';
+import { createBemBlockBuilder } from '@app/utils';
+
+import { Notice } from '../Notice';
+
+import '../InstallationPage.scss';
+
+export const GoogleCloudLaunchPortal: FC = () => {
+  const getBlocksWith = createBemBlockBuilder(['installation']);
+
+  return (
+    <div className={getBlocksWith('__wrapper')}>
+      <div className={getBlocksWith('__chapter')}>Step 2</div>
+      <h3 className={getBlocksWith('__title-content')}>Launch ReportPortal</h3>
+      <p>
+        After the deployment is completed, we will land on the page with application information
+        from which we can follow the link to log in. Then please proceed with the following actions:
+      </p>
+      <p>
+        1. Open <b>Service URL</b> link from the &apos;ReportPortal info&apos; section.
+      </p>
+      <Notice importance>
+        Clicking &apos;Service URL&apos; might trigger a &apos;connection not private&apos; browser
+        alert, but there&apos;s no actual risk as you&apos;re accessing your own server. This alert
+        because Google Marketplace uses a temporary, self-signed certificate during deployment for
+        data encryption. As this certificate isn&apos;t connected to any domain, just like
+        ReportPortal at this stage, browsers flag it as unverified, hence the warning.
+      </Notice>
+      <p>
+        2. For the Chrome browser, click on <b>&apos;Advanced&apos;</b> — then click on
+        &apos;Proceed to XXXXX (unsafe)&apos; button-link (where &apos;XXXXX&apos; is your generated
+        Service URL address).
+      </p>
+      <p>
+        3. On the opened ReportPortal authorization page, input <b>superadmin</b> as your login. For
+        the password, use the auto-generated <b>initial password</b> from the &apos;ReportPortal
+        info&apos; section.
+      </p>
+      <Notice>
+        It may take Google Kubernetes Engine a few minutes before the application becomes accessible
+        via the link.
+      </Notice>
+      <p>Let&apos;s get your ReportPortal instance up!</p>
+    </div>
+  );
+};

src/containers/InstallationPage/GoogleCloudContent/index.ts

@@ -0,0 +1,2 @@
+export * from './GoogleCloudContent';
+export * from './GoogleCloudLaunchPortal';

src/containers/InstallationPage/InstallationPage.tsx

@@ -4,41 +4,61 @@ import classNames from 'classnames';
 import { ButtonSwitcher, Banner, FooterContent } from '@app/components';
 import { createBemBlockBuilder, mediaDesktopSm } from '@app/utils';
 
-import { DockerIcon, KubernetesIcon } from './icons';
+import { DockerIcon, GoogleCloudIcon, KubernetesIcon } from './icons';
 import { KubernetesContent } from './KubernetesContent';
+import { GoogleCloudContent, GoogleCloudLaunchPortal } from './GoogleCloudContent';
 import { LaunchPortal } from './LaunchPortal';
 import { DockerDeployingStep, DockerInstall } from './DockerContent';
 import { IntegrationContent } from './IntegrationContent';
 import { ScrollIndicator } from './ScrollIndicator';
-import { KUBERNETES_SECTIONS, DOCKER_SECTIONS } from './constants';
+import {
+  KUBERNETES_SECTIONS,
+  DOCKER_SECTIONS,
+  GOOGLE_CLOUD_SECTIONS,
+  DOCKER,
+  GOOGLE_CLOUD,
+  KUBERNETES,
+} from './constants';
 
 import './InstallationPage.scss';
 
 const getBlocksWith = createBemBlockBuilder(['installation']);
 
 const buttons = [
   {
-    text: 'With Docker',
+    text: DOCKER,
     icon: <DockerIcon />,
     scrollPoints: DOCKER_SECTIONS,
   },
   {
-    text: 'With Kubernetes',
+    text: KUBERNETES,
     icon: <KubernetesIcon />,
     scrollPoints: KUBERNETES_SECTIONS,
   },
+  {
+    text: GOOGLE_CLOUD,
+    icon: <GoogleCloudIcon />,
+    scrollPoints: GOOGLE_CLOUD_SECTIONS,
+  },
 ];
 
 const ACTIVE_BUTTON = buttons[0].text;
 
+const sectionsContent: {
+  [key: string]: React.FC[];
+} = {
+  [DOCKER]: [DockerInstall, DockerDeployingStep, LaunchPortal, IntegrationContent],
+  [KUBERNETES]: [KubernetesContent, LaunchPortal, IntegrationContent],
+  [GOOGLE_CLOUD]: [GoogleCloudContent, GoogleCloudLaunchPortal, IntegrationContent],
+};
+
 export const InstallationPage: FC = () => {
   const [activeButton, setActiveButton] = useState(ACTIVE_BUTTON);
   const isDesktop = useMediaQuery({ query: mediaDesktopSm });
 
-  const isFirstBtnActive = activeButton === buttons[0].text;
   const sections = buttons.find(button => button.text === activeButton)?.scrollPoints ?? [];
 
-  const switchActiveBtn = btnName => {
+  const switchActiveBtn = (btnName: string) => {
     if (btnName !== activeButton) {
       setActiveButton(btnName);
     }
@@ -69,29 +89,11 @@ export const InstallationPage: FC = () => {
 
           <div className={getBlocksWith('__main-content')}>
             <div className={classNames({ [getBlocksWith('__main-inner')]: !isDesktop })}>
-              {isFirstBtnActive ? (
-                <>
-                  <div name="section-1">
-                    <DockerInstall />
-                  </div>
-
-                  <div name="section-2">
-                    <DockerDeployingStep />
-                  </div>
-                </>
-              ) : (
-                <div name="section-1">
-                  <KubernetesContent />
+              {sectionsContent[activeButton].map((SectionComponent, index) => (
+                <div key={activeButton + index} name={`section-${index}`}>
+                  <SectionComponent />
                 </div>
-              )}
-
-              <div name="section-3">
-                <LaunchPortal />
-              </div>
-
-              <div name="section-4">
-                <IntegrationContent />
-              </div>
+              ))}
             </div>
           </div>
         </div>

src/containers/InstallationPage/constants.ts

@@ -1,12 +1,24 @@
 export const KUBERNETES_SECTIONS = [
-  { step: 'Step 1', title: 'Configure and deploy ReportPortal', id: 'section-1' },
-  { step: 'Step 2', title: 'Launch ReportPortal', id: 'section-3' },
-  { step: 'Step 3', title: 'Integrate with your test framework', id: 'section-4' },
+  { step: 'Step 1', title: 'Configure and deploy ReportPortal', id: 'section-0' },
+  { step: 'Step 2', title: 'Launch ReportPortal', id: 'section-1' },
+  { step: 'Step 3', title: 'Integrate with your test framework', id: 'section-2' },
 ];
 
 export const DOCKER_SECTIONS = [
-  { step: 'Install Docker', title: '', id: 'section-1' },
-  { step: 'Step 1', title: 'Configure and deploy ReportPortal', id: 'section-2' },
-  { step: 'Step 2', title: 'Launch ReportPortal', id: 'section-3' },
-  { step: 'Step 3', title: 'Integrate with your test framework', id: 'section-4' },
+  { step: 'Install Docker', title: '', id: 'section-0' },
+  { step: 'Step 1', title: 'Configure and deploy ReportPortal', id: 'section-1' },
+  { step: 'Step 2', title: 'Launch ReportPortal', id: 'section-2' },
+  { step: 'Step 3', title: 'Integrate with your test framework', id: 'section-3' },
+];
+
+export const GOOGLE_CLOUD_SECTIONS = [
+  { step: 'Step 1', title: 'Configure and deploy ReportPortal', id: 'section-0' },
+  { step: 'Step 2', title: 'Launch ReportPortal', id: 'section-1' },
+  { step: 'Step 3', title: 'Integrate with your test framework', id: 'section-2' },
 ];
+
+export const DOCKER = 'Docker';
+
+export const KUBERNETES = 'Kubernetes';
+
+export const GOOGLE_CLOUD = 'Google CM';

src/containers/InstallationPage/icons/GoogleCloudIcon.tsx

@@ -0,0 +1,12 @@
+import React, { FC } from 'react';
+
+export const GoogleCloudIcon: FC = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="29" height="28" fill="none">
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M12.1624 8.50009L15.834 4.82852L19.5056 8.50009L15.834 12.1717L12.1624 8.50009ZM15.1269 2.7072C15.5174 2.31668 16.1506 2.31668 16.5411 2.7072L21.6269 7.79299C22.0174 8.18351 22.0174 8.81668 21.6269 9.2072L16.5411 14.293C16.1506 14.6835 15.5174 14.6835 15.1269 14.293L10.0411 9.2072C9.65057 8.81668 9.65057 8.18351 10.0411 7.79299L15.1269 2.7072ZM3.83398 6.00009C3.2817 6.00009 2.83398 6.44781 2.83398 7.00009C2.83398 7.55238 3.2817 8.00009 3.83398 8.00009H5.6874L9.49354 16.4582L9.48599 16.4701L8.23599 18.4701L7.94224 18.9401C7.10968 20.2722 8.06736 22.0001 9.63823 22.0001H22.834C23.3863 22.0001 23.834 21.5524 23.834 21.0001C23.834 20.4478 23.3863 20.0001 22.834 20.0001H9.63823L9.93198 19.5301L10.8882 18.0001H19.7367C20.4725 18.0001 21.1488 17.5961 21.4976 16.9483L24.7145 10.9742C24.9763 10.4879 24.7944 9.88146 24.3081 9.61962C23.8218 9.35778 23.2154 9.53972 22.9535 10.026L19.7367 16.0001H11.4806L7.51124 7.17936C7.18828 6.46166 6.47442 6.00009 5.6874 6.00009H3.83398ZM12.334 26.0001C13.1624 26.0001 13.834 25.3285 13.834 24.5001C13.834 23.6717 13.1624 23.0001 12.334 23.0001C11.5056 23.0001 10.834 23.6717 10.834 24.5001C10.834 25.3285 11.5056 26.0001 12.334 26.0001ZM20.834 24.5001C20.834 25.3285 20.1624 26.0001 19.334 26.0001C18.5056 26.0001 17.834 25.3285 17.834 24.5001C17.834 23.6717 18.5056 23.0001 19.334 23.0001C20.1624 23.0001 20.834 23.6717 20.834 24.5001Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);

src/containers/InstallationPage/icons/index.ts

@@ -1,2 +1,3 @@
 export * from './DockerIcon';
 export * from './KubernetesIcon';
+export * from './GoogleCloudIcon';