From c23de32b03fda50cfdd2eb5b9be39091be27d9fe Mon Sep 17 00:00:00 2001
From: Kunal Vishwakarma <116634168+kunalv17@users.noreply.github.com>
Date: Tue, 25 Apr 2023 12:08:56 +0530
Subject: [PATCH] chore: added create label inside of pages label select (#944)

* chore: added create label inside of pages label select

* chore: used footer instead of props
---
 .../projects/[projectId]/pages/[pageId].tsx   | 23 +++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
index 1ff51eccb..dbdd3c57f 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
@@ -24,6 +24,7 @@ import useUser from "hooks/use-user";
 import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
 // components
 import { CreateUpdateBlockInline, SinglePageBlock } from "components/pages";
+import { CreateLabelModal } from "components/labels";
 // ui
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 import { CustomSearchSelect, Loader, PrimaryButton, TextArea, Tooltip } from "components/ui";
@@ -55,6 +56,7 @@ import {
 
 const SinglePage: NextPage = () => {
   const [createBlockForm, setCreateBlockForm] = useState(false);
+  const [labelModal, setLabelModal] = useState(false);
 
   const scrollToRef = useRef<HTMLDivElement>(null);
 
@@ -383,6 +385,20 @@ const SinglePage: NextPage = () => {
                   }
                   value={pageDetails.labels}
                   onChange={(val: string[]) => partialUpdatePage({ labels_list: val })}
+                  footerOption={
+                    <button
+                      type="button"
+                      className="flex w-full select-none items-center rounded py-2 px-1 hover:bg-brand-surface-2"
+                      onClick={() => {
+                        setLabelModal(true);
+                      }}
+                    >
+                      <span className="flex items-center justify-start gap-1 text-brand-secondary">
+                        <PlusIcon className="h-4 w-4" aria-hidden="true" />
+                        <span>Create New Label</span>
+                      </span>
+                    </button>
+                  }
                   options={options}
                   multiple
                   noChevron
@@ -531,6 +547,13 @@ const SinglePage: NextPage = () => {
                     />
                   </div>
                 )}
+                {labelModal && typeof projectId === "string" && (
+                  <CreateLabelModal
+                    isOpen={labelModal}
+                    handleClose={() => setLabelModal(false)}
+                    projectId={projectId}
+                  />
+                )}
               </>
             ) : (
               <Loader>