Merge pull request #436 from l3vels/fix/more-design-changes

Fix/more design changes
l3vels · Feb 16, 2024 · 3362fad · 3362fad
2 parents d483d56 + 1109ef7
commit 3362fad
Show file tree

Hide file tree

Showing 14 changed files with 186 additions and 79 deletions.
diff --git a/apps/ui/src/modals/DatasourceListModal.tsx b/apps/ui/src/modals/DatasourceListModal.tsx
@@ -17,11 +17,26 @@ import { DATA_LOADER_IMAGES } from 'pages/Datasource/constants'
 import { useEffect, useState } from 'react'
 import { ButtonPrimary } from 'components/Button/Button'
 import { t } from 'i18next'
+import DatasourceForm from 'pages/Datasource/DatasourceForm'
+import CreateDatasourceForm from 'pages/Datasource/DatasourceForm/CreateDatasourceForm'
+import EditDatasourceForm from 'pages/Datasource/DatasourceForm/EditDatasourceForm'
+import TabList from 'share-ui/components/Tabs/TabList/TabList'
+import Tab from 'share-ui/components/Tabs/Tab/Tab'
+import TabsContext from 'share-ui/components/Tabs/TabsContext/TabsContext'
+import TabPanels from 'share-ui/components/Tabs/TabPanels/TabPanels'
+import TabPanel from 'share-ui/components/Tabs/TabPanel/TabPanel'
+import styled from 'styled-components'
 
 const DatasourceListModal = () => {
   const { closeModal } = useModal()
 
   const [pickedDatasource, setPickedDatasource] = useState(null as any)
+  const [createState, setCreateState] = useState(null as any)
+  const [activeTab, setActiveTab] = useState(0)
+
+  const handleTabClick = (tabId: number, tabName: string) => {
+    setActiveTab(tabId)
+  }
 
   const { data: datasources } = useDatasourcesService()
 
@@ -49,10 +64,20 @@ const DatasourceListModal = () => {
     formik.submitForm()
   }
 
+  const handlePickDatasource = (id: string) => {
+    setPickedDatasource(id)
+    setCreateState(null)
+  }
+
+  const handleCreateState = (type: string) => {
+    setCreateState(type)
+    setPickedDatasource(null)
+  }
+
   useEffect(() => {
-    if (installedDatasources?.length > 0) setPickedDatasource(installedDatasources?.[0]?.id)
+    if (installedDatasources?.length > 0) handlePickDatasource(installedDatasources?.[0]?.id)
     else if (notInstalledDatasources?.length > 0)
-      setPickedDatasource(notInstalledDatasources?.[0]?.id)
+      handlePickDatasource(notInstalledDatasources?.[0]?.id)
   }, [agentDatasources])
 
   return (
@@ -76,7 +101,7 @@ const DatasourceListModal = () => {
               return (
                 <MiniToolCard
                   key={datasource.id}
-                  onClick={() => setPickedDatasource(datasource.id)}
+                  onClick={() => handlePickDatasource(datasource.id)}
                   picked={pickedDatasource === datasource.id}
                   name={datasource.name}
                   logo={imageSrc}
@@ -86,7 +111,23 @@ const DatasourceListModal = () => {
 
             <StyledHorizontalDivider />
 
-            <ListHeader title={'Marketplace'} />
+            <ListHeader
+              title={t('datasource')}
+              multiOption={[
+                {
+                  label: `File`,
+                  function: () => handleCreateState('File'),
+                },
+                {
+                  label: `MySQL`,
+                  function: () => handleCreateState('MySQL'),
+                },
+                {
+                  label: `Postgres`,
+                  function: () => handleCreateState('Postgres'),
+                },
+              ]}
+            />
             {notInstalledDatasources?.map((datasource: any) => {
               const filteredLogos = DATA_LOADER_IMAGES.filter(
                 loaderImages => loaderImages.sourceName === datasource.source_type,
@@ -97,7 +138,7 @@ const DatasourceListModal = () => {
               return (
                 <MiniToolCard
                   key={datasource.id}
-                  onClick={() => setPickedDatasource(datasource.id)}
+                  onClick={() => handlePickDatasource(datasource.id)}
                   picked={pickedDatasource === datasource.id}
                   name={datasource.name}
                   logo={imageSrc}
@@ -107,17 +148,40 @@ const DatasourceListModal = () => {
           </StyledLeftColumn>
 
           <StyledChatWrapper>
-            <StyledInnerWrapper>
-              <StyledFooter>
-                <ButtonPrimary
-                  onClick={handleUpdateDatasource}
-                  disabled={isLoading}
-                  loading={isLoading}
-                >
-                  {agentDatasources?.includes(pickedDatasource) ? t('remove') : t('install')}
-                </ButtonPrimary>
-              </StyledFooter>
-            </StyledInnerWrapper>
+            {createState ? (
+              <CreateDatasourceForm createCallback={handlePickDatasource} type={createState} />
+            ) : (
+              <StyledInnerWrapper>
+                <TabList size='small' activeTabId={activeTab} noBorder>
+                  <Tab onClick={() => handleTabClick(0, 'contact')}>{t('info')}</Tab>
+                  <Tab onClick={() => handleTabClick(1, 'settings')}>{t('settings')}</Tab>
+                </TabList>
+
+                <StyledBody>
+                  <TabsContext activeTabId={activeTab}>
+                    <TabPanels>
+                      <TabPanel>
+                        <StyledInnerTabWrapper>
+                          <ButtonPrimary
+                            onClick={handleUpdateDatasource}
+                            disabled={isLoading}
+                            loading={isLoading}
+                          >
+                            {agentDatasources?.includes(pickedDatasource)
+                              ? t('remove')
+                              : t('install')}
+                          </ButtonPrimary>
+                        </StyledInnerTabWrapper>
+                      </TabPanel>
+
+                      <TabPanel>
+                        <EditDatasourceForm incomingDatasourceId={pickedDatasource} />
+                      </TabPanel>
+                    </TabPanels>
+                  </TabsContext>
+                </StyledBody>
+              </StyledInnerWrapper>
+            )}
           </StyledChatWrapper>
         </StyledMainWrapper>
       </StyledModalBody>
@@ -126,3 +190,21 @@ const DatasourceListModal = () => {
 }
 
 export default withRenderModal('datasource-list-modal')(DatasourceListModal)
+
+const StyledInnerTabWrapper = styled.div`
+  width: 100%;
+
+  height: 100%;
+
+  display: flex;
+
+  align-items: flex-end;
+  justify-content: flex-end;
+
+  padding-right: 10px;
+`
+const StyledBody = styled.div`
+  margin-top: 10px;
+  width: 100%;
+  height: calc(100% - 55px);
+`
diff --git a/apps/ui/src/pages/Datasource/Datasource.tsx b/apps/ui/src/pages/Datasource/Datasource.tsx
@@ -74,6 +74,10 @@ const Datasource = () => {
                     label: `Postgres`,
                     function: () => navigate('/datasources/create-datasource?type=Postgres'),
                   },
+                  {
+                    label: `${t('contact')} ${t('group')}`,
+                    function: () => navigate('/datasources/create-group'),
+                  },
                 ]}
               />
               {datasources?.map((datasource: any) => {
@@ -95,12 +99,12 @@ const Datasource = () => {
                 )
               })}
 
-              <StyledHorizontalDivider />
+              {/* <StyledHorizontalDivider />
 
               <ListHeader
                 title={`${t('contact')} ${t('groups')}`}
                 onAddClick={() => navigate('/datasources/create-group')}
-              />
+              /> */}
               {groups?.map((group: any) => {
                 return (
                   <MiniToolCard

diff --git a/apps/ui/src/pages/Datasource/DatasourceForm/CreateDatasourceForm.tsx b/apps/ui/src/pages/Datasource/DatasourceForm/CreateDatasourceForm.tsx
@@ -22,8 +22,14 @@ import { StyledFormWrapper } from 'styles/formStyles.css'
 import DatasourceDemoButton from './components/DatasourceDemoButton'
 import styled from 'styled-components'
 
-const CreateDatasourceForm = () => {
-  const { formik, isLoading } = useCreateDatasource()
+const CreateDatasourceForm = ({
+  createCallback,
+  type,
+}: {
+  createCallback?: (id: string) => void
+  type?: string
+}) => {
+  const { formik, isLoading } = useCreateDatasource({ createCallback })
 
   return (
     <>
@@ -37,12 +43,12 @@ const CreateDatasourceForm = () => {
             </StyledCombiner>
           </StyledHeaderGroup>
 
-          <StyledFormWrapper>
-            <DatasourceForm formik={formik} isLoading={isLoading} />
-          </StyledFormWrapper>
+          {/* <StyledFormWrapper> */}
+          <DatasourceForm formik={formik} isLoading={isLoading} type={type} />
+          {/* </StyledFormWrapper> */}
 
           <StyledButtonWrapper>
-            <BackButton />
+            {/* <BackButton /> */}
             <ButtonPrimary
               onClick={formik?.handleSubmit}
               size={Button.sizes?.MEDIUM}

diff --git a/apps/ui/src/pages/Datasource/DatasourceForm/DatasourceForm.tsx b/apps/ui/src/pages/Datasource/DatasourceForm/DatasourceForm.tsx
@@ -28,9 +28,10 @@ type DatasourceFormProps = {
   formik: any
   isLoading?: boolean
   isEdit?: boolean
+  type?: string
 }
 
-const DatasourceForm = ({ formik, isLoading, isEdit = false }: DatasourceFormProps) => {
+const DatasourceForm = ({ formik, isLoading, isEdit = false, type }: DatasourceFormProps) => {
   const { t } = useTranslation()
   const { dataLoaders, pickedLoaderFields, handleUploadFile, fileLoading } =
     useDatasourceForm(formik)
@@ -54,7 +55,7 @@ const DatasourceForm = ({ formik, isLoading, isEdit = false }: DatasourceFormPro
   const location = useLocation()
 
   const urlParams = new URLSearchParams(location.search)
-  const formType = urlParams.get('type') || datasource_source_type
+  const formType = urlParams.get('type') || type || datasource_source_type
 
   const { host, port, user, pass, name, tables } = values.configs
 

diff --git a/apps/ui/src/pages/Datasource/DatasourceForm/EditDatasourceForm.tsx b/apps/ui/src/pages/Datasource/DatasourceForm/EditDatasourceForm.tsx
@@ -22,25 +22,25 @@ import { StyledFormWrapper } from 'styles/formStyles.css'
 import DatasourceDemoButton from './components/DatasourceDemoButton'
 import { StyledCombiner } from './CreateDatasourceForm'
 
-const EditDatasourceForm = () => {
-  const { formik, isLoading } = useEditDatasource()
+const EditDatasourceForm = ({ incomingDatasourceId }: { incomingDatasourceId?: string }) => {
+  const { formik, isLoading } = useEditDatasource({ incomingDatasourceId })
 
   return (
     <>
       <FormikProvider value={formik}>
         <StyledSectionWrapper>
-          <StyledHeaderGroup className='header_group'>
+          {/* <StyledHeaderGroup className='header_group'>
             <StyledCombiner>
               <StyledSectionTitle>{`${t('edit-datasource')}`}</StyledSectionTitle>
             </StyledCombiner>
-          </StyledHeaderGroup>
+          </StyledHeaderGroup> */}
 
-          <StyledFormWrapper>
-            <DatasourceForm formik={formik} isLoading={isLoading} isEdit />
-          </StyledFormWrapper>
+          {/* <StyledFormWrapper> */}
+          <DatasourceForm formik={formik} isLoading={isLoading} isEdit />
+          {/* </StyledFormWrapper> */}
 
           <StyledButtonWrapper>
-            <BackButton />
+            {/* <BackButton /> */}
             <ButtonPrimary
               onClick={formik?.handleSubmit}
               size={Button.sizes?.MEDIUM}

diff --git a/apps/ui/src/pages/Datasource/useCreateDatasource.ts b/apps/ui/src/pages/Datasource/useCreateDatasource.ts
@@ -8,7 +8,11 @@ import { useDataLoadersService } from 'services/datasource/useDataLoadersService
 import { useDatasourcesService } from 'services/datasource/useDatasourcesService'
 import { datasourceValidationSchema } from 'utils/validationsSchema'
 
-export const useCreateDatasource = () => {
+export const useCreateDatasource = ({
+  createCallback,
+}: {
+  createCallback?: (id: string) => void
+}) => {
   const navigate = useNavigate()
   const { setToast } = useContext(ToastContext)
 
@@ -120,7 +124,8 @@ export const useCreateDatasource = () => {
         type: 'positive',
         open: true,
       })
-      navigate(`/datasources/${datasource.id}/edit-datasource`)
+      if (createCallback) createCallback(datasource.id)
+      else navigate(`/datasources/${datasource.id}/edit-datasource`)
     } catch (e) {
       setToast({
         message: 'Failed To Add Datasource!',

diff --git a/apps/ui/src/pages/Datasource/useEditDatasource.ts b/apps/ui/src/pages/Datasource/useEditDatasource.ts
@@ -10,10 +10,10 @@ import { useUpdateDatasourceService } from 'services/datasource/useUpdateDatasou
 import { datasourceValidationSchema } from 'utils/validationsSchema'
 import { useDatasource } from './useDatasource'
 
-export const useEditDatasource = () => {
+export const useEditDatasource = ({ incomingDatasourceId }: { incomingDatasourceId?: string }) => {
   const navigate = useNavigate()
   const params = useParams()
-  const { datasourceId } = params
+  const datasourceId = params?.datasourceId || incomingDatasourceId
 
   const { refetchDatasources } = useDatasource()
 
@@ -125,7 +125,7 @@ export const useEditDatasource = () => {
     await Promise.all(promises)
     await Promise.all([refetchDatasources(), refetchConfigs()])
 
-    navigate('/datasources')
+    if (!incomingDatasourceId) navigate('/datasources')
 
     setToast({
       message: 'Datasource was updated!',

diff --git a/apps/ui/src/pages/Home/homeStyle.css.ts b/apps/ui/src/pages/Home/homeStyle.css.ts
@@ -73,6 +73,8 @@ const StyledHeaderGroup = styled.div`
   align-items: flex-end;
   gap: 15px;
   /* margin-bottom: 10px; */
+
+  padding: 0 20px;
 `
 const StyledTabList = styled(TabList)`
   position: absolute;

diff --git a/apps/ui/src/pages/Models/Models.tsx b/apps/ui/src/pages/Models/Models.tsx
@@ -71,28 +71,40 @@ const Models = ({ isPublic }: { isPublic?: boolean }) => {
         <StyledContainer>
           <StyledMainWrapper>
             <StyledLeftColumn>
-              <ListHeader
-                title={t('fine-tuning')}
-                onAddClick={() => navigate('/models/create-fine-tuning')}
-              />
-              {fineTuningData?.map((fineTuning: any) => {
-                return (
-                  <MiniToolCard
-                    key={fineTuning.id}
-                    onClick={() => {
-                      navigate(`/models/${fineTuning.id}/edit-fine-tuning`)
-                    }}
-                    name={fineTuning.name}
-                    logo={tuningIcon}
-                    picked={fineTuning.id === fineTuningId}
-                    onDeleteClick={() => deleteFineTuningHandler(fineTuning.id)}
+              {fineTuningData?.length > 0 && (
+                <>
+                  <ListHeader
+                    title={t('fine-tuning')}
+                    onAddClick={() => navigate('/models/create-fine-tuning')}
                   />
-                )
-              })}
 
-              <StyledHorizontalDivider />
+                  {fineTuningData?.map((fineTuning: any) => {
+                    return (
+                      <MiniToolCard
+                        key={fineTuning.id}
+                        onClick={() => {
+                          navigate(`/models/${fineTuning.id}/edit-fine-tuning`)
+                        }}
+                        name={fineTuning.name}
+                        logo={tuningIcon}
+                        picked={fineTuning.id === fineTuningId}
+                        onDeleteClick={() => deleteFineTuningHandler(fineTuning.id)}
+                      />
+                    )
+                  })}
+                  <StyledHorizontalDivider />
+                </>
+              )}
 
-              <ListHeader title={t('models')} />
+              <ListHeader
+                title={t('models')}
+                customLabel={t('add-fine-tuning')}
+                onAddClick={
+                  fineTuningData?.length === 0
+                    ? () => navigate('/models/create-fine-tuning')
+                    : undefined
+                }
+              />
               {models
                 ?.filter(model => !model.is_fine_tuned)
                 ?.map((model, index: number) => {