feat: [SCM-42]: added tabs to settings page (#108)

* feat: [SCM-42]: added setting tabs

* feat: [SCM-42]: added settingtabs

* feat: [SCM-42]: added tabs to the settings page

* feat: [SCM-42]: fixed review comments

web/src/framework/strings/stringTypes.ts

@@ -83,6 +83,7 @@ export interface StringsMap {
   findATag: string
   findBranch: string
   findOrCreateBranch: string
+  general: string
   history: string
   in: string
   inactiveBranches: string
@@ -151,5 +152,6 @@ export interface StringsMap {
   webhook: string
   webhookEventsLabel: string
   webhookListingContent: string
+  webhooks: string
   yourBranches: string
 }

web/src/i18n/strings.en.yaml

@@ -150,3 +150,5 @@ enableSSLVerification: 'Enable SSL verification'
 createWebhook: 'Create Webhook'
 webhook: 'Webhook'
 webhookListingContent: 'create,delete,deployment ...'
+general: 'General'
+webhooks: 'Webhooks'

web/src/pages/RepositorySettings/RepositorySettings.module.scss

@@ -1,6 +1,47 @@
 .main {
   min-height: var(--page-min-height, 100%);
   background-color: var(--primary-bg) !important;
+  width: 100%;
+  margin: var(--spacing-small);
+  :global {
+    .bp3-tab {
+      width: 184px !important;
+      height: 34px;
+    }
+
+    .bp3-tab-panel {
+      width: 100%;
+      height: 500px;
+    }
+
+    .bp3-tab {
+      margin-top: 20px;
+    }
+
+    .bp3-tabs.bp3-vertical > .bp3-tab-list .bp3-tab[aria-selected='true'] {
+      background-color: var(--primary-2);
+      -webkit-box-shadow: none;
+      box-shadow: none;
+    }
+
+    // .bp3-tab-indicator-wrapper {
+    //   height: unset !important;
+    // }
+
+    // .bp3-tab:not([aria-disabled='true']):active {
+    //   color: var(--primary-7) !important;
+    //   background: #cdf4fe !important;
+    //   padding: 5px;
+    // }
+  }
+}
+
+.webhooksContent {
+  width: 100%;
+}
+
+.btn {
+  margin-top: 5px;
 }
 
 .webhookHeader {

web/src/pages/RepositorySettings/RepositorySettings.module.scss.d.ts

@@ -2,6 +2,8 @@
 // this is an auto-generated file
 declare const styles: {
   readonly main: string
+  readonly webhooksContent: string
+  readonly btn: string
   readonly webhookHeader: string
   readonly contentContainer: string
 }

web/src/pages/RepositorySettings/RepositorySettings.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { useHistory } from 'react-router-dom'
 
-import { PageBody, Button, Intent, Container } from '@harness/uicore'
+import { PageBody, Button, Intent, Container, Tabs, Text, Layout } from '@harness/uicore'
 import { useGetRepositoryMetadata } from 'hooks/useGetRepositoryMetadata'
 import { useStrings } from 'framework/strings'
 import { useAppContext } from 'AppContext'
@@ -13,10 +13,15 @@ import hooks from './mockWebhooks.json'
 import { SettingsContent } from './SettingsContent'
 import css from './RepositorySettings.module.scss'
 
+enum SettingsTab {
+  webhooks = 'webhooks',
+  general = 'general'
+}
 export default function RepositorySettings() {
   const { repoMetadata, error, loading } = useGetRepositoryMetadata()
   const { routes } = useAppContext()
   const history = useHistory()
+  const [activeTab, setActiveTab] = React.useState<string>(SettingsTab.webhooks)
 
   const NewWebHookButton = (
     <Button
@@ -24,6 +29,7 @@ export default function RepositorySettings() {
       text={'Create Webhook'}
       intent={Intent.PRIMARY}
       icon={CodeIcon.Add}
+      className={css.btn}
       onClick={() => {
         history.push(
           routes.toCODECreateWebhook({
@@ -35,28 +41,51 @@ export default function RepositorySettings() {
   )
   const { getString } = useStrings()
   return (
-    <Container className={css.main}>
+    <>
       <RepositoryPageHeader
         repoMetadata={repoMetadata}
         title={getString('settings')}
         dataTooltipId="repositorySettings"
       />
-      <PageBody
-        loading={loading}
-        error={getErrorMessage(error)}
-        noData={{
-          when: () => !hooks.length,
-          message: getString('noWebHooks'),
-          image: emptyStateImage,
-          button: NewWebHookButton
-        }}>
-        {hooks.length && repoMetadata ? (
-          <Container className={css.contentContainer}>
-            <Container>{NewWebHookButton}</Container>
-            <SettingsContent repoMetadata={repoMetadata} hooks={hooks} />
-          </Container>
-        ) : null}
-      </PageBody>
-    </Container>
+      <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: <div> General content</div>,
+              iconProps: { name: 'cog' }
+            },
+            {
+              id: SettingsTab.webhooks,
+              title: getString('webhooks'),
+              iconProps: { name: 'code-webhook' },
+              panel: (
+                <PageBody
+                  loading={loading}
+                  error={getErrorMessage(error)}
+                  className={css.webhooksContent}
+                  noData={{
+                    when: () => repoMetadata !== null,
+                    message: getString('noWebHooks'),
+                    image: emptyStateImage,
+                    button: NewWebHookButton
+                  }}>
+                  <Container className={css.contentContainer}>
+                    <Container>{NewWebHookButton}</Container>
+                    {repoMetadata ? <SettingsContent repoMetadata={repoMetadata} hooks={hooks} /> : null}
+                  </Container>
+                </PageBody>
+              )
+            }
+          ]}></Tabs>
+      </Container>
+    </>
   )
 }