feat(web): support disabled data stores (#3184)

kubeshop · Sep 26, 2023 · 20b54fc · 20b54fc
1 parent 7c658f1
commit 20b54fc
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 5 deletions.
diff --git a/web/src/components/CustomizationWrapper/CustomizationWrapper.tsx b/web/src/components/CustomizationWrapper/CustomizationWrapper.tsx
@@ -5,7 +5,11 @@ interface IProps {
   children: React.ReactNode;
 }
 
-const flagValues = {[Flag.IsAnalyticsPageEnabled]: true, [Flag.IsAgentDataStoreEnabled]: false};
+const flagValues = {
+  [Flag.IsAnalyticsPageEnabled]: true,
+  [Flag.IsAgentDataStoreEnabled]: false,
+  [Flag.IsLocalModeEnabled]: false,
+};
 
 const getComponent = <T,>(id: string, fallback: React.ComponentType<T>) => fallback;
 const getFlag = (flag: Flag) => flagValues[flag];

diff --git a/web/src/components/Settings/DataStoreForm/DataStoreForm.styled.ts b/web/src/components/Settings/DataStoreForm/DataStoreForm.styled.ts
@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled, {css} from 'styled-components';
 import {Typography} from 'antd';
 import {CheckCircleOutlined} from '@ant-design/icons';
 
@@ -34,13 +34,20 @@ export const DataStoreListContainer = styled.div`
   flex-direction: column;
 `;
 
-export const DataStoreItemContainer = styled.div<{$isSelected: boolean}>`
+export const DataStoreItemContainer = styled.div<{$isDisabled: boolean; $isSelected: boolean}>`
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 12px 22px;
   cursor: pointer;
   border-left: ${({theme, $isSelected}) => $isSelected && `2px solid ${theme.color.primary}`};
+
+  ${({$isDisabled}) =>
+    $isDisabled &&
+    css`
+      cursor: not-allowed;
+      opacity: 0.5;
+    `}
 `;
 
 export const Circle = styled.div`

diff --git a/web/src/components/Settings/DataStoreForm/DataStoreSelectionInput.tsx b/web/src/components/Settings/DataStoreForm/DataStoreSelectionInput.tsx
@@ -18,6 +18,7 @@ const supportedDataStoreList = Object.values(SupportedDataStores);
 
 const DataStoreSelectionInput = ({onChange = noop, value = SupportedDataStores.JAEGER}: IProps) => {
   const {getFlag} = useCustomization();
+  const isLocalModeEnabled = getFlag(Flag.IsLocalModeEnabled);
   const {
     color: {text, primary},
   } = useTheme();
@@ -33,10 +34,32 @@ const DataStoreSelectionInput = ({onChange = noop, value = SupportedDataStores.J
 
         const isSelected = value === dataStore;
         const isConfigured = configuredDataStoreType === dataStore && dataStoreConfig.mode === ConfigMode.READY;
+        const isDisabled = isLocalModeEnabled && dataStore !== SupportedDataStores.Agent;
         return (
-          <S.DataStoreItemContainer $isSelected={isSelected} key={dataStore} onClick={() => onChange(dataStore)}>
+          <S.DataStoreItemContainer
+            $isDisabled={isDisabled}
+            $isSelected={isSelected}
+            key={dataStore}
+            onClick={() => (isDisabled ? noop() : onChange(dataStore))}
+          >
             <DataStoreIcon dataStoreType={dataStore} color={isSelected ? primary : text} width="22" height="22" />
-            <S.DataStoreName $isSelected={isSelected}>{SupportedDataStoresToName[dataStore]}</S.DataStoreName>
+
+            {isDisabled ? (
+              <Popover
+                content={
+                  <div>
+                    In localMode only the Agent data store can be used. <br /> If you want to connect to a different
+                    data store <br /> please create a new environment
+                  </div>
+                }
+                placement="right"
+              >
+                <S.DataStoreName $isSelected={isSelected}>{SupportedDataStoresToName[dataStore]}</S.DataStoreName>
+              </Popover>
+            ) : (
+              <S.DataStoreName $isSelected={isSelected}>{SupportedDataStoresToName[dataStore]}</S.DataStoreName>
+            )}
+
             {isConfigured && (
               <Popover content="This data source is currently configured" placement="right">
                 <S.InfoIcon />

diff --git a/web/src/providers/Customization/Customization.provider.tsx b/web/src/providers/Customization/Customization.provider.tsx
@@ -9,6 +9,7 @@ export enum Operation {
 export enum Flag {
   IsAnalyticsPageEnabled = 'isAnalyticsPageEnabled',
   IsAgentDataStoreEnabled = 'isAgentDataStoreEnabled',
+  IsLocalModeEnabled = 'isLocalModeEnabled',
 }
 
 interface IContext {