implement ui feature flags and pipelines and secrets skeleton pages

web/src/RouteDefinitions.ts

@@ -37,6 +37,8 @@ export interface CODERoutes {
 
   toCODESpaceAccessControl: (args: Required<Pick<CODEProps, 'space'>>) => string
   toCODESpaceSettings: (args: Required<Pick<CODEProps, 'space'>>) => string
+  toCODEPipelines: (args: Required<Pick<CODEProps, 'space'>>) => string
+  toCODESecrets: (args: Required<Pick<CODEProps, 'space'>>) => string
 
   toCODEGlobalSettings: () => string
   toCODEUsers: () => string
@@ -72,6 +74,8 @@ export const routes: CODERoutes = {
 
   toCODESpaceAccessControl: ({ space }) => `/access-control/${space}`,
   toCODESpaceSettings: ({ space }) => `/settings/${space}`,
+  toCODEPipelines: ({ space }) => `/pipelines/${space}`,
+  toCODESecrets: ({ space }) => `/secrets/${space}`,
 
   toCODEGlobalSettings: () => '/settings',
   toCODEUsers: () => '/users',

web/src/RouteDestinations.tsx

@@ -5,6 +5,8 @@ import { SignUp } from 'pages/SignUp/SignUp'
 import Repository from 'pages/Repository/Repository'
 import { routes, pathProps } from 'RouteDefinitions'
 import RepositoriesListing from 'pages/RepositoriesListing/RepositoriesListing'
+import PipelineList from 'pages/PipelineList/PipelineList'
+import SecretList from 'pages/SecretList/SecretList'
 import { LayoutWithSideNav, LayoutWithoutSideNav } from 'layouts/layout'
 import RepositoryFileEdit from 'pages/RepositoryFileEdit/RepositoryFileEdit'
 import RepositoryCommits from 'pages/RepositoryCommits/RepositoryCommits'
@@ -25,11 +27,14 @@ import ChangePassword from 'pages/ChangePassword/ChangePassword'
 import SpaceAccessControl from 'pages/SpaceAccessControl/SpaceAccessControl'
 import SpaceSettings from 'pages/SpaceSettings/SpaceSettings'
 import { useStrings } from 'framework/strings'
+import { useFeatureFlag } from 'hooks/useFeatureFlag'
 
 export const RouteDestinations: React.FC = React.memo(function RouteDestinations() {
   const { getString } = useStrings()
   const repoPath = `${pathProps.space}/${pathProps.repoName}`
 
+  const { OPEN_SOURCE_PIPELINES, OPEN_SOURCE_SECRETS } = useFeatureFlag()
+
   return (
     <BrowserRouter>
       <Switch>
@@ -143,12 +148,28 @@ export const RouteDestinations: React.FC = React.memo(function RouteDestinations
           </LayoutWithSideNav>
         </Route>
 
-        <Route path={routes.toCODERepositories({ space: pathProps.space })} exact>
+        <Route path={routes.toCODERepositories({ space: pathProps.space })}>
           <LayoutWithSideNav title={getString('pageTitle.repositories')}>
             <RepositoriesListing />
           </LayoutWithSideNav>
         </Route>
 
+        {OPEN_SOURCE_PIPELINES && (
+          <Route path={routes.toCODEPipelines({ space: pathProps.space })} exact>
+            <LayoutWithSideNav title={getString('pageTitle.pipelines')}>
+              <PipelineList />
+            </LayoutWithSideNav>
+          </Route>
+        )}
+
+        {OPEN_SOURCE_SECRETS && (
+          <Route path={routes.toCODESecrets({ space: pathProps.space })} exact>
+            <LayoutWithSideNav title={getString('pageTitle.secrets')}>
+              <SecretList />
+            </LayoutWithSideNav>
+          </Route>
+        )}
+
         <Route
           path={routes.toCODECommit({
             repoPath,

web/src/framework/strings/stringTypes.ts

@@ -277,12 +277,14 @@ export interface StringsMap {
   'pageTitle.createWebhook': string
   'pageTitle.editFile': string
   'pageTitle.home': string
+  'pageTitle.pipelines': string
   'pageTitle.pullRequest': string
   'pageTitle.pullRequests': string
   'pageTitle.register': string
   'pageTitle.repositories': string
   'pageTitle.repository': string
   'pageTitle.repositorySettings': string
+  'pageTitle.secrets': string
   'pageTitle.signin': string
   'pageTitle.spaceSettings': string
   'pageTitle.tags': string

web/src/hooks/useFeatureFlag.ts

@@ -0,0 +1,8 @@
+// temp file to hide open source pipelines and secrets - can be extended if needs be
+
+const featureFlags = {
+  OPEN_SOURCE_PIPELINES: false,
+  OPEN_SOURCE_SECRETS: false
+}
+
+export const useFeatureFlag = (): Record<keyof typeof featureFlags, boolean> => featureFlags

web/src/i18n/strings.en.yaml

@@ -90,6 +90,8 @@ pageTitle:
   users: Users
   userProfile: User Profile
   changePassword: Change Password
+  pipelines: Pipelines
+  secrets: Secrets
 repos:
   name: Repo Name
   data: Repo Data

web/src/layouts/menu/DefaultMenu.tsx

@@ -7,6 +7,7 @@ import { useStrings } from 'framework/strings'
 import { routes } from 'RouteDefinitions'
 import type { TypesSpace } from 'services/code'
 import { SpaceSelector } from 'components/SpaceSelector/SpaceSelector'
+import { useFeatureFlag } from 'hooks/useFeatureFlag'
 import { NavMenuItem } from './NavMenuItem'
 import css from './DefaultMenu.module.scss'
 
@@ -22,6 +23,8 @@ export const DefaultMenu: React.FC = () => {
     [routeMatch]
   )
 
+  const { OPEN_SOURCE_PIPELINES, OPEN_SOURCE_SECRETS } = useFeatureFlag()
+
   return (
     <Container className={css.main}>
       <Layout.Vertical spacing="small">
@@ -125,6 +128,28 @@ export const DefaultMenu: React.FC = () => {
           </Container>
         </Render>
 
+        {OPEN_SOURCE_PIPELINES && (
+          <Render when={selectedSpace}>
+            {/* icon is placeholder */}
+            <NavMenuItem
+              icon="pipeline"
+              label={getString('pageTitle.pipelines')}
+              to={routes.toCODEPipelines({ space: selectedSpace?.path as string })}
+            />
+          </Render>
+        )}
+
+        {OPEN_SOURCE_SECRETS && (
+          <Render when={selectedSpace}>
+            {/* icon is placeholder */}
+            <NavMenuItem
+              icon="lock"
+              label={getString('pageTitle.secrets')}
+              to={routes.toCODESecrets({ space: selectedSpace?.path as string })}
+            />
+          </Render>
+        )}
+
         <Render when={selectedSpace}>
           <NavMenuItem
             icon="nav-project"

web/src/pages/PipelineList/PipelineList.module.scss

@@ -0,0 +1,4 @@
+.main {
+  min-height: var(--page-min-height, 100%);
+  background-color: var(--primary-bg) !important;
+}

web/src/pages/PipelineList/PipelineList.module.scss.d.ts

@@ -0,0 +1,6 @@
+/* eslint-disable */
+// this is an auto-generated file
+declare const styles: {
+  readonly main: string
+}
+export default styles

web/src/pages/PipelineList/PipelineList.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import { Container, PageHeader } from '@harness/uicore'
+import { useStrings } from 'framework/strings'
+import css from './PipelineList.module.scss'
+
+const PipelineList = () => {
+  const { getString } = useStrings()
+
+  return (
+    <Container className={css.main}>
+      <PageHeader title={getString('pageTitle.pipelines')} />
+    </Container>
+  )
+}
+
+export default PipelineList

web/src/pages/SecretList/SecretList.module.scss

@@ -0,0 +1,4 @@
+.main {
+  min-height: var(--page-min-height, 100%);
+  background-color: var(--primary-bg) !important;
+}

web/src/pages/SecretList/SecretList.module.scss.d.ts

@@ -0,0 +1,6 @@
+/* eslint-disable */
+// this is an auto-generated file
+declare const styles: {
+  readonly main: string
+}
+export default styles

web/src/pages/SecretList/SecretList.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import { Container, PageHeader } from '@harness/uicore'
+import { useStrings } from 'framework/strings'
+import css from './SecretList.module.scss'
+
+const PipelineList = () => {
+  const { getString } = useStrings()
+
+  return (
+    <Container className={css.main}>
+      <PageHeader title={getString('pageTitle.secrets')} />
+    </Container>
+  )
+}
+
+export default PipelineList