From 99fef481b5e8d75a051c00f18cb93dc8e0b141f0 Mon Sep 17 00:00:00 2001
From: Oscar Reyes <oscar-rreyes1@hotmail.com>
Date: Tue, 3 Oct 2023 13:27:31 -0600
Subject: [PATCH] fix(web): datastore settings styles (#3207)

---
 .../DataStoreForm/DataStoreForm.styled.ts     | 38 ++++++++---
 .../DataStoreForm/DataStoreSelectionInput.tsx | 64 ++++++++++---------
 2 files changed, 63 insertions(+), 39 deletions(-)

diff --git a/web/src/components/Settings/DataStoreForm/DataStoreForm.styled.ts b/web/src/components/Settings/DataStoreForm/DataStoreForm.styled.ts
index afd73427f3..0216f24e92 100644
--- a/web/src/components/Settings/DataStoreForm/DataStoreForm.styled.ts
+++ b/web/src/components/Settings/DataStoreForm/DataStoreForm.styled.ts
@@ -1,20 +1,23 @@
 import styled, {css} from 'styled-components';
-import {Typography} from 'antd';
+import {Tabs, Typography} from 'antd';
 import {CheckCircleOutlined} from '@ant-design/icons';
 
+const defaultHeight = 'calc(100vh - 106px - 48px);';
+
 export const FormContainer = styled.div`
   display: grid;
   grid-template-columns: auto 1fr;
-  gap: 24px;
-  min-height: 750px;
+  height: ${defaultHeight};
+  overflow: hidden;
 `;
 
 export const FactoryContainer = styled.div`
   display: flex;
   flex-direction: column;
   padding: 22px 0;
-  border-left: ${({theme}) => `1px solid ${theme.color.borderLight}`};
   justify-content: space-between;
+  height: ${defaultHeight};
+  overflow-y: scroll;
 
   .ant-form-item {
     margin: 0;
@@ -28,10 +31,23 @@ export const TopContainer = styled.div`
   padding: 0 22px;
 `;
 
-export const DataStoreListContainer = styled.div`
-  display: flex;
-  gap: 16px;
-  flex-direction: column;
+export const DataStoreListContainer = styled(Tabs)`
+  height: calc(100vh - 25px - 106px - 48px);
+
+  && {
+    .ant-tabs-content-holder {
+      width: 1px;
+    }
+
+    .ant-tabs-tab {
+      margin: 0 !important;
+      padding: 0;
+    }
+
+    .ant-tabs-nav-list {
+      gap: 16px;
+    }
+  }
 `;
 
 export const DataStoreItemContainer = styled.div<{$isDisabled: boolean; $isSelected: boolean}>`
@@ -40,7 +56,6 @@ export const DataStoreItemContainer = styled.div<{$isDisabled: boolean; $isSelec
   gap: 10px;
   padding: 12px 22px;
   cursor: pointer;
-  border-left: ${({theme, $isSelected}) => $isSelected && `2px solid ${theme.color.primary}`};
 
   ${({$isDisabled}) =>
     $isDisabled &&
@@ -95,8 +110,11 @@ export const ButtonsContainer = styled.div`
   justify-content: space-between;
   gap: 8px;
   margin-top: 23px;
-  padding: 16px 22px 0;
+  padding: 16px 22px;
   border-top: 1px solid ${({theme}) => theme.color.borderLight};
+  position: sticky;
+  bottom: 0;
+  background: white;
 `;
 
 export const SaveContainer = styled.div`
diff --git a/web/src/components/Settings/DataStoreForm/DataStoreSelectionInput.tsx b/web/src/components/Settings/DataStoreForm/DataStoreSelectionInput.tsx
index 63e357f8ca..89e382bd07 100644
--- a/web/src/components/Settings/DataStoreForm/DataStoreSelectionInput.tsx
+++ b/web/src/components/Settings/DataStoreForm/DataStoreSelectionInput.tsx
@@ -1,4 +1,4 @@
-import {Popover} from 'antd';
+import {Popover, Tabs} from 'antd';
 import {noop} from 'lodash';
 import {useTheme} from 'styled-components';
 import {ConfigMode, SupportedDataStores} from 'types/DataStore.types';
@@ -26,7 +26,7 @@ const DataStoreSelectionInput = ({onChange = noop, value = SupportedDataStores.J
   const configuredDataStoreType = dataStoreConfig.defaultDataStore.type;
 
   return (
-    <S.DataStoreListContainer>
+    <S.DataStoreListContainer tabPosition="left">
       {supportedDataStoreList.map(dataStore => {
         if (dataStore === SupportedDataStores.Agent && !getFlag(Flag.IsAgentDataStoreEnabled)) {
           return null;
@@ -35,37 +35,43 @@ 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
-            $isDisabled={isDisabled}
-            $isSelected={isSelected}
+          <Tabs.TabPane
             key={dataStore}
-            onClick={() => (isDisabled ? noop() : onChange(dataStore))}
-          >
-            <DataStoreIcon dataStoreType={dataStore} color={isSelected ? primary : text} width="22" height="22" />
-
-            {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"
+            tab={
+              <S.DataStoreItemContainer
+                $isDisabled={isDisabled}
+                $isSelected={isSelected}
+                key={dataStore}
+                onClick={() => (isDisabled ? noop() : onChange(dataStore))}
               >
-                <S.DataStoreName $isSelected={isSelected}>{SupportedDataStoresToName[dataStore]}</S.DataStoreName>
-              </Popover>
-            ) : (
-              <S.DataStoreName $isSelected={isSelected}>{SupportedDataStoresToName[dataStore]}</S.DataStoreName>
-            )}
+                <DataStoreIcon dataStoreType={dataStore} color={isSelected ? primary : text} width="22" height="22" />
+
+                {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 />
-              </Popover>
-            )}
-          </S.DataStoreItemContainer>
+                {isConfigured && (
+                  <Popover content="This data source is currently configured" placement="right">
+                    <S.InfoIcon />
+                  </Popover>
+                )}
+              </S.DataStoreItemContainer>
+            }
+          />
         );
       })}
     </S.DataStoreListContainer>