From 84c989c337255cf446724dfce5af006f67f1bbc0 Mon Sep 17 00:00:00 2001
From: rahulramesha <rahul@appsmith.com>
Date: Tue, 7 Nov 2023 16:05:04 +0530
Subject: [PATCH 1/2] add errors for duplicate labels

---
 .../issues/sidebar-select/label.tsx           | 12 ++++++++
 web/components/labels/create-label-modal.tsx  | 10 ++++++-
 .../labels/create-update-label-inline.tsx     | 29 ++++++++++++++++---
 3 files changed, 46 insertions(+), 5 deletions(-)

diff --git a/web/components/issues/sidebar-select/label.tsx b/web/components/issues/sidebar-select/label.tsx
index 464554aec24..e997b6f4971 100644
--- a/web/components/issues/sidebar-select/label.tsx
+++ b/web/components/issues/sidebar-select/label.tsx
@@ -18,6 +18,7 @@ import { Plus, X } from "lucide-react";
 import { IIssue, IIssueLabels } from "types";
 // fetch-keys
 import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
+import useToast from "hooks/use-toast";
 
 type Props = {
   issueDetails: IIssue | undefined;
@@ -44,6 +45,9 @@ export const SidebarLabelSelect: React.FC<Props> = ({
   const [createLabelForm, setCreateLabelForm] = useState(false);
 
   const router = useRouter();
+
+  const { setToastAlert } = useToast();
+
   const { workspaceSlug, projectId } = router.query;
 
   const {
@@ -79,6 +83,14 @@ export const SidebarLabelSelect: React.FC<Props> = ({
         submitChanges({ labels: [...(issueDetails?.labels ?? []), res.id] });
 
         setCreateLabelForm(false);
+      })
+      .catch((error) => {
+        setToastAlert({
+          title: "Oops!",
+          type: "error",
+          message: error?.error ?? "Error while adding the label",
+        });
+        reset(formData);
       });
   };
 
diff --git a/web/components/labels/create-label-modal.tsx b/web/components/labels/create-label-modal.tsx
index 7f42f009538..6fe57845924 100644
--- a/web/components/labels/create-label-modal.tsx
+++ b/web/components/labels/create-label-modal.tsx
@@ -15,6 +15,7 @@ import { ChevronDown } from "lucide-react";
 import type { IIssueLabels, IState } from "types";
 // constants
 import { LABEL_COLOR_OPTIONS, getRandomLabelColor } from "constants/label";
+import useToast from "hooks/use-toast";
 
 // types
 type Props = {
@@ -58,6 +59,8 @@ export const CreateLabelModal: React.FC<Props> = observer((props) => {
     reset(defaultValues);
   };
 
+  const { setToastAlert } = useToast();
+
   const onSubmit = async (formData: IIssueLabels) => {
     if (!workspaceSlug) return;
 
@@ -68,7 +71,12 @@ export const CreateLabelModal: React.FC<Props> = observer((props) => {
         if (onSuccess) onSuccess(res);
       })
       .catch((error) => {
-        console.log(error);
+        setToastAlert({
+          title: "Oops!",
+          type: "error",
+          message: error?.error ?? "Error while adding the label",
+        });
+        reset(formData);
       });
   };
 
diff --git a/web/components/labels/create-update-label-inline.tsx b/web/components/labels/create-update-label-inline.tsx
index 16cab89ed31..f27bd517e6b 100644
--- a/web/components/labels/create-update-label-inline.tsx
+++ b/web/components/labels/create-update-label-inline.tsx
@@ -14,6 +14,7 @@ import { Button, Input } from "@plane/ui";
 import { IIssueLabels } from "types";
 // fetch-keys
 import { getRandomLabelColor, LABEL_COLOR_OPTIONS } from "constants/label";
+import useToast from "hooks/use-toast";
 
 type Props = {
   labelForm: boolean;
@@ -39,6 +40,8 @@ export const CreateUpdateLabelInline = observer(
     // store
     const { projectLabel: projectLabelStore } = useMobxStore();
 
+    const { setToastAlert } = useToast();
+
     const {
       handleSubmit,
       control,
@@ -60,10 +63,20 @@ export const CreateUpdateLabelInline = observer(
     const handleLabelCreate: SubmitHandler<IIssueLabels> = async (formData) => {
       if (!workspaceSlug || !projectId || isSubmitting) return;
 
-      await projectLabelStore.createLabel(workspaceSlug.toString(), projectId.toString(), formData).then(() => {
-        handleClose();
-        reset(defaultValues);
-      });
+      await projectLabelStore
+        .createLabel(workspaceSlug.toString(), projectId.toString(), formData)
+        .then(() => {
+          handleClose();
+          reset(defaultValues);
+        })
+        .catch((error) => {
+          setToastAlert({
+            title: "Oops!",
+            type: "error",
+            message: error?.error ?? "Error while adding the label",
+          });
+          reset(formData);
+        });
     };
 
     const handleLabelUpdate: SubmitHandler<IIssueLabels> = async (formData) => {
@@ -74,6 +87,14 @@ export const CreateUpdateLabelInline = observer(
         .then(() => {
           reset(defaultValues);
           handleClose();
+        })
+        .catch((error) => {
+          setToastAlert({
+            title: "Oops!",
+            type: "error",
+            message: error?.error ?? "Error while updating the label",
+          });
+          reset(formData);
         });
     };
 

From 335346eac301a333c77867d4b2d5ca9212859149 Mon Sep 17 00:00:00 2001
From: rahulramesha <rahulramesham@gmail.com>
Date: Thu, 9 Nov 2023 12:12:34 +0530
Subject: [PATCH 2/2] adding horizonatal scroll bar to views

---
 .../issues/issue-layouts/kanban/roots/cycle-root.tsx |  2 +-
 .../issue-layouts/kanban/roots/module-root.tsx       |  2 +-
 .../issue-layouts/kanban/roots/project-root.tsx      |  2 +-
 .../issue-layouts/spreadsheet/spreadsheet-view.tsx   |  2 +-
 web/styles/globals.css                               | 12 +++++++++++-
 5 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/web/components/issues/issue-layouts/kanban/roots/cycle-root.tsx b/web/components/issues/issue-layouts/kanban/roots/cycle-root.tsx
index 5ea4d3e825a..fdcb430cc1a 100644
--- a/web/components/issues/issue-layouts/kanban/roots/cycle-root.tsx
+++ b/web/components/issues/issue-layouts/kanban/roots/cycle-root.tsx
@@ -117,7 +117,7 @@ export const CycleKanBanLayout: React.FC = observer(() => {
           <Spinner />
         </div>
       ) : (
-        <div className={`relative min-w-full w-max min-h-full h-max bg-custom-background-90 px-3`}>
+        <div className={`relative min-w-full min-h-full h-max bg-custom-background-90 px-3 horizontal-scroll-enable`}>
           <DragDropContext onDragEnd={onDragEnd}>
             {currentKanBanView === "default" ? (
               <KanBan
diff --git a/web/components/issues/issue-layouts/kanban/roots/module-root.tsx b/web/components/issues/issue-layouts/kanban/roots/module-root.tsx
index 74bc8133b42..07b4159b9b9 100644
--- a/web/components/issues/issue-layouts/kanban/roots/module-root.tsx
+++ b/web/components/issues/issue-layouts/kanban/roots/module-root.tsx
@@ -113,7 +113,7 @@ export const ModuleKanBanLayout: React.FC = observer(() => {
           <Spinner />
         </div>
       ) : (
-        <div className={`relative min-w-full w-max min-h-full h-max bg-custom-background-90 px-3`}>
+        <div className={`relative min-w-full min-h-full h-max bg-custom-background-90 px-3 horizontal-scroll-enable`}>
           <DragDropContext onDragEnd={onDragEnd}>
             {currentKanBanView === "default" ? (
               <KanBan
diff --git a/web/components/issues/issue-layouts/kanban/roots/project-root.tsx b/web/components/issues/issue-layouts/kanban/roots/project-root.tsx
index acb062c18d5..e8f36d26ef1 100644
--- a/web/components/issues/issue-layouts/kanban/roots/project-root.tsx
+++ b/web/components/issues/issue-layouts/kanban/roots/project-root.tsx
@@ -107,7 +107,7 @@ export const KanBanLayout: React.FC = observer(() => {
           <Spinner />
         </div>
       ) : (
-        <div className={`relative min-w-full w-max min-h-full h-max bg-custom-background-90 px-3`}>
+        <div className="relative min-w-full min-h-full h-max bg-custom-background-90 px-3 horizontal-scroll-enable">
           <DragDropContext onDragStart={onDragStart} onDragEnd={onDragEnd}>
             {currentKanBanView === "default" ? (
               <KanBan
diff --git a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx
index d6b99fc76a9..765e6d35c49 100644
--- a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx
@@ -79,7 +79,7 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
       <div className="h-full w-full flex flex-col">
         <div
           ref={containerRef}
-          className="flex max-h-full h-full overflow-y-auto divide-x-[0.5px] divide-custom-border-200"
+          className="flex max-h-full h-full overflow-y-auto divide-x-[0.5px] divide-custom-border-200 horizontal-scroll-enable"
         >
           {issues && issues.length > 0 ? (
             <>
diff --git a/web/styles/globals.css b/web/styles/globals.css
index cde7993a109..8f7ebe624cc 100644
--- a/web/styles/globals.css
+++ b/web/styles/globals.css
@@ -53,6 +53,8 @@
     --color-text-300: 82, 82, 82; /* tertiary text */
     --color-text-400: 163, 163, 163; /* placeholder text */
 
+    --color-scrollbar: 163, 163, 163; /* scrollbar thumb */
+
     --color-border-100: 245, 245, 245; /* subtle border= 1 */
     --color-border-200: 229, 229, 229; /* subtle border- 2 */
     --color-border-300: 212, 212, 212; /* strong border- 1 */
@@ -117,6 +119,8 @@
     --color-text-300: 82, 82, 82; /* tertiary text */
     --color-text-400: 163, 163, 163; /* placeholder text */
 
+    --color-scrollbar: 163, 163, 163; /* scrollbar thumb */
+
     --color-border-100: 245, 245, 245; /* subtle border= 1 */
     --color-border-200: 229, 229, 229; /* subtle border- 2 */
     --color-border-300: 212, 212, 212; /* strong border- 1 */
@@ -129,6 +133,8 @@
     --color-text-300: 58, 58, 58; /* tertiary text */
     --color-text-400: 115, 115, 115; /* placeholder text */
 
+    --color-scrollbar: 115, 115, 115; /* scrollbar thumb */
+
     --color-border-100: 34, 34, 34; /* subtle border= 1 */
     --color-border-200: 38, 38, 38; /* subtle border- 2 */
     --color-border-300: 46, 46, 46; /* strong border- 1 */
@@ -160,6 +166,8 @@
     --color-text-300: 115, 115, 115; /* tertiary text */
     --color-text-400: 82, 82, 82; /* placeholder text */
 
+    --color-scrollbar: 82, 82, 82; /* scrollbar thumb */
+
     --color-border-100: 34, 34, 34; /* subtle border= 1 */
     --color-border-200: 38, 38, 38; /* subtle border- 2 */
     --color-border-300: 46, 46, 46; /* strong border- 1 */
@@ -172,6 +180,8 @@
     --color-text-300: 212, 212, 212; /* tertiary text */
     --color-text-400: 115, 115, 115; /* placeholder text */
 
+    --color-scrollbar: 115, 115, 115; /* scrollbar thumb */
+
     --color-border-100: 245, 245, 245; /* subtle border= 1 */
     --color-border-200: 229, 229, 229; /* subtle border- 2 */
     --color-border-300: 212, 212, 212; /* strong border- 1 */
@@ -256,7 +266,7 @@ body {
 
 .horizontal-scroll-enable::-webkit-scrollbar-thumb {
   border-radius: 5px;
-  background-color: rgba(var(--color-background-80));
+  background-color: rgba(var(--color-scrollbar));
 }
 
 .vertical-scroll-enable::-webkit-scrollbar {