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/issues/issue-layouts/spreadsheet/estimate-column/spreadsheet-estimate-column.tsx

@@ -0,0 +1,41 @@
+// components
+import { EstimateColumn } from "components/issues";
+// hooks
+import useSubIssue from "hooks/use-sub-issue";
+// types
+import { IIssue } from "types";
+
+type Props = {
+  issue: IIssue;
+  onChange: (formData: Partial<IIssue>) => void;
+  expandedIssues: string[];
+  disabled: boolean;
+};
+
+export const SpreadsheetEstimateColumn: React.FC<Props> = (props) => {
+  const { issue, onChange, expandedIssues, disabled } = props;
+
+  const isExpanded = expandedIssues.indexOf(issue.id) > -1;
+
+  const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
+
+  return (
+    <div>
+      <EstimateColumn issue={issue} onChange={(data) => onChange({ estimate_point: data })} disabled={disabled} />
+
+      {isExpanded &&
+        !isLoading &&
+        subIssues &&
+        subIssues.length > 0 &&
+        subIssues.map((subIssue: IIssue) => (
+          <SpreadsheetEstimateColumn
+            key={subIssue.id}
+            issue={subIssue}
+            onChange={onChange}
+            expandedIssues={expandedIssues}
+            disabled={disabled}
+          />
+        ))}
+    </div>
+  );
+};