feat: [CI-3426]: STO Step UI (#6661)

.env.example

@@ -2,3 +2,4 @@ BASE_URL=https://qb.harness.io/gateway
 TARGET_LOCALHOST=false
 ENABLE_GITOPSUI=false
 ENABLE_GOVERNANCE=false
+ENABLE_STO=false

package.json

@@ -46,6 +46,7 @@
     "generate-microfrontend-types": "rm -rf src/microfrontends/dist && webpack --config src/microfrontends/webpack.config.js",
     "publish-types": "yarn generate-microfrontend-types; yarn publish src/microfrontends;",
     "generate-certificate": "sh scripts/generate-certificate.sh",
+    "generate-eslint": "node scripts/generate-eslint-config-for-imports.mjs",
     "build-docker": "sh scripts/docker-build.sh",
     "lighthouse": "node scripts/lighthouse/lighthouse.js",
     "custom-coverage": "npx new-files-coverage-check --e !**/*.test.tsx !**/*.test.ts !**/*.snap !**/*.js !**/*.scss !**/*.mock.ts !**/*.spec.ts !**/*.d.ts !**/*.json !**/*.types.ts !**/*.yml !**/*.yaml !**cypress/** !**cypress/** !**/__test*/** !**/*.png !**/*.svg"

scripts/strings/yamlStringsCheck.mjs

@@ -112,6 +112,7 @@ for (const [i, layer] of moduleLayers.entries()) {
     const restrictedModules = _.flatten(moduleLayers.slice(i))
       .map(mod => mod.moduleRef)
       .filter(mod => mod !== moduleRef)
+      .map(mod => `${mod}.`)
 
     values[moduleRef] = parsedContent
     validateStrings(parsedContent, [moduleRef], restrictedModules)

sonar-project.properties

@@ -1,6 +1,6 @@
 sonar.projectKey=nextgenui
 sonar.sources=src
-sonar.exclusions=src/_stories/**,src/services/**
+sonar.exclusions=src/_stories/**,src/services/**,src/**/*.stories.tsx*
 sonar.tests=src
 sonar.test.inclusions=src/**/*.test.tsx*,src/**/*.test.ts*,src/**/__tests__/**
 

src/framework/strings/languageLoader.ts

@@ -32,6 +32,7 @@ import ce from '@ce/strings/strings.en.yaml'
 import cf from '@cf/strings/strings.en.yaml'
 import ci from '@ci/strings/strings.en.yaml'
 import cv from '@cv/strings/strings.en.yaml'
+import stoSteps from '@sto-steps/strings/strings.en.yaml'
 
 export default function languageLoader() {
   return {
@@ -56,6 +57,7 @@ export default function languageLoader() {
     ce,
     cf,
     ci,
-    cv
+    cv,
+    stoSteps
   }
 }

src/modules/10-common/.eslintrc.yml

@@ -25,6 +25,7 @@ rules:
         - modules/75-cf/*
         - modules/75-ci/*
         - modules/85-cv/*
+        - modules/85-sto-steps/*
         - '@notifications/*'
         - '@audit-trail/*'
         - '@rbac/*'
@@ -46,6 +47,7 @@ rules:
         - '@cf/*'
         - '@ci/*'
         - '@cv/*'
+        - '@sto-steps/*'
       paths:
         - lodash
         - name: yaml

src/modules/15-notifications/.eslintrc.yml

@@ -24,6 +24,7 @@ rules:
         - modules/75-cf/*
         - modules/75-ci/*
         - modules/85-cv/*
+        - modules/85-sto-steps/*
         - '@audit-trail/*'
         - '@rbac/*'
         - '@governance/*'
@@ -44,6 +45,7 @@ rules:
         - '@cf/*'
         - '@ci/*'
         - '@cv/*'
+        - '@sto-steps/*'
       paths:
         - lodash
         - name: yaml

src/modules/18-audit-trail/.eslintrc.yml

@@ -23,6 +23,7 @@ rules:
         - modules/75-cf/*
         - modules/75-ci/*
         - modules/85-cv/*
+        - modules/85-sto-steps/*
         - '@rbac/*'
         - '@governance/*'
         - '@sto/*'
@@ -42,6 +43,7 @@ rules:
         - '@cf/*'
         - '@ci/*'
         - '@cv/*'
+        - '@sto-steps/*'
       paths:
         - lodash
         - name: yaml

src/modules/20-rbac/.eslintrc.yml

@@ -22,6 +22,7 @@ rules:
         - modules/75-cf/*
         - modules/75-ci/*
         - modules/85-cv/*
+        - modules/85-sto-steps/*
         - '@governance/*'
         - '@sto/*'
         - '@delegates/*'
@@ -40,6 +41,7 @@ rules:
         - '@cf/*'
         - '@ci/*'
         - '@cv/*'
+        - '@sto-steps/*'
       paths:
         - lodash
         - name: yaml

src/modules/25-governance/.eslintrc.yml

@@ -21,6 +21,7 @@ rules:
         - modules/75-cf/*
         - modules/75-ci/*
         - modules/85-cv/*
+        - modules/85-sto-steps/*
         - '@sto/*'
         - '@delegates/*'
         - '@secrets/*'
@@ -38,6 +39,7 @@ rules:
         - '@cf/*'
         - '@ci/*'
         - '@cv/*'
+        - '@sto-steps/*'
       paths:
         - lodash
         - name: yaml

src/modules/27-sto/.eslintrc.yml

@@ -20,6 +20,7 @@ rules:
         - modules/75-cf/*
         - modules/75-ci/*
         - modules/85-cv/*
+        - modules/85-sto-steps/*
         - '@delegates/*'
         - '@secrets/*'
         - '@auth-settings/*'
@@ -36,6 +37,7 @@ rules:
         - '@cf/*'
         - '@ci/*'
         - '@cv/*'
+        - '@sto-steps/*'
       paths:
         - lodash
         - name: yaml

src/modules/27-sto/PipelineSecurityView.tsx

@@ -8,7 +8,6 @@
 import React from 'react'
 import { RemotePipelineSecurityView, STORemoteComponentMounter } from './STOApp'
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const PipelineSecurityView: React.FC<Record<string, any>> = props => (
+export const PipelineSecurityView: React.FC<Record<string, unknown>> = props => (
   <STORemoteComponentMounter component={<RemotePipelineSecurityView {...props} />} />
 )

src/modules/30-delegates/.eslintrc.yml

@@ -19,6 +19,7 @@ rules:
         - modules/75-cf/*
         - modules/75-ci/*
         - modules/85-cv/*
+        - modules/85-sto-steps/*
         - '@secrets/*'
         - '@auth-settings/*'
         - '@connectors/*'
@@ -34,6 +35,7 @@ rules:
         - '@cf/*'
         - '@ci/*'
         - '@cv/*'
+        - '@sto-steps/*'
       paths:
         - lodash
         - name: yaml

src/modules/30-secrets/.eslintrc.yml

@@ -19,6 +19,7 @@ rules:
         - modules/75-cf/*
         - modules/75-ci/*
         - modules/85-cv/*
+        - modules/85-sto-steps/*
         - '@delegates/*'
         - '@auth-settings/*'
         - '@connectors/*'
@@ -34,6 +35,7 @@ rules:
         - '@cf/*'
         - '@ci/*'
         - '@cv/*'
+        - '@sto-steps/*'
       paths:
         - lodash
         - name: yaml

src/modules/33-auth-settings/.eslintrc.yml

@@ -17,6 +17,7 @@ rules:
         - modules/75-cf/*
         - modules/75-ci/*
         - modules/85-cv/*
+        - modules/85-sto-steps/*
         - '@connectors/*'
         - '@user-profile/*'
         - '@gitsync/*'
@@ -30,6 +31,7 @@ rules:
         - '@cf/*'
         - '@ci/*'
         - '@cv/*'
+        - '@sto-steps/*'
       paths:
         - lodash
         - name: yaml

src/modules/35-connectors/.eslintrc.yml

@@ -16,6 +16,7 @@ rules:
         - modules/75-cf/*
         - modules/75-ci/*
         - modules/85-cv/*
+        - modules/85-sto-steps/*
         - '@user-profile/*'
         - '@gitsync/*'
         - '@dashboards/*'
@@ -28,6 +29,7 @@ rules:
         - '@cf/*'
         - '@ci/*'
         - '@cv/*'
+        - '@sto-steps/*'
       paths:
         - lodash
         - name: yaml

src/modules/35-user-profile/.eslintrc.yml

@@ -16,6 +16,7 @@ rules:
         - modules/75-cf/*
         - modules/75-ci/*
         - modules/85-cv/*
+        - modules/85-sto-steps/*
         - '@connectors/*'
         - '@gitsync/*'
         - '@dashboards/*'
@@ -28,6 +29,7 @@ rules:
         - '@cf/*'
         - '@ci/*'
         - '@cv/*'
+        - '@sto-steps/*'
       paths:
         - lodash
         - name: yaml

src/modules/40-gitsync/.eslintrc.yml

@@ -14,6 +14,7 @@ rules:
         - modules/75-cf/*
         - modules/75-ci/*
         - modules/85-cv/*
+        - modules/85-sto-steps/*
         - '@dashboards/*'
         - '@projects-orgs/*'
         - '@pipeline/*'
@@ -24,6 +25,7 @@ rules:
         - '@cf/*'
         - '@ci/*'
         - '@cv/*'
+        - '@sto-steps/*'
       paths:
         - lodash
         - name: yaml

src/modules/45-dashboards/.eslintrc.yml

@@ -13,6 +13,7 @@ rules:
         - modules/75-cf/*
         - modules/75-ci/*
         - modules/85-cv/*
+        - modules/85-sto-steps/*
         - '@projects-orgs/*'
         - '@pipeline/*'
         - '@templates-library/*'
@@ -22,6 +23,7 @@ rules:
         - '@cf/*'
         - '@ci/*'
         - '@cv/*'
+        - '@sto-steps/*'
       paths:
         - lodash
         - name: yaml

src/modules/45-projects-orgs/.eslintrc.yml

@@ -13,6 +13,7 @@ rules:
         - modules/75-cf/*
         - modules/75-ci/*
         - modules/85-cv/*
+        - modules/85-sto-steps/*
         - '@dashboards/*'
         - '@pipeline/*'
         - '@templates-library/*'
@@ -22,6 +23,7 @@ rules:
         - '@cf/*'
         - '@ci/*'
         - '@cv/*'
+        - '@sto-steps/*'
       paths:
         - lodash
         - name: yaml

src/modules/70-pipeline/.eslintrc.yml

@@ -13,13 +13,15 @@ rules:
         - modules/75-cf/*
         - modules/75-ci/*
         - modules/85-cv/*
+        - modules/85-sto-steps/*
         - '@templates-library/*'
         - '@triggers/*'
         - '@cd/*'
         - '@ce/*'
         - '@cf/*'
         - '@ci/*'
         - '@cv/*'
+        - '@sto-steps/*'
       paths:
         - lodash
         - name: yaml

src/modules/70-pipeline/components/PipelineSteps/PipelineStepInterface.ts

@@ -54,5 +54,6 @@ export enum StepType {
   KubernetesGcp = 'KubernetesGcp',
   ResourceConstraint = 'ResourceConstraint',
   FlagConfiguration = 'FlagConfiguration',
-  Template = 'Template'
+  Template = 'Template',
+  ZeroNorth = 'Security'
 }

src/modules/70-pipeline/components/PipelineStudio/StepUtil.ts

@@ -34,6 +34,8 @@ import { StepType } from '../PipelineSteps/PipelineStepInterface'
 import '@cd/components/PipelineSteps'
 // eslint-disable-next-line no-restricted-imports
 import '@ci/components/PipelineSteps'
+// eslint-disable-next-line no-restricted-imports
+import '@sto-steps/components/PipelineSteps'
 import { StepViewType } from '../AbstractSteps/Step'
 
 export const clearRuntimeInput = (template: PipelineInfoConfig): PipelineInfoConfig => {

src/modules/70-pipeline/pages/execution/ExecutionLandingPage/ExecutionTabs/ExecutionTabs.tsx

@@ -140,26 +140,6 @@ export default function ExecutionTabs(props: React.PropsWithChildren<unknown>):
     }
   ]
 
-  if (
-    (isCD && stoCDPipelineSecurityEnabled) ||
-    (isCI && stoCIPipelineSecurityEnabled) ||
-    localStorage.STO_PIPELINE_SECURITY_ENABLED
-  ) {
-    tabList.push({
-      id: TAB_ID_MAP.STO_SECURITY,
-      title: (
-        <NavLink
-          to={routes.toExecutionSecurityView(params) + location.search}
-          className={css.tabLink}
-          activeClassName={css.activeLink}
-        >
-          <Icon name="report-gear-grey" size={16} />
-          <span>{getString('pipeline.security.title')}</span>
-        </NavLink>
-      )
-    })
-  }
-
   if (opaBasedGovernanceEnabled) {
     tabList.push({
       id: TAB_ID_MAP.POLICY_EVALUATIONS,
@@ -223,6 +203,26 @@ export default function ExecutionTabs(props: React.PropsWithChildren<unknown>):
     })
   }
 
+  if (
+    (isCD && stoCDPipelineSecurityEnabled) ||
+    (isCI && stoCIPipelineSecurityEnabled) ||
+    localStorage.STO_PIPELINE_SECURITY_ENABLED
+  ) {
+    tabList.push({
+      id: TAB_ID_MAP.STO_SECURITY,
+      title: (
+        <NavLink
+          to={routes.toExecutionSecurityView(params) + location.search}
+          className={css.tabLink}
+          activeClassName={css.activeLink}
+        >
+          <Icon name="sto-grey" size={16} />
+          <span>{getString('pipeline.security.title')}</span>
+        </NavLink>
+      )
+    })
+  }
+
   return (
     <div className={css.main}>
       <div>

src/modules/70-pipeline/pages/execution/ExecutionSecurityView/ExecutionSecurityView.tsx

@@ -16,16 +16,16 @@ export default function ExecutionSecurityView(): React.ReactElement | null {
   const { accountId, orgIdentifier, projectIdentifier, pipelineIdentifier, executionIdentifier, module } =
     useParams<PipelineType<ExecutionPathProps>>()
   const context = useExecutionContext()
-  const pipelineExecutionSummary = context?.pipelineExecutionDetail?.pipelineExecutionSummary
+  const pipelineExecutionDetail = context?.pipelineExecutionDetail
 
-  if (!pipelineExecutionSummary) {
+  if (!pipelineExecutionDetail || !pipelineExecutionDetail.pipelineExecutionSummary) {
     return null
   }
 
   return (
     <Container width="100%" height="100%">
       <PipelineSecurityView
-        pipelineExecutionSummary={pipelineExecutionSummary}
+        pipelineExecutionDetail={pipelineExecutionDetail}
         accountId={accountId}
         module={module}
         orgIdentifier={orgIdentifier}