from code review, put chat dropdown behind a feature flag, default to…

… search
jay-hodgson · Sep 10, 2024 · 6a164da · 6a164da
1 parent 439737b
commit 6a164da
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 24 deletions.
diff --git a/packages/synapse-react-client/src/components/SynapseHomepageV2/SynapseHomepageChatSearch.tsx b/packages/synapse-react-client/src/components/SynapseHomepageV2/SynapseHomepageChatSearch.tsx
@@ -6,6 +6,9 @@ import { Box } from '@mui/material'
 import { Select } from '@mui/material'
 import { useTheme } from '@mui/material'
 import { ColorPartial } from '@mui/material/styles/createPalette'
+import { useGetFeatureFlag } from 'src/synapse-queries'
+import { FeatureFlagEnum } from '@sage-bionetworks/synapse-types'
+import { Search } from '../../assets/themed_icons'
 
 export type SynapseHomepageChatSearchProps = {
   gotoPlace: (href: string) => void
@@ -27,6 +30,9 @@ export const SynapseHomepageChatSearch: React.FunctionComponent<
   const [searchValue, setSearchValue] = useState('')
   const [chatValue, setChatValue] = useState('')
   const [mode, setMode] = useState(SearchMode.SEARCH)
+  const isChatbotFeatureEnabled = useGetFeatureFlag(
+    FeatureFlagEnum.HOMEPAGE_CHATBOT,
+  )
   const executeSearch = () => {
     if (mode == SearchMode.SEARCH) {
       gotoPlace(`/Search:${encodeURIComponent(searchValue)}`)
@@ -52,30 +58,39 @@ export const SynapseHomepageChatSearch: React.FunctionComponent<
         <OutlinedInput
           value={mode == SearchMode.SEARCH ? searchValue : chatValue}
           startAdornment={
-            <InputAdornment
-              position="start"
-              sx={{ p: '0px', ml: '7px', mr: '13px' }}
-            >
-              <Select
-                value={mode}
-                sx={{
-                  fontSize: '24px',
-                  fontWeight: 400,
-                  minWidth: '125px',
-                  color: (theme.palette.secondary as ColorPartial)[600],
-                  '& div[role="combobox"]': {
-                    p: '14px 12px',
-                  },
-                }}
-                onChange={v => {
-                  setMode(v.target.value as SearchMode)
-                  //restore search or chat value
-                }}
+            isChatbotFeatureEnabled ? (
+              <InputAdornment
+                position="start"
+                sx={{ p: '0px', ml: '7px', mr: '13px' }}
               >
-                <MenuItem value={SearchMode.SEARCH}>Search</MenuItem>
-                <MenuItem value={SearchMode.CHAT}>Chat</MenuItem>
-              </Select>
-            </InputAdornment>
+                <Select
+                  value={mode}
+                  sx={{
+                    fontSize: '24px',
+                    fontWeight: 400,
+                    minWidth: '125px',
+                    color: (theme.palette.secondary as ColorPartial)[600],
+                    '& div[role="combobox"]': {
+                      p: '14px 12px',
+                    },
+                  }}
+                  onChange={v => {
+                    setMode(v.target.value as SearchMode)
+                    //restore search or chat value
+                  }}
+                >
+                  <MenuItem value={SearchMode.SEARCH}>Search</MenuItem>
+                  <MenuItem value={SearchMode.CHAT}>Chat</MenuItem>
+                </Select>
+              </InputAdornment>
+            ) : (
+              <InputAdornment position="start" sx={{ ml: '7px', mr: '13px' }}>
+                <Search
+                  size={32}
+                  fill={(theme.palette.secondary as ColorPartial)[600]}
+                />
+              </InputAdornment>
+            )
           }
           placeholder={
             mode == SearchMode.SEARCH ? 'Search Synapse' : 'Ask a question'

diff --git a/packages/synapse-react-client/src/components/SynapseHomepageV2/SynapseHomepageV2.stories.ts b/packages/synapse-react-client/src/components/SynapseHomepageV2/SynapseHomepageV2.stories.ts
@@ -1,9 +1,14 @@
 import { Meta, StoryObj } from '@storybook/react'
 import { SynapseHomepageV2 } from './SynapseHomepageV2'
 import { getHandlersForTableQuery } from '../../mocks/msw/handlers/tableQueryHandlers'
-import { MOCK_REPO_ORIGIN } from '../../utils/functions/getEndpoint'
+import {
+  MOCK_REPO_ORIGIN,
+  PRODUCTION_ENDPOINT_CONFIG,
+} from '../../utils/functions/getEndpoint'
 import { getFileHandlers } from '../../mocks/msw/handlers/fileHandlers'
 import { registerSynapseHomepageMockQueries } from '../../mocks/query/mockHomepageQueryResultData'
+import { getFeatureFlagsOverride } from 'src/mocks/msw/handlers/featureFlagHandlers'
+import { FeatureFlagEnum } from '@sage-bionetworks/synapse-types'
 
 const meta = {
   title: 'Synapse/HomePage',
@@ -36,6 +41,12 @@ export const DemoVersion2: Story = {
       handlers: [
         ...getFileHandlers(MOCK_REPO_ORIGIN),
         ...getHandlersForTableQuery(MOCK_REPO_ORIGIN),
+        getFeatureFlagsOverride({
+          portalOrigin: PRODUCTION_ENDPOINT_CONFIG.PORTAL,
+          overrides: {
+            [FeatureFlagEnum.HOMEPAGE_CHATBOT]: true,
+          },
+        }),
       ],
     },
   },

diff --git a/packages/synapse-react-client/src/mocks/msw/handlers/featureFlagHandlers.ts b/packages/synapse-react-client/src/mocks/msw/handlers/featureFlagHandlers.ts
@@ -7,6 +7,7 @@ const MOCK_FEATURE_FLAGS_VALUE: FeatureFlags = {
   [FeatureFlagEnum.VIRTUALTABLE_SUPPORT]: false,
   [FeatureFlagEnum.JSONSCHEMA_VALIDATION_STATUS]: false,
   [FeatureFlagEnum.REACT_ENTITY_ACL_EDITOR]: false,
+  [FeatureFlagEnum.HOMEPAGE_CHATBOT]: false,
 }
 
 type FeatureFlagHandlerOptions = {