dev: copy shortcuts, magic login links, improved settings page

pages/projects/[projectId]/settings.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useCallback, useState } from "react";
 // swr
 import { mutate } from "swr";
 // next
@@ -20,11 +20,15 @@ import useUser from "lib/hooks/useUser";
 import useToast from "lib/hooks/useToast";
 // fetch keys
 import { PROJECT_DETAILS, PROJECTS_LIST, WORKSPACE_MEMBERS } from "constants/fetch-keys";
+// commons
+import { addSpaceIfCamelCase, debounce } from "constants/common";
+// components
+import CreateUpdateStateModal from "components/project/issues/BoardView/state/CreateUpdateStateModal";
 // ui
 import { Spinner, Button, Input, TextArea, Select } from "ui";
 import { Breadcrumbs, BreadcrumbItem } from "ui/Breadcrumbs";
 // icons
-import { ChevronDownIcon, CheckIcon } from "@heroicons/react/24/outline";
+import { ChevronDownIcon, CheckIcon, PlusIcon } from "@heroicons/react/24/outline";
 // types
 import type { IProject, IWorkspace, WorkspaceMember } from "types";
 
@@ -41,16 +45,19 @@ const ProjectSettings: NextPage = () => {
     handleSubmit,
     reset,
     control,
+    setError,
     formState: { errors, isSubmitting },
   } = useForm<IProject>({
     defaultValues,
   });
 
+  const [isCreateStateModalOpen, setIsCreateStateModalOpen] = useState(false);
+
   const router = useRouter();
 
   const { projectId } = router.query;
 
-  const { activeWorkspace, activeProject } = useUser();
+  const { activeWorkspace, activeProject, states } = useUser();
 
   const { setToastAlert } = useToast();
 
@@ -81,6 +88,7 @@ const ProjectSettings: NextPage = () => {
     const payload: Partial<IProject> = {
       name: formData.name,
       network: formData.network,
+      identifier: formData.identifier,
       description: formData.description,
       default_assignee: formData.default_assignee,
       project_lead: formData.project_lead,
@@ -113,9 +121,24 @@ const ProjectSettings: NextPage = () => {
       });
   };
 
+  const checkIdentifier = (slug: string, value: string) => {
+    projectServices.checkProjectIdentifierAvailability(slug, value).then((response) => {
+      console.log(response);
+      if (response.exists) setError("identifier", { message: "Identifier already exists" });
+    });
+  };
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const checkIdentifierAvailability = useCallback(debounce(checkIdentifier, 1500), []);
+
   return (
     <ProjectLayout>
       <div className="w-full h-full space-y-5">
+        <CreateUpdateStateModal
+          isOpen={isCreateStateModalOpen}
+          setIsOpen={setIsCreateStateModalOpen}
+          projectId={projectId as string}
+        />
         <Breadcrumbs>
           <BreadcrumbItem title="Projects" link="/projects" />
           <BreadcrumbItem title={`${activeProject?.name} Settings`} />
@@ -169,8 +192,20 @@ const ProjectSettings: NextPage = () => {
                           register={register}
                           placeholder="Enter identifier"
                           label="Identifier"
+                          onChange={(e: any) => {
+                            if (!activeWorkspace || !e.target.value) return;
+                            checkIdentifierAvailability(activeWorkspace.slug, e.target.value);
+                          }}
                           validations={{
                             required: "Identifier is required",
+                            minLength: {
+                              value: 1,
+                              message: "Identifier must at least be of 1 character",
+                            },
+                            maxLength: {
+                              value: 9,
+                              message: "Identifier must at most be of 9 characters",
+                            },
                           }}
                         />
                       </div>
@@ -358,6 +393,40 @@ const ProjectSettings: NextPage = () => {
                       </Button>
                     </div>
                   </section>
+                  <section className="space-y-5">
+                    <div>
+                      <h3 className="text-lg font-medium leading-6 text-gray-900">State</h3>
+                      <p className="mt-1 text-sm text-gray-500">
+                        Manage the state of this project.
+                      </p>
+                    </div>
+                    <div className="flex justify-between gap-3">
+                      <div className="w-full space-y-5">
+                        {states?.map((state) => (
+                          <div
+                            className="border p-1 px-4 rounded flex items-center gap-x-2"
+                            key={state.id}
+                          >
+                            <div
+                              className="w-3 h-3 rounded-full"
+                              style={{
+                                backgroundColor: state.color,
+                              }}
+                            ></div>
+                            <h4>{addSpaceIfCamelCase(state.name)}</h4>
+                          </div>
+                        ))}
+                        <button
+                          type="button"
+                          className="flex items-center gap-x-1"
+                          onClick={() => setIsCreateStateModalOpen(true)}
+                        >
+                          <PlusIcon className="h-4 w-4 text-gray-400" />
+                          <span>Add State</span>
+                        </button>
+                      </div>
+                    </div>
+                  </section>
                 </div>
               </form>
             </div>