Add feature flag check before rendering ui switch button

web/src/pages/RepositoriesListing/RepositoriesListing.tsx

@@ -25,7 +25,8 @@ import {
   Utils,
   TableV2 as Table,
   Text,
-  useToaster
+  useToaster,
+  Button
 } from '@harnessio/uicore'
 import { ProgressBar, Intent } from '@blueprintjs/core'
 import { Color, FontVariation } from '@harnessio/design-system'
@@ -33,12 +34,13 @@ import type { CellProps, Column } from 'react-table'
 import Keywords from 'react-keywords'
 import cx from 'classnames'
 import { useGet } from 'restful-react'
-import { useHistory } from 'react-router-dom'
+import { useHistory, useLocation } from 'react-router-dom'
 import { useStrings, String } from 'framework/strings'
 import { voidFn, formatDate, getErrorMessage, LIST_FETCHING_LIMIT, PageBrowserProps } from 'utils/Utils'
 import { NewRepoModalButton } from 'components/NewRepoModalButton/NewRepoModalButton'
 import type { RepoRepositoryOutput } from 'services/code'
 import { useDeleteRepository } from 'services/code'
+import { useFeatureFlags } from 'hooks/useFeatureFlag'
 import { usePageIndex } from 'hooks/usePageIndex'
 import { useQueryParams } from 'hooks/useQueryParams'
 import { useUpdateQueryParams } from 'hooks/useUpdateQueryParams'
@@ -74,6 +76,7 @@ interface ProgressState {
 
 export default function RepositoriesListing() {
   const { getString } = useStrings()
+  const { pathname } = useLocation()
   const history = useHistory()
   const rowContainerRef = useRef<HTMLDivElement>(null)
   const [nameTextWidth, setNameTextWidth] = useState(600)
@@ -86,6 +89,7 @@ export default function RepositoriesListing() {
   const [page, setPage] = usePageIndex(pageInit)
   const { showError, showSuccess } = useToaster()
   const [updatedRepositories, setUpdatedRepositories] = useState<RepoRepositoryOutput[]>()
+  const { CODE_ENABLE_MFE_V2: isCodeV2Enabled } = useFeatureFlags()
 
   const {
     data: repositories,
@@ -365,7 +369,32 @@ export default function RepositoriesListing() {
 
   return (
     <Container className={css.main}>
-      <PageHeader title={getString('repositories')} toolbar={standalone ? null : <KeywordSearch />} />
+      <PageHeader
+        title={getString('repositories')}
+        toolbar={
+          standalone ? null : (
+            <>
+              {isCodeV2Enabled ? (
+                <Button
+                  variation={ButtonVariation.SECONDARY}
+                  onClick={() => {
+                    let newUIPath = pathname
+                    if (!pathname.includes('/ng')) {
+                      newUIPath.replace('/account', '/ng/account')
+                    }
+                    if (!pathname.includes('/codev2')) {
+                      newUIPath = newUIPath.replace('/code', '/codev2')
+                    }
+                    history.replace(newUIPath)
+                  }}>
+                  Try New UI
+                </Button>
+              ) : null}
+              <KeywordSearch />
+            </>
+          )
+        }
+      />
       <PageBody
         className={cx({ [css.withError]: !!error })}
         error={error ? getErrorMessage(error) : null}