dev: implemented the new spreadsheet layout using MobX (#2463)

* refactor: spreadsheet layout components

* refactor: spreadsheet properties

* refactor: folder structure

* chore: issue property update

* chore: spreadsheet layout in the global views

* style: quick actions menu

* fix: build errors

web/components/states/state-select.tsx

@@ -1,32 +1,21 @@
 import React, { useState } from "react";
-
-import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
-// react-popper
 import { usePopper } from "react-popper";
-// services
-import { ProjectStateService } from "services/project";
-// headless ui
 import { Combobox } from "@headlessui/react";
-// icons
 import { Check, ChevronDown, Search } from "lucide-react";
 // ui
 import { StateGroupIcon } from "@plane/ui";
+// helpers
+import { getStatesList } from "helpers/state.helper";
 // types
 import { Tooltip } from "components/ui";
 import { Placement } from "@popperjs/core";
 // constants
-import { IState } from "types";
-import { STATES_LIST } from "constants/fetch-keys";
-// helper
-import { getStatesList } from "helpers/state.helper";
+import { IState, IStateResponse } from "types";
 
 type Props = {
   value: IState;
-  onChange: (data: any, states: IState[] | undefined) => void;
-  projectId: string;
+  onChange: (state: IState) => void;
+  stateGroups: IStateResponse | undefined;
   className?: string;
   buttonClassName?: string;
   optionsClassName?: string;
@@ -35,13 +24,10 @@ type Props = {
   disabled?: boolean;
 };
 
-// services
-const projectStateService = new ProjectStateService();
-
 export const StateSelect: React.FC<Props> = ({
   value,
   onChange,
-  projectId,
+  stateGroups,
   className = "",
   buttonClassName = "",
   optionsClassName = "",
@@ -54,22 +40,10 @@ export const StateSelect: React.FC<Props> = ({
   const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
 
-  const [fetchStates, setFetchStates] = useState<boolean>(false);
-
   const { styles, attributes } = usePopper(referenceElement, popperElement, {
     placement: placement ?? "bottom-start",
   });
 
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  const { data: stateGroups } = useSWR(
-    workspaceSlug && projectId && fetchStates ? STATES_LIST(projectId) : null,
-    workspaceSlug && projectId && fetchStates
-      ? () => projectStateService.getStates(workspaceSlug.toString(), projectId)
-      : null
-  );
-
   const states = getStatesList(stateGroups);
 
   const options = states?.map((state) => ({
@@ -101,79 +75,73 @@ export const StateSelect: React.FC<Props> = ({
       className={`flex-shrink-0 text-left ${className}`}
       value={value.id}
       onChange={(data: string) => {
-        onChange(data, states);
+        const selectedState = states?.find((state) => state.id === data);
+
+        if (selectedState) onChange(selectedState);
       }}
       disabled={disabled}
     >
-      {({ open }: { open: boolean }) => {
-        if (open) setFetchStates(true);
-
-        return (
-          <>
-            <Combobox.Button as={React.Fragment}>
-              <button
-                ref={setReferenceElement}
-                type="button"
-                className={`flex items-center justify-between gap-1 w-full text-xs px-2.5 py-1 rounded-md shadow-sm border border-custom-border-300 duration-300 focus:outline-none ${
-                  disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
-                } ${buttonClassName}`}
-              >
-                {label}
-                {!hideDropdownArrow && !disabled && <ChevronDown className="h-3 w-3" aria-hidden="true" />}
-              </button>
-            </Combobox.Button>
-            <Combobox.Options>
-              <div
-                className={`z-10 border border-custom-border-300 px-2 py-2.5 rounded bg-custom-background-100 text-xs shadow-custom-shadow-rg focus:outline-none w-48 whitespace-nowrap my-1 ${optionsClassName}`}
-                ref={setPopperElement}
-                style={styles.popper}
-                {...attributes.popper}
-              >
-                <div className="flex w-full items-center justify-start rounded border border-custom-border-200 bg-custom-background-90 px-2">
-                  <Search className="h-3.5 w-3.5 text-custom-text-300" />
-                  <Combobox.Input
-                    className="w-full bg-transparent py-1 px-2 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
-                    value={query}
-                    onChange={(e) => setQuery(e.target.value)}
-                    placeholder="Search"
-                    displayValue={(assigned: any) => assigned?.name}
-                  />
-                </div>
-                <div className={`mt-2 space-y-1 max-h-48 overflow-y-scroll`}>
-                  {filteredOptions ? (
-                    filteredOptions.length > 0 ? (
-                      filteredOptions.map((option) => (
-                        <Combobox.Option
-                          key={option.value}
-                          value={option.value}
-                          className={({ active, selected }) =>
-                            `flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 ${
-                              active && !selected ? "bg-custom-background-80" : ""
-                            } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
-                          }
-                        >
-                          {({ selected }) => (
-                            <>
-                              {option.content}
-                              {selected && <Check className="h-3.5 w-3.5" />}
-                            </>
-                          )}
-                        </Combobox.Option>
-                      ))
-                    ) : (
-                      <span className="flex items-center gap-2 p-1">
-                        <p className="text-left text-custom-text-200 ">No matching results</p>
-                      </span>
-                    )
-                  ) : (
-                    <p className="text-center text-custom-text-200">Loading...</p>
-                  )}
-                </div>
-              </div>
-            </Combobox.Options>
-          </>
-        );
-      }}
+      <Combobox.Button as={React.Fragment}>
+        <button
+          ref={setReferenceElement}
+          type="button"
+          className={`flex items-center justify-between gap-1 w-full text-xs px-2.5 py-1 rounded-md shadow-sm border border-custom-border-300 duration-300 focus:outline-none ${
+            disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
+          } ${buttonClassName}`}
+        >
+          {label}
+          {!hideDropdownArrow && !disabled && <ChevronDown className="h-3 w-3" aria-hidden="true" />}
+        </button>
+      </Combobox.Button>
+      <Combobox.Options>
+        <div
+          className={`z-10 border border-custom-border-300 px-2 py-2.5 rounded bg-custom-background-100 text-xs shadow-custom-shadow-rg focus:outline-none w-48 whitespace-nowrap my-1 ${optionsClassName}`}
+          ref={setPopperElement}
+          style={styles.popper}
+          {...attributes.popper}
+        >
+          <div className="flex w-full items-center justify-start rounded border border-custom-border-200 bg-custom-background-90 px-2">
+            <Search className="h-3.5 w-3.5 text-custom-text-300" />
+            <Combobox.Input
+              className="w-full bg-transparent py-1 px-2 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              placeholder="Search"
+              displayValue={(assigned: any) => assigned?.name}
+            />
+          </div>
+          <div className={`mt-2 space-y-1 max-h-48 overflow-y-scroll`}>
+            {filteredOptions ? (
+              filteredOptions.length > 0 ? (
+                filteredOptions.map((option) => (
+                  <Combobox.Option
+                    key={option.value}
+                    value={option.value}
+                    className={({ active, selected }) =>
+                      `flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 ${
+                        active && !selected ? "bg-custom-background-80" : ""
+                      } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+                    }
+                  >
+                    {({ selected }) => (
+                      <>
+                        {option.content}
+                        {selected && <Check className="h-3.5 w-3.5" />}
+                      </>
+                    )}
+                  </Combobox.Option>
+                ))
+              ) : (
+                <span className="flex items-center gap-2 p-1">
+                  <p className="text-left text-custom-text-200 ">No matching results</p>
+                </span>
+              )
+            ) : (
+              <p className="text-center text-custom-text-200">Loading...</p>
+            )}
+          </div>
+        </div>
+      </Combobox.Options>
     </Combobox>
   );
 };