From ab3ce4bfed0443ae37fb0aa457bf992f135408eb Mon Sep 17 00:00:00 2001
From: Calvin Lee <calvin.lee@harness.io>
Date: Fri, 22 Sep 2023 07:30:07 +0000
Subject: [PATCH] fix: [code-886]: fix repo settings (#602)

---
 .../GeneralSettingsContent.tsx                |  5 ++--
 .../RepositorySettings.module.scss            | 15 ++++++++++--
 .../RepositorySettings.module.scss.d.ts       |  2 ++
 .../RepositorySettings/RepositorySettings.tsx | 24 ++-----------------
 4 files changed, 20 insertions(+), 26 deletions(-)

diff --git a/web/src/pages/RepositorySettings/GeneralSettingsContent/GeneralSettingsContent.tsx b/web/src/pages/RepositorySettings/GeneralSettingsContent/GeneralSettingsContent.tsx
index e262e3f4a..d9e06b215 100644
--- a/web/src/pages/RepositorySettings/GeneralSettingsContent/GeneralSettingsContent.tsx
+++ b/web/src/pages/RepositorySettings/GeneralSettingsContent/GeneralSettingsContent.tsx
@@ -10,6 +10,7 @@ import {
   ButtonSize,
   TextInput
 } from '@harnessio/uicore'
+import cx from 'classnames'
 import { Color, Intent } from '@harnessio/design-system'
 import { useMutate } from 'restful-react'
 import { ACCESS_MODES, permissionProps, voidFn } from 'utils/Utils'
@@ -85,14 +86,14 @@ const GeneralSettingsContent = (props: GeneralSettingsProps) => {
                 </Container>
               </Layout.Horizontal>
               <Layout.Horizontal>
-                <Container className={css.label}>
+                <Container className={cx(css.label, css.descText)}>
                   <Text color={Color.GREY_600} font={{ size: 'small' }}>
                     {getString('description')}
                   </Text>
                 </Container>
                 <Container className={css.content}>
                   {editDesc === ACCESS_MODES.EDIT ? (
-                    <Layout.Horizontal>
+                    <Layout.Horizontal className={css.editContainer}>
                       <TextInput
                         className={css.textContainer}
                         onChange={evt => {
diff --git a/web/src/pages/RepositorySettings/RepositorySettings.module.scss b/web/src/pages/RepositorySettings/RepositorySettings.module.scss
index b8041492d..4eca9d727 100644
--- a/web/src/pages/RepositorySettings/RepositorySettings.module.scss
+++ b/web/src/pages/RepositorySettings/RepositorySettings.module.scss
@@ -61,12 +61,17 @@
 }
 
 .label {
-  width: 30%;
+  padding-top: var(--spacing-xsmall);
+  width: 120px;
   padding-right: var(--spacing-medium);
 }
 
+.descText {
+  align-self: center !important;
+}
+
 .content {
-  width: 70%;
+  width: 80%;
 }
 
 .deleteContainer {
@@ -82,6 +87,12 @@
   width: 80%;
 }
 
+.editContainer {
+  :global(.TextInput--main) {
+    margin-bottom: unset !important;
+  }
+}
+
 .buttonContainer {
   width: 20%;
   padding-top: var(--spacing-xsmall) !important;
diff --git a/web/src/pages/RepositorySettings/RepositorySettings.module.scss.d.ts b/web/src/pages/RepositorySettings/RepositorySettings.module.scss.d.ts
index e979183c4..d7d1671b0 100644
--- a/web/src/pages/RepositorySettings/RepositorySettings.module.scss.d.ts
+++ b/web/src/pages/RepositorySettings/RepositorySettings.module.scss.d.ts
@@ -5,6 +5,8 @@ export declare const buttonContainer: string
 export declare const content: string
 export declare const contentContainer: string
 export declare const deleteContainer: string
+export declare const descText: string
+export declare const editContainer: string
 export declare const generalContainer: string
 export declare const label: string
 export declare const main: string
diff --git a/web/src/pages/RepositorySettings/RepositorySettings.tsx b/web/src/pages/RepositorySettings/RepositorySettings.tsx
index d5ed426e8..1f218025f 100644
--- a/web/src/pages/RepositorySettings/RepositorySettings.tsx
+++ b/web/src/pages/RepositorySettings/RepositorySettings.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { PageBody, Container, Tabs } from '@harnessio/uicore'
+import { PageBody, Container } from '@harnessio/uicore'
 import { useGetRepositoryMetadata } from 'hooks/useGetRepositoryMetadata'
 import { useStrings } from 'framework/strings'
 
@@ -10,15 +10,9 @@ import { LoadingSpinner } from 'components/LoadingSpinner/LoadingSpinner'
 import GeneralSettingsContent from './GeneralSettingsContent/GeneralSettingsContent'
 import css from './RepositorySettings.module.scss'
 
-enum SettingsTab {
-  webhooks = 'webhooks',
-  general = 'general'
-}
 export default function RepositorySettings() {
   const { repoMetadata, error, loading, refetch } = useGetRepositoryMetadata()
 
-  const [activeTab, setActiveTab] = React.useState<string>(SettingsTab.general)
-
   const { getString } = useStrings()
   return (
     <Container className={css.main}>
@@ -31,21 +25,7 @@ export default function RepositorySettings() {
         <LoadingSpinner visible={loading} />
         {repoMetadata && (
           <Container className={css.main} padding={'large'}>
-            <Tabs
-              id="SettingsTabs"
-              vertical
-              large={false}
-              defaultSelectedTabId={activeTab}
-              animate={false}
-              onChange={(id: string) => setActiveTab(id)}
-              tabList={[
-                {
-                  id: SettingsTab.general,
-                  title: getString('general'),
-                  panel: <GeneralSettingsContent repoMetadata={repoMetadata} refetch={refetch} />,
-                  iconProps: { name: 'cog' }
-                }
-              ]}></Tabs>
+            <GeneralSettingsContent repoMetadata={repoMetadata} refetch={refetch} />
           </Container>
         )}
       </PageBody>