From 7b70f8c18d5a2764e90924f48a0486ffadfd9ac7 Mon Sep 17 00:00:00 2001
From: Calvin Lee <calvin.lee@harness.io>
Date: Fri, 11 Aug 2023 04:35:52 +0000
Subject: [PATCH] fix: [code-736]: make tag and branch pages consistent (#302)

---
 web/package.json                              |  2 +-
 .../BranchTagSelect.module.scss               |  9 ++++-
 .../BranchTagSelect/BranchTagSelect.tsx       |  4 +-
 .../CreateBranchModal.module.scss             | 30 +++++++++++++++
 .../CreateBranchModal.module.scss.d.ts        |  4 ++
 .../CreateBranchModal/CreateBranchModal.tsx   | 21 ++++++-----
 .../CreateTagModal/CreateTagModal.module.scss | 37 ++++++++++++++++++-
 .../CreateTagModal.module.scss.d.ts           |  4 ++
 .../CreateTagModal/CreateTagModal.tsx         | 10 +++--
 .../LatestCommit/LatestCommit.module.scss     |  4 +-
 .../components/LatestCommit/LatestCommit.tsx  |  6 ++-
 .../ReviewerSelect/ReviewerSelect.module.scss |  2 +-
 web/src/framework/strings/stringTypes.ts      |  1 +
 web/src/i18n/strings.en.yaml                  |  1 +
 .../AddNewMember/AddNewMember.tsx             |  2 +-
 .../SpaceAccessControl/SpaceAccessControl.tsx |  2 +-
 web/src/pages/UserProfile/UserProfile.tsx     |  2 +-
 web/yarn.lock                                 |  8 ++--
 18 files changed, 119 insertions(+), 30 deletions(-)

diff --git a/web/package.json b/web/package.json
index d14f040af..9a5301e0e 100644
--- a/web/package.json
+++ b/web/package.json
@@ -42,7 +42,7 @@
     "@codemirror/state": "^6.2.0",
     "@codemirror/view": "^6.9.6",
     "@harness/design-system": "1.4.0",
-    "@harness/icons": "1.149.0",
+    "@harness/icons": "1.174.0",
     "@harness/uicore": "3.131.1",
     "@harness/use-modal": "1.1.0",
     "@popperjs/core": "^2.4.2",
diff --git a/web/src/components/BranchTagSelect/BranchTagSelect.module.scss b/web/src/components/BranchTagSelect/BranchTagSelect.module.scss
index 1eec2ec79..c73704305 100644
--- a/web/src/components/BranchTagSelect/BranchTagSelect.module.scss
+++ b/web/src/components/BranchTagSelect/BranchTagSelect.module.scss
@@ -61,8 +61,15 @@ html[class=''] {
 
   .listContainer {
     min-height: 50px;
-    max-height: 300px;
+    max-height: 200px;
     overflow-y: auto;
+
+    :global {
+      a.bp3-menu-item:hover {
+        background: var(--primary-1) !important;
+        color: var(--grey-1000) !important;
+      }
+    }
   }
 
   .newBtnText {
diff --git a/web/src/components/BranchTagSelect/BranchTagSelect.tsx b/web/src/components/BranchTagSelect/BranchTagSelect.tsx
index a0d5d95fe..77811949a 100644
--- a/web/src/components/BranchTagSelect/BranchTagSelect.tsx
+++ b/web/src/components/BranchTagSelect/BranchTagSelect.tsx
@@ -30,6 +30,7 @@ export interface BranchTagSelectProps extends Omit<ButtonProps, 'onSelect'>, Pic
   forBranchesOnly?: boolean
   labelPrefix?: string
   placeHolder?: string
+  popoverClassname?: string
 }
 
 export const BranchTagSelect: React.FC<BranchTagSelectProps> = ({
@@ -43,6 +44,7 @@ export const BranchTagSelect: React.FC<BranchTagSelectProps> = ({
   labelPrefix,
   placeHolder,
   className,
+  popoverClassname,
   ...props
 }) => {
   const [query, onQuery] = useState('')
@@ -90,7 +92,7 @@ export const BranchTagSelect: React.FC<BranchTagSelectProps> = ({
         interactionKind: 'click',
         usePortal: true,
         position: PopoverPosition.BOTTOM_LEFT,
-        popoverClassName: css.popover
+        popoverClassName: cx(css.popover, popoverClassname)
       }}
       tabIndex={0}
       {...props}
diff --git a/web/src/components/CreateBranchModal/CreateBranchModal.module.scss b/web/src/components/CreateBranchModal/CreateBranchModal.module.scss
index cd8e62bfc..3437fc91f 100644
--- a/web/src/components/CreateBranchModal/CreateBranchModal.module.scss
+++ b/web/src/components/CreateBranchModal/CreateBranchModal.module.scss
@@ -1,4 +1,5 @@
 .main {
+  padding-left: var(--spacing-10) !important;
   .title {
     --typography-size: 20px !important;
   }
@@ -9,6 +10,10 @@
     font-weight: 500 !important;
   }
 
+  .container {
+    margin-right: var(--spacing-10) !important;
+  }
+
   // .branchSourceDesc {
   //   color: var(--grey-400) !important;
   //   font-size: var(--form-input-font-size) !important;
@@ -20,3 +25,28 @@
 .maxContainer {
   max-width: 250px;
 }
+
+.branchTagSelect {
+  width: 100% !important;
+}
+
+.selectContainer {
+  :global {
+    .bp3-popover-wrapper {
+      width: 100% !important;
+      .bp3-popover-target {
+        width: 100% !important;
+      }
+    }
+    .bp3-button {
+      justify-content: start;
+    }
+    .bp3-icon-chevron-down {
+      margin-left: auto;
+    }
+  }
+}
+
+.popoverContainer {
+  width: 489px;
+}
diff --git a/web/src/components/CreateBranchModal/CreateBranchModal.module.scss.d.ts b/web/src/components/CreateBranchModal/CreateBranchModal.module.scss.d.ts
index d9ad189cd..144ce1d50 100644
--- a/web/src/components/CreateBranchModal/CreateBranchModal.module.scss.d.ts
+++ b/web/src/components/CreateBranchModal/CreateBranchModal.module.scss.d.ts
@@ -4,6 +4,10 @@ declare const styles: {
   readonly main: string
   readonly title: string
   readonly label: string
+  readonly container: string
   readonly maxContainer: string
+  readonly branchTagSelect: string
+  readonly selectContainer: string
+  readonly popoverContainer: string
 }
 export default styles
diff --git a/web/src/components/CreateBranchModal/CreateBranchModal.tsx b/web/src/components/CreateBranchModal/CreateBranchModal.tsx
index 1a6bf593f..16b8863af 100644
--- a/web/src/components/CreateBranchModal/CreateBranchModal.tsx
+++ b/web/src/components/CreateBranchModal/CreateBranchModal.tsx
@@ -94,12 +94,12 @@ export function useCreateBranchModal({
         enforceFocus={false}
         onClose={hideModal}
         title={''}
-        style={{ width: 700, maxHeight: '95vh', overflow: 'auto' }}>
-        <Layout.Vertical padding={{ left: 'xxlarge' }} style={{ height: '100%' }} className={css.main}>
+        style={{ width: 585, maxHeight: '95vh', overflow: 'auto' }}>
+        <Layout.Vertical style={{ height: '100%' }} className={css.main}>
           <Heading className={css.title} font={{ variation: FontVariation.H3 }} margin={{ bottom: 'xlarge' }}>
-            <Icon name={CodeIcon.Branch} size={22} /> {getString('createABranch')}
+            {getString('createABranch')}
           </Heading>
-          <Container margin={{ right: 'xxlarge' }}>
+          <Container className={css.container}>
             <Formik<FormData>
               initialValues={{
                 name: branchName,
@@ -123,32 +123,33 @@ export function useCreateBranchModal({
               <FormikForm>
                 <FormInput.Text
                   name="name"
-                  label={getString('branchName')}
-                  placeholder={getString('nameYourBranch')}
+                  label={getString('name')}
+                  placeholder={getString('enterBranchPlaceholder')}
                   tooltipProps={{
                     dataTooltipId: 'repositoryBranchTextField'
                   }}
                   inputGroup={{ autoFocus: true }}
                 />
-                <Container margin={{ top: 'medium', bottom: 'medium' }}>
+                <Container margin={{ top: 'medium' }}>
                   <Label className={css.label}>{getString('basedOn')}</Label>
                   {/* <Text className={css.branchSourceDesc}>{getString('branchSourceDesc')}</Text> */}
-                  <Layout.Horizontal spacing="medium" padding={{ top: 'xsmall' }}>
+                  <Layout.Horizontal className={css.selectContainer} padding={{ top: 'xsmall' }}>
                     <BranchTagSelect
+                      className={css.branchTagSelect}
                       repoMetadata={repoMetadata}
                       disableBranchCreation
                       disableViewAllBranches
                       forBranchesOnly={showBranchTag}
                       gitRef={refIsATag ? `refs/tags/${sourceBranch}` : sourceBranch}
                       onSelect={setSourceBranch}
+                      popoverClassname={css.popoverContainer}
                     />
-                    <FlexExpander />
                   </Layout.Horizontal>
                 </Container>
 
                 <Layout.Horizontal
                   spacing="small"
-                  padding={{ right: 'xxlarge', top: 'xxxlarge', bottom: 'large' }}
+                  padding={{ right: 'xxlarge', top: 'xxlarge', bottom: 'large' }}
                   style={{ alignItems: 'center' }}>
                   <Button
                     type="submit"
diff --git a/web/src/components/CreateTagModal/CreateTagModal.module.scss b/web/src/components/CreateTagModal/CreateTagModal.module.scss
index 9308b4852..e96b7002c 100644
--- a/web/src/components/CreateTagModal/CreateTagModal.module.scss
+++ b/web/src/components/CreateTagModal/CreateTagModal.module.scss
@@ -1,4 +1,6 @@
 .main {
+  padding-left: var(--spacing-10) !important;
+
   .title {
     --typography-size: 20px !important;
   }
@@ -8,8 +10,41 @@
     font-size: var(--form-input-font-size) !important;
     font-weight: 500 !important;
   }
+
+  .container {
+    margin-right: var(--spacing-10) !important;
+  }
 }
 
 .extendedDescription textarea {
-  height: 100px !important;
+  height: 73px !important;
+}
+
+.branchTagSelect {
+  width: 100% !important;
+}
+
+.selectContainer {
+  :global {
+    .bp3-popover-wrapper {
+      width: 100% !important;
+      .bp3-popover-target {
+        width: 100% !important;
+      }
+    }
+    .bp3-button {
+      justify-content: start;
+    }
+    .bp3-icon-chevron-down {
+      margin-left: auto;
+    }
+  }
+}
+
+.popoverContainer {
+  width: 489px;
+}
+
+.extendedDescription {
+  margin: unset !important;
 }
diff --git a/web/src/components/CreateTagModal/CreateTagModal.module.scss.d.ts b/web/src/components/CreateTagModal/CreateTagModal.module.scss.d.ts
index aac279cdc..ea379e96f 100644
--- a/web/src/components/CreateTagModal/CreateTagModal.module.scss.d.ts
+++ b/web/src/components/CreateTagModal/CreateTagModal.module.scss.d.ts
@@ -4,6 +4,10 @@ declare const styles: {
   readonly main: string
   readonly title: string
   readonly label: string
+  readonly container: string
   readonly extendedDescription: string
+  readonly branchTagSelect: string
+  readonly selectContainer: string
+  readonly popoverContainer: string
 }
 export default styles
diff --git a/web/src/components/CreateTagModal/CreateTagModal.tsx b/web/src/components/CreateTagModal/CreateTagModal.tsx
index ed700df9a..ecbfa7f1d 100644
--- a/web/src/components/CreateTagModal/CreateTagModal.tsx
+++ b/web/src/components/CreateTagModal/CreateTagModal.tsx
@@ -94,12 +94,12 @@ export function useCreateTagModal({
         enforceFocus={false}
         onClose={hideModal}
         title={''}
-        style={{ width: 700, maxHeight: '95vh', overflow: 'auto' }}>
+        style={{ width: 585, maxHeight: '95vh', overflow: 'auto' }}>
         <Layout.Vertical padding={{ left: 'xxlarge' }} style={{ height: '100%' }} className={css.main}>
           <Heading className={css.title} font={{ variation: FontVariation.H3 }} margin={{ bottom: 'xlarge' }}>
             {getString('createATag')}
           </Heading>
-          <Container margin={{ right: 'xxlarge' }}>
+          <Container className={css.container} margin={{ right: 'xxlarge' }}>
             <Formik<FormData>
               initialValues={{
                 name: branchName,
@@ -135,13 +135,15 @@ export function useCreateTagModal({
                 <Container margin={{ top: 'medium', bottom: 'medium' }}>
                   <Label className={css.label}>{getString('basedOn')}</Label>
                   {/* <Text className={css.branchSourceDesc}>{getString('branchSourceDesc')}</Text> */}
-                  <Layout.Horizontal spacing="medium" padding={{ top: 'xsmall' }}>
+                  <Layout.Horizontal className={css.selectContainer} padding={{ top: 'xsmall' }}>
                     <BranchTagSelect
+                      className={css.branchTagSelect}
                       repoMetadata={repoMetadata}
                       disableBranchCreation
                       disableViewAllBranches
                       gitRef={sourceBranch}
                       onSelect={setSourceBranch}
+                      popoverClassname={css.popoverContainer}
                     />
                     <FlexExpander />
                   </Layout.Horizontal>
@@ -155,7 +157,7 @@ export function useCreateTagModal({
 
                 <Layout.Horizontal
                   spacing="small"
-                  padding={{ right: 'xxlarge', top: 'xxxlarge', bottom: 'large' }}
+                  padding={{ right: 'xxlarge', top: 'xxlarge', bottom: 'large' }}
                   style={{ alignItems: 'center' }}>
                   <Button
                     type="submit"
diff --git a/web/src/components/LatestCommit/LatestCommit.module.scss b/web/src/components/LatestCommit/LatestCommit.module.scss
index 2433d374e..dc70ee00e 100644
--- a/web/src/components/LatestCommit/LatestCommit.module.scss
+++ b/web/src/components/LatestCommit/LatestCommit.module.scss
@@ -27,8 +27,8 @@
   }
 
   .commitLink {
-    font-weight: 500;
-    font-size: var(--font-size-small);
+    font-weight: 500 !important;
+    font-size: var(--font-size-small) !important;
     color: var(--primary-8);
   }
 
diff --git a/web/src/components/LatestCommit/LatestCommit.tsx b/web/src/components/LatestCommit/LatestCommit.tsx
index b672b54e5..33dd69299 100644
--- a/web/src/components/LatestCommit/LatestCommit.tsx
+++ b/web/src/components/LatestCommit/LatestCommit.tsx
@@ -33,8 +33,10 @@ export function LatestCommitForFolder({ repoMetadata, latestCommit, standaloneSt
           <Text font={{ variation: FontVariation.SMALL_BOLD }}>
             {latestCommit?.author?.identity?.name || latestCommit?.author?.identity?.email}
           </Text>
-          <Link to={commitURL} className={css.commitLink}>
-            {latestCommit?.title}
+          <Link to={commitURL}>
+            <Text className={css.commitLink} lineClamp={1}>
+              {latestCommit?.title}
+            </Text>
           </Link>
           <FlexExpander />
           <CommitActions sha={latestCommit?.sha as string} href={commitURL} />
diff --git a/web/src/components/ReviewerSelect/ReviewerSelect.module.scss b/web/src/components/ReviewerSelect/ReviewerSelect.module.scss
index 687f365bc..80ced515e 100644
--- a/web/src/components/ReviewerSelect/ReviewerSelect.module.scss
+++ b/web/src/components/ReviewerSelect/ReviewerSelect.module.scss
@@ -64,7 +64,7 @@
     overflow-y: auto;
 
     .menuItem:hover {
-      background: rgba(0, 146, 228, 0.0392156863) !important;
+      background: var(--primary-1) !important;
       border-radius: 4px;
     }
   }
diff --git a/web/src/framework/strings/stringTypes.ts b/web/src/framework/strings/stringTypes.ts
index 2d7cac378..acd5f25b3 100644
--- a/web/src/framework/strings/stringTypes.ts
+++ b/web/src/framework/strings/stringTypes.ts
@@ -155,6 +155,7 @@ export interface StringsMap {
   enableWebhookContent: string
   enableWebhookTitle: string
   enabled: string
+  enterBranchPlaceholder: string
   enterDescription: string
   enterName: string
   enterNewBranchName: string
diff --git a/web/src/i18n/strings.en.yaml b/web/src/i18n/strings.en.yaml
index 0d52c4a23..93a0513ef 100644
--- a/web/src/i18n/strings.en.yaml
+++ b/web/src/i18n/strings.en.yaml
@@ -135,6 +135,7 @@ delete: Delete
 edit: Edit
 editAsText: Edit as Text
 branchName: Branch name
+enterBranchPlaceholder: Enter the branch name here
 nameYourBranch: Name your branch
 nameYourTag: Name your tag
 enterTagPlaceholder: Enter the tag name here
diff --git a/web/src/pages/SpaceAccessControl/AddNewMember/AddNewMember.tsx b/web/src/pages/SpaceAccessControl/AddNewMember/AddNewMember.tsx
index d852af703..981d58356 100644
--- a/web/src/pages/SpaceAccessControl/AddNewMember/AddNewMember.tsx
+++ b/web/src/pages/SpaceAccessControl/AddNewMember/AddNewMember.tsx
@@ -52,7 +52,7 @@ const useAddNewMember = ({ onClose }: { onClose: () => void }) => {
         value: role,
         label: getString(roleStringKeyMap[role])
       })),
-    []
+    [] // eslint-disable-line react-hooks/exhaustive-deps
   )
 
   const userOptions: SelectOption[] = useMemo(
diff --git a/web/src/pages/SpaceAccessControl/SpaceAccessControl.tsx b/web/src/pages/SpaceAccessControl/SpaceAccessControl.tsx
index 9bd8bcd3a..9371118d9 100644
--- a/web/src/pages/SpaceAccessControl/SpaceAccessControl.tsx
+++ b/web/src/pages/SpaceAccessControl/SpaceAccessControl.tsx
@@ -119,7 +119,7 @@ const SpaceAccessControl = () => {
           }
         }
       ] as Column<TypesMembershipUser>[],
-    []
+    [] // eslint-disable-line react-hooks/exhaustive-deps
   )
 
   return (
diff --git a/web/src/pages/UserProfile/UserProfile.tsx b/web/src/pages/UserProfile/UserProfile.tsx
index a3802979c..b78d21eb1 100644
--- a/web/src/pages/UserProfile/UserProfile.tsx
+++ b/web/src/pages/UserProfile/UserProfile.tsx
@@ -147,7 +147,7 @@ const UserProfile = () => {
         }
       }
     ],
-    []
+    [] // eslint-disable-line react-hooks/exhaustive-deps
   )
 
   const onEditField = async (field: keyof TypesUser, value: string) => {
diff --git a/web/yarn.lock b/web/yarn.lock
index 356a97f8f..3456f72e7 100644
--- a/web/yarn.lock
+++ b/web/yarn.lock
@@ -686,10 +686,10 @@
   resolved "https://npm.pkg.github.com/download/@harness/design-system/1.4.0/b2a77f73696d71a53765c71efd0a5b28039fa1cf#b2a77f73696d71a53765c71efd0a5b28039fa1cf"
   integrity sha512-LuzuPEHPkE6xgIuXxn16RCCvPY1NDXF3o1JWlIjxmepoDTkgFuwnV1OhBdQftvAVBawJ5wJP10IIKUL161LdYg==
 
-"@harness/icons@1.149.0":
-  version "1.149.0"
-  resolved "https://npm.pkg.github.com/download/@harness/icons/1.149.0/0f2e1faba8d5e1a651b5b8f2c03582d30702d81f#0f2e1faba8d5e1a651b5b8f2c03582d30702d81f"
-  integrity sha512-kfcGY7t+V1NoSRAoDJofZpKAY79UN+NI8XWf0OLYtRI1JnVF37ZyJgvJ3Vk4VgLbMElsPRXopcx9ADjCWz/RZw==
+"@harness/icons@1.174.0":
+  version "1.174.0"
+  resolved "https://npm.pkg.github.com/download/@harness/icons/1.174.0/f0b22590cd34ddc2276d293c8c30afdb9174d62f#f0b22590cd34ddc2276d293c8c30afdb9174d62f"
+  integrity sha512-xAbVjP5u6LA3X8hhArjM5AiknyrPv5k+480c4ILrkrBKhDO6+W/sEh/wJjMOWRDxyxA9uU9RINOLt4QruqD8Vw==
 
 "@harness/jarvis@^0.12.0":
   version "0.12.0"