refactor: labels

apps/gitness/src/pages-v2/pull-request/pull-request-conversation.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useState } from 'react'
-import { useParams } from 'react-router-dom'
+import { useNavigate, useParams } from 'react-router-dom'
 
 import copy from 'clipboard-copy'
 import { isEmpty } from 'lodash-es'
@@ -64,6 +64,7 @@ import { usePullRequestProviderStore } from './stores/pull-request-provider-stor
 
 export default function PullRequestConversationPage() {
   const routes = useRoutes()
+  const navigate = useNavigate()
   const {
     pullReqMetadata,
     refetchPullReq,
@@ -139,6 +140,8 @@ export default function PullRequestConversationPage() {
       refetchData: refetchActivities
     })
 
+  const handleEditLabels = () => navigate(routes.toRepoLabels({ spaceId, repoId }))
+
   const { mutateAsync: restoreBranch } = useRestorePullReqSourceBranchMutation({})
   const onRestoreBranch = () => {
     restoreBranch({
@@ -217,33 +220,30 @@ export default function PullRequestConversationPage() {
   }, [sourceBranch, pullReqMetadata?.merged, pullReqMetadata?.closed])
 
   useEffect(() => {
-    if (branchError) {
-      if (pullReqMetadata?.merged || pullReqMetadata?.closed) {
-        setShowRestoreBranchButton(true)
-      } else {
-        setShowDeleteBranchButton(false)
-        createBranch({
-          repo_ref: repoRef,
-          body: {
-            name: pullReqMetadata?.source_branch || '',
-            target: pullReqMetadata?.source_sha,
-            bypass_rules: true,
-            dry_run_rules: true
-          }
-        }).then(res => {
-          if (res?.body?.rule_violations) {
-            const { checkIfBypassAllowed } = extractInfoFromRuleViolationArr(res.body?.rule_violations)
-            if (checkIfBypassAllowed) {
-              setShowRestoreBranchButton(true)
-            } else {
-              setShowRestoreBranchButton(false)
-            }
-          } else {
-            setShowRestoreBranchButton(true)
-          }
-        })
-      }
+    if (!branchError) return
+
+    if (pullReqMetadata?.merged || pullReqMetadata?.closed) {
+      return setShowRestoreBranchButton(true)
     }
+
+    setShowDeleteBranchButton(false)
+    createBranch({
+      repo_ref: repoRef,
+      body: {
+        name: pullReqMetadata?.source_branch || '',
+        target: pullReqMetadata?.source_sha,
+        bypass_rules: true,
+        dry_run_rules: true
+      }
+    }).then(res => {
+      if (res?.body?.rule_violations) {
+        const { checkIfBypassAllowed } = extractInfoFromRuleViolationArr(res.body?.rule_violations)
+
+        return setShowRestoreBranchButton(checkIfBypassAllowed)
+      }
+
+      setShowRestoreBranchButton(true)
+    })
   }, [branchError])
 
   const [activities, setActivities] = useState(activityData)
@@ -349,16 +349,12 @@ export default function PullRequestConversationPage() {
 
   const handleAddReviewer = (id?: number) => {
     reviewerAddPullReq({ repo_ref: repoRef, pullreq_number: prId, body: { reviewer_id: id } })
-      .then(() => {
-        refetchReviewers()
-      })
+      .then(() => refetchReviewers())
       .catch(error => setAddReviewerError(error.message))
   }
   const handleDeleteReviewer = (id: number) => {
     reviewerDeletePullReq({ repo_ref: repoRef, pullreq_number: prId, pullreq_reviewer_id: id })
-      .then(() => {
-        refetchReviewers()
-      })
+      .then(() => refetchReviewers())
       .catch(error => setRemoveReviewerError(error.message))
   }
   const onPRStateChanged = useCallback(() => {
@@ -525,14 +521,15 @@ export default function PullRequestConversationPage() {
         <SandboxLayout.Column>
           <SandboxLayout.Content className="pl-0 pt-0">
             {/* TODO: fix handleaction for comment section in panel */}
-            {rebaseErrorMessage ? (
+            {rebaseErrorMessage && (
               <Alert.Container closable variant="destructive" className="mb-5">
                 <Alert.Title>Cannot rebase branch</Alert.Title>
                 <Alert.Description>
                   <p>{rebaseErrorMessage}</p>
                 </Alert.Description>
               </Alert.Container>
-            ) : null}
+            )}
+
             <PullRequestPanel
               handleRebaseBranch={handleRebaseBranch}
               handlePrState={handlePrState}
@@ -683,6 +680,7 @@ export default function PullRequestConversationPage() {
               searchLabelQuery={searchLabel}
               setSearchLabelQuery={changeSearchLabel}
               addLabel={handleAddLabel}
+              editLabels={handleEditLabels}
               removeLabel={handleRemoveLabel}
               useTranslationStore={useTranslationStore}
             />

apps/gitness/src/routes.tsx

@@ -1,6 +1,6 @@
 import { Navigate } from 'react-router-dom'
 
-import { Breadcrumb } from '@harnessio/ui/components'
+import { Breadcrumb, Text } from '@harnessio/ui/components'
 import {
   EmptyPage,
   ProfileSettingsLayout,

packages/ui/locales/en/views.json

@@ -10,7 +10,7 @@
     "pull-requests": "Pull Requests",
     "branches": "Branches",
     "settings": "Settings",
-    "descriptionPlaceholder": "Enter a description",
+    "descriptionPlaceholder": "Enter a short description for the label",
     "description": "Description",
     "error": "Error:",
     "saving": "Saving…",
@@ -288,12 +288,14 @@
     "compareChangesTabOverview": "Overview",
     "compareChangesTabCommits": "Commits",
     "compareChangesTabChanges": "Changes",
-    "findOrAddNewValue": "Search or add a new value",
+    "findOrAddNewValue": "Find or add a new value",
     "searchValue": "Search value",
     "addValue": "Add new value",
-    "noLabels": "No labels found",
+    "labelNotFound": "Label not found",
     "labels": "Labels",
     "searchLabels": "Search labels",
+    "noLabels": "No labels found",
+    "editLabels": "Edit labels",
     "deleted": "Deleted",
     "deletedComment": "This comment was deleted.",
     "reviewers": "Reviewers",

packages/ui/locales/es/views.json

@@ -10,7 +10,7 @@
     "pull-requests": "Pull Requests",
     "branches": "Branches",
     "settings": "Settings",
-    "descriptionPlaceholder": "Enter a description",
+    "descriptionPlaceholder": "Enter a short description for the label",
     "description": "Description",
     "error": "Error:",
     "saving": "Saving...",
@@ -288,12 +288,14 @@
     "compareChangesTabOverview": "Resumen",
     "compareChangesTabCommits": "Commits",
     "compareChangesTabChanges": "Cambios",
-    "findOrAddNewValue": "Search or add a new value",
+    "findOrAddNewValue": "Find or add a new value",
     "searchValue": "Search value",
     "addValue": "Add new value",
-    "noLabels": "No labels found",
+    "labelNotFound": "Label not found",
     "labels": "Labels",
     "searchLabels": "Search labels",
+    "noLabels": "No labels found",
+    "editLabels": "Edit labels",
     "deleted": "",
     "deletedComment": "",
     "reviewers": "",

packages/ui/locales/fr/views.json

@@ -10,7 +10,7 @@
     "pull-requests": "Requêtes de tirage",
     "branches": "Branches",
     "settings": "Paramètres",
-    "descriptionPlaceholder": "Entrez une description",
+    "descriptionPlaceholder": "Enter a description",
     "description": "Description",
     "error": "Erreur :",
     "saving": "Enregistrement...",
@@ -291,9 +291,11 @@
     "findOrAddNewValue": "Find or add a new value",
     "searchValue": "Search value",
     "addValue": "Add new value",
-    "noLabels": "Aucune étiquette trouvée.",
+    "labelNotFound": "Label not found",
     "labels": "Étiquettes",
     "searchLabels": "Rechercher des étiquettes..",
+    "noLabels": "No labels found",
+    "editLabels": "Edit labels",
     "deleted": "Supprimé",
     "deletedComment": "Ce commentaire a été supprimé.",
     "reviewers": "Réviseurs",

packages/ui/src/components/chat/chat-diff-viewer.tsx

@@ -65,16 +65,16 @@ export const ChatDiffViewer = ({ data, mode = 4, lang = 'go', fileName }: ChatDi
   }, [data, lang, setDiffInstanceCb])
 
   return (
-    <div className="border-borders-1 bg-background-1 mr-7 mt-3 flex flex-col rounded-md border">
+    <div className="mr-7 mt-3 flex flex-col rounded-md border border-borders-1 bg-background-1">
       {fileName && (
-        <span className="bg-background-2 text-foreground-1 text-14 rounded-[inherit] p-4 font-medium">{fileName}</span>
+        <span className="rounded-[inherit] bg-background-2 p-4 text-14 font-medium text-foreground-1">{fileName}</span>
       )}
       {diffFileInstance && (
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
         <DiffView
           style={{ '--diff-plain-lineNumber--': 'hsl(var(--canary-background-01))' } as CSSProperties}
-          className="text-foreground-8 w-full"
+          className="w-full text-foreground-8"
           diffFile={diffFileInstance}
           diffViewFontSize={14}
           diffViewHighlight={true}

packages/ui/src/components/chat/chat-empty-preview-wrapper.tsx

@@ -4,7 +4,7 @@ import { Chat } from '@/components'
 
 export const ChatEmptyPreviewWrapper: FC = () => {
   return (
-    <div className="border-borders-4 h-[calc(100vh-100px)] border-r">
+    <div className="h-[calc(100vh-100px)] border-r border-borders-4">
       <Chat.Root>
         <Chat.Body>
           <Chat.EmptyState />

packages/ui/src/components/chat_deprecated.tsx

@@ -5,17 +5,17 @@ import { cn } from '@/utils/cn'
 
 // Root Container
 const Root: React.FC<{ children: ReactNode }> = ({ children }) => {
-  return <div className="w-full h-full overflow-y-auto flex flex-col">{children}</div>
+  return <div className="flex size-full flex-col overflow-y-auto">{children}</div>
 }
 
 // Body
 const Body: React.FC<{ children: ReactNode }> = ({ children }) => {
-  return <div className="flex-1 flex flex-col gap-6 mb-3 p-6">{children}</div>
+  return <div className="mb-3 flex flex-1 flex-col gap-6 p-6">{children}</div>
 }
 
 // Footer
 const Footer: React.FC<{ children: ReactNode }> = ({ children }) => {
-  return <div className="sticky bottom-0 p-6 pt-0 bg-background">{children}</div>
+  return <div className="sticky bottom-0 bg-background p-6 pt-0">{children}</div>
 }
 
 // Message Component
@@ -48,8 +48,8 @@ const Message: React.FC<MessageProps> = ({ self, time, avatar, actions, children
         >
           {children}
         </div>
-        <div className="flex gap-3 items-center justify-between mt-1">
-          <div>{actions && <div className="flex gap-1 items-center justify-start">{actions}</div>}</div>
+        <div className="mt-1 flex items-center justify-between gap-3">
+          <div>{actions && <div className="flex items-center justify-start gap-1">{actions}</div>}</div>
           {time && (
             <Text size={1} className="text-primary opacity-20">
               {time}
@@ -68,9 +68,9 @@ interface TypingProps {
 
 const Typing: React.FC<TypingProps> = ({ avatar }) => {
   return (
-    <div className="flex items-center gap-3 mt-3">
+    <div className="mt-3 flex items-center gap-3">
       {avatar}
-      <div className="flex gap-1 text-success text-lg font-medium" aria-live="polite">
+      <div className="flex gap-1 text-lg font-medium text-success" aria-live="polite">
         <span className="dot animate-bounce">&middot;</span>
         <span className="dot animate-bounce" style={{ animationDelay: '0.15s' }}>
           &middot;
@@ -115,10 +115,10 @@ const InputField: React.FC<InputFieldProps> = ({
   sendIcon = <Icon name="chevron-up" size={16} />
 }) => {
   return (
-    <div className="sticky bottom-0 bg-background flex items-center gap-2">
+    <div className="sticky bottom-0 flex items-center gap-2 bg-background">
       <Input
         ref={inputRef}
-        className="flex-1 pt-6 px-4 pb-16 rounded-lg focus:ring-0"
+        className="flex-1 rounded-lg px-4 pb-16 pt-6 focus:ring-0"
         value={value}
         onChange={onChange}
         onKeyDown={onKeyDown}
@@ -130,7 +130,7 @@ const InputField: React.FC<InputFieldProps> = ({
         variant="outline"
         size="icon"
         disabled={disabled}
-        className="absolute right-3.5 bottom-3.5 z-10 w-6 h-6"
+        className="absolute bottom-3.5 right-3.5 z-10 size-6"
       >
         {sendIcon}
       </Button>

packages/ui/src/components/input.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, Fragment, InputHTMLAttributes, ReactNode } from 'react'
+import { forwardRef, InputHTMLAttributes, ReactNode } from 'react'
 
 import { Caption, ControlGroup, Icon, IconProps, Label, Message, MessageTheme } from '@/components'
 import { cn } from '@utils/cn'
@@ -69,7 +69,7 @@ const BaseInputWithWrapper = forwardRef<HTMLInputElement, BaseInputWithWrapperPr
 
 BaseInputWithWrapper.displayName = 'BaseInputWithWrapper'
 
-interface InputProps extends BaseInputProps {
+export interface InputProps extends BaseInputProps {
   label?: string
   caption?: ReactNode
   error?: string
@@ -114,14 +114,6 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
     },
     ref
   ) => {
-    const isControlGroup = !!error || !!caption || !!label || !!wrapperClassName
-    const InputWrapper = isControlGroup ? ControlGroup : Fragment
-    const inputWrapperProps = isControlGroup
-      ? {
-          className: wrapperClassName
-        }
-      : {}
-
     const InputComponent = customContent ? BaseInputWithWrapper : BaseInput
 
     const baseInputComp = (
@@ -167,7 +159,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
     }
 
     return (
-      <InputWrapper {...inputWrapperProps}>
+      <ControlGroup className={wrapperClassName}>
         {!!label && (
           <Label className="mb-2.5" color={disabled ? 'disabled-dark' : 'secondary'} optional={optional} htmlFor={id}>
             {label}
@@ -182,12 +174,11 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
           </Message>
         )}
         {caption && <Caption className={disabled ? 'text-foreground-9' : ''}>{caption}</Caption>}
-      </InputWrapper>
+      </ControlGroup>
     )
   }
 )
 
 Input.displayName = 'Input'
 
 export { Input }
-export type { InputProps }