Merge pull request #1105 from makeplane/hot-fix

promote: hot-fix to stage-release
2023-05-21 19:42:15 +05:30 · 2023-05-21 19:42:15 +05:30 · 7c9035182b
commit 7c9035182b
parent 0acee1fe66 b5325f14aa
13 changed files with 126 additions and 78 deletions
--- a/apps/app/components/core/board-view/single-board.tsx
+++ b/apps/app/components/core/board-view/single-board.tsx
@ -99,7 +99,7 @@ export const SingleBoard: React.FC<Props> = ({
                  </div>
                </>
              )}
-              <div className="pt-3 overflow-y-auto">
+              <div className="pt-3 overflow-hidden overflow-y-scroll">
                {groupedByIssues?.[groupTitle].map((issue, index) => (
                  <Draggable
                    key={issue.id}
--- a/apps/app/components/cycles/cycles-list-gantt-chart.tsx
+++ b/apps/app/components/cycles/cycles-list-gantt-chart.tsx
@ -1,5 +1,7 @@
 import { FC } from "react";
-
+// next imports
+import Link from "next/link";
+import { useRouter } from "next/router";
 // components
 import { GanttChartRoot } from "components/gantt-chart";
 // types
@ -10,6 +12,9 @@ type Props = {
 };

 export const CyclesListGanttChartView: FC<Props> = ({ cycles }) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
  // rendering issues on gantt sidebar
  const GanttSidebarBlockView = ({ data }: any) => (
    <div className="relative flex w-full h-full items-center p-1 overflow-hidden gap-1">
@ -23,12 +28,14 @@ export const CyclesListGanttChartView: FC<Props> = ({ cycles }) => {

  // rendering issues on gantt card
  const GanttBlockView = ({ data }: { data: ICycle }) => (
-    <div className="relative flex items-center w-full h-full overflow-hidden shadow-sm">
-      <div className="flex-shrink-0 w-[4px] h-full" style={{ backgroundColor: "#858e96" }} />
-      <div className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
-        {data?.name}
-      </div>
-    </div>
+    <Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${data?.id}`}>
+      <a className="relative flex items-center w-full h-full overflow-hidden shadow-sm">
+        <div className="flex-shrink-0 w-[4px] h-full" style={{ backgroundColor: "#858e96" }} />
+        <div className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
+          {data?.name}
+        </div>
+      </a>
+    </Link>
  );

  // handle gantt issue start date and target date
--- a/apps/app/components/cycles/gantt-chart.tsx
+++ b/apps/app/components/cycles/gantt-chart.tsx
@ -1,7 +1,7 @@
 import { FC } from "react";
-
+// next imports
+import Link from "next/link";
 import { useRouter } from "next/router";
-
 // components
 import { GanttChartRoot } from "components/gantt-chart";
 // hooks
@ -32,15 +32,17 @@ export const CycleIssuesGanttChartView: FC<Props> = ({}) => {

  // rendering issues on gantt card
  const GanttBlockView = ({ data }: any) => (
-    <div className="relative flex items-center w-full h-full overflow-hidden shadow-sm">
-      <div
-        className="flex-shrink-0 w-[4px] h-full"
-        style={{ backgroundColor: data?.state_detail?.color || "#858e96" }}
-      />
-      <div className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
-        {data?.name}
-      </div>
-    </div>
+    <Link href={`/${workspaceSlug}/projects/${projectId}/issues/${data?.id}`}>
+      <a className="relative flex items-center w-full h-full overflow-hidden shadow-sm">
+        <div
+          className="flex-shrink-0 w-[4px] h-full"
+          style={{ backgroundColor: data?.state_detail?.color || "#858e96" }}
+        />
+        <div className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
+          {data?.name}
+        </div>
+      </a>
+    </Link>
  );

  // handle gantt issue start date and target date
--- a/apps/app/components/gantt-chart/blocks/index.tsx
+++ b/apps/app/components/gantt-chart/blocks/index.tsx
@ -18,7 +18,7 @@ export const GanttChartBlocks: FC<{

  return (
    <div
-      className="relative z-10 mt-[58px] h-full w-[4000px] divide-x divide-gray-300 overflow-hidden overflow-y-auto bg-[#999] bg-opacity-5"
+      className="relative z-10 mt-[58px] h-full w-[4000px] divide-x divide-gray-300 overflow-hidden overflow-y-auto"
      style={{ width: `${itemsContainerWidth}px` }}
    >
      <div className="w-full">
@ -39,12 +39,12 @@ export const GanttChartBlocks: FC<{
                  >
                    <div className="flex-shrink-0 relative w-0 h-0 flex items-center invisible group-hover:visible whitespace-nowrap">
                      <div className="absolute right-0 mr-[5px] rounded-sm bg-brand-surface-1 px-2 py-0.5 text-xs font-medium">
-                        {block?.start_date ? datePreview(block?.start_date, true) : "-"}
+                        {block?.start_date ? datePreview(block?.start_date) : "-"}
                      </div>
                    </div>

                    <div
-                      className="rounded-sm shadow-sm bg-brand-base overflow-hidden relative flex items-center h-[34px] border border-brand-base"
+                      className="rounded shadow-sm bg-brand-base overflow-hidden relative flex items-center h-[34px] border border-brand-base"
                      style={{
                        width: `${block?.position?.width}px`,
                      }}
@ -54,7 +54,7 @@ export const GanttChartBlocks: FC<{

                    <div className="flex-shrink-0 relative w-0 h-0 flex items-center invisible group-hover:visible whitespace-nowrap">
                      <div className="absolute left-0 ml-[5px] mr-[5px] rounded-sm bg-brand-surface-1 px-2 py-0.5 text-xs font-medium">
-                        {block?.target_date ? datePreview(block?.target_date, true) : "-"}
+                        {block?.target_date ? datePreview(block?.target_date) : "-"}
                      </div>
                    </div>
                  </div>
--- a/apps/app/components/gantt-chart/chart/index.tsx
+++ b/apps/app/components/gantt-chart/chart/index.tsx
@ -37,6 +37,7 @@ import { datePreview, currentViewDataWithView } from "../data";
 import { useChart } from "../hooks";

 type ChartViewRootProps = {
+  border: boolean;
  title: null | string;
  loaderTitle: string;
  blocks: any;
@ -46,6 +47,7 @@ type ChartViewRootProps = {
 };

 export const ChartViewRoot: FC<ChartViewRootProps> = ({
+  border,
  title,
  blocks = null,
  loaderTitle,
@ -214,10 +216,12 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
    <div
      className={`${
        fullScreenMode ? `fixed top-0 bottom-0 left-0 right-0 z-[999999] bg-brand-base` : `relative`
-      } flex h-full flex-col rounded-sm border border-brand-base select-none bg-brand-base shadow`}
+      } ${
+        border ? `border border-brand-base` : ``
+      } flex h-full flex-col rounded-sm select-none bg-brand-base shadow`}
    >
      {/* chart title */}
-      <div className="flex w-full flex-shrink-0 flex-wrap items-center gap-5 gap-y-3 whitespace-nowrap p-2 border-b border-brand-base">
+      {/* <div className="flex w-full flex-shrink-0 flex-wrap items-center gap-5 gap-y-3 whitespace-nowrap p-2 border-b border-brand-base">
        {title && (
          <div className="text-lg font-medium flex gap-2 items-center">
            <div>{title}</div>
@ -233,7 +237,7 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
            {blocks.length} {loaderTitle}
          </div>
        )}
-      </div>
+      </div> */}

      {/* chart header */}
      <div className="flex w-full flex-shrink-0 flex-wrap items-center gap-5 gap-y-3 whitespace-nowrap p-2">
@ -248,10 +252,23 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
          )}
        </div> */}

-        <div className="mr-auto text-sm font-medium">
-          {`${datePreview(currentViewData?.data?.startDate)} - ${datePreview(
-            currentViewData?.data?.endDate
-          )}`}
+        {title && (
+          <div className="text-lg font-medium flex gap-2 items-center">
+            <div>{title}</div>
+            <div className="text-xs rounded-full px-2 py-1 font-bold border border-brand-accent/75 bg-brand-accent/5 text-brand-base">
+              Gantt View Beta
+            </div>
+          </div>
+        )}
+
+        <div className="ml-auto">
+          {blocks === null ? (
+            <div className="text-sm font-medium ml-auto">Loading...</div>
+          ) : (
+            <div className="text-sm font-medium ml-auto">
+              {blocks.length} {loaderTitle}
+            </div>
+          )}
        </div>

        <div className="flex flex-wrap items-center gap-2">
@ -260,7 +277,7 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
            allViews.map((_chatView: any, _idx: any) => (
              <div
                key={_chatView?.key}
-                className={`cursor-pointer rounded-sm border border-brand-base p-1 px-2 text-sm font-medium ${
+                className={`cursor-pointer rounded-sm border border-brand-base p-1 px-2 text-xs ${
                  currentView === _chatView?.key ? `bg-brand-surface-2` : `hover:bg-brand-surface-1`
                }`}
                onClick={() => handleChartView(_chatView?.key)}
@ -272,7 +289,7 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({

        <div className="flex items-center gap-1">
          <div
-            className={`cursor-pointer rounded-sm border border-brand-base p-1 px-2 text-sm font-medium hover:bg-brand-surface-2`}
+            className={`cursor-pointer rounded-sm border border-brand-base p-1 px-2 text-xs hover:bg-brand-surface-2`}
            onClick={handleToday}
          >
            Today
--- a/apps/app/components/gantt-chart/chart/month.tsx
+++ b/apps/app/components/gantt-chart/chart/month.tsx
@ -37,7 +37,7 @@ export const MonthChartView: FC<any> = () => {
                      <div
                        className={`relative h-full w-full flex-1 flex justify-center ${
                          ["sat", "sun"].includes(_item?.dayData?.shortTitle || "")
-                            ? `bg-brand-surface-2`
+                            ? `bg-brand-surface-1`
                            : ``
                        }`}
                      >
--- a/apps/app/components/gantt-chart/root.tsx
+++ b/apps/app/components/gantt-chart/root.tsx
@ -5,6 +5,7 @@ import { ChartViewRoot } from "./chart";
 import { ChartContextProvider } from "./contexts";

 type GanttChartRootProps = {
+  border?: boolean;
  title: null | string;
  loaderTitle: string;
  blocks: any;
@ -14,6 +15,7 @@ type GanttChartRootProps = {
 };

 export const GanttChartRoot: FC<GanttChartRootProps> = ({
+  border = true,
  title = null,
  blocks,
  loaderTitle = "blocks",
@ -23,6 +25,7 @@ export const GanttChartRoot: FC<GanttChartRootProps> = ({
 }) => (
  <ChartContextProvider>
    <ChartViewRoot
+      border={border}
      title={title}
      blocks={blocks}
      loaderTitle={loaderTitle}
--- a/apps/app/components/issues/gantt-chart.tsx
+++ b/apps/app/components/issues/gantt-chart.tsx
@ -1,8 +1,7 @@
 import { FC } from "react";
-
+// next imports
 import Link from "next/link";
 import { useRouter } from "next/router";
-
 // components
 import { GanttChartRoot } from "components/gantt-chart";
 // hooks
@ -32,15 +31,17 @@ export const IssueGanttChartView: FC<Props> = ({}) => {

  // rendering issues on gantt card
  const GanttBlockView = ({ data }: any) => (
-    <div className="relative flex items-center w-full h-full overflow-hidden shadow-sm">
-      <div
-        className="flex-shrink-0 w-[4px] h-full"
-        style={{ backgroundColor: data?.state_detail?.color || "#858e96" }}
-      />
-      <div className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
-        {data?.name}
-      </div>
-    </div>
+    <Link href={`/${workspaceSlug}/projects/${projectId}/issues/${data?.id}`}>
+      <a className="relative flex items-center w-full h-full overflow-hidden shadow-sm font-normal">
+        <div
+          className="flex-shrink-0 w-[4px] h-full"
+          style={{ backgroundColor: data?.state_detail?.color || "#858e96" }}
+        />
+        <div className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
+          {data?.name}
+        </div>
+      </a>
+    </Link>
  );

  // handle gantt issue start date and target date
@ -67,8 +68,9 @@ export const IssueGanttChartView: FC<Props> = ({}) => {
      : [];

  return (
-    <div className="w-full h-full p-3">
+    <div className="w-full h-full">
      <GanttChartRoot
+        border={false}
        title="Issues"
        loaderTitle="Issues"
        blocks={ganttIssues ? blockFormat(ganttIssues) : null}
--- a/apps/app/components/issues/view-select/assignee.tsx
+++ b/apps/app/components/issues/view-select/assignee.tsx
@ -122,6 +122,8 @@ export const ViewAssigneeSelect: React.FC<Props> = ({
      noChevron
      position={position}
      disabled={isNotAllowed}
+      selfPositioned={selfPositioned}
+      dropdownWidth="w-full min-w-[8rem]"
    />
  );
 };
--- a/apps/app/components/modules/gantt-chart.tsx
+++ b/apps/app/components/modules/gantt-chart.tsx
@ -1,7 +1,7 @@
 import { FC } from "react";
-
+// next imports
+import Link from "next/link";
 import { useRouter } from "next/router";
-
 // components
 import { GanttChartRoot } from "components/gantt-chart";
 // hooks
@ -32,15 +32,17 @@ export const ModuleIssuesGanttChartView: FC<Props> = ({}) => {

  // rendering issues on gantt card
  const GanttBlockView = ({ data }: any) => (
-    <div className="relative flex items-center w-full h-full overflow-hidden shadow-sm">
-      <div
-        className="flex-shrink-0 w-[4px] h-full"
-        style={{ backgroundColor: data?.state_detail?.color || "#858e96" }}
-      />
-      <div className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
-        {data?.name}
-      </div>
-    </div>
+    <Link href={`/${workspaceSlug}/projects/${projectId}/issues/${data?.id}`}>
+      <a className="relative flex items-center w-full h-full overflow-hidden shadow-sm">
+        <div
+          className="flex-shrink-0 w-[4px] h-full"
+          style={{ backgroundColor: data?.state_detail?.color || "#858e96" }}
+        />
+        <div className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
+          {data?.name}
+        </div>
+      </a>
+    </Link>
  );

  // handle gantt issue start date and target date
--- a/apps/app/components/modules/modules-list-gantt-chart.tsx
+++ b/apps/app/components/modules/modules-list-gantt-chart.tsx
@ -1,5 +1,7 @@
 import { FC } from "react";
-
+// next imports
+import Link from "next/link";
+import { useRouter } from "next/router";
 // components
 import { GanttChartRoot } from "components/gantt-chart";
 // types
@ -12,6 +14,9 @@ type Props = {
 };

 export const ModulesListGanttChartView: FC<Props> = ({ modules }) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
  // rendering issues on gantt sidebar
  const GanttSidebarBlockView = ({ data }: any) => (
    <div className="relative flex w-full h-full items-center p-1 overflow-hidden gap-1">
@ -27,15 +32,17 @@ export const ModulesListGanttChartView: FC<Props> = ({ modules }) => {

  // rendering issues on gantt card
  const GanttBlockView = ({ data }: { data: IModule }) => (
-    <div className="relative flex items-center w-full h-full overflow-hidden shadow-sm">
-      <div
-        className="flex-shrink-0 w-[4px] h-full"
-        style={{ backgroundColor: MODULE_STATUS.find((s) => s.value === data.status)?.color }}
-      />
-      <div className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
-        {data?.name}
-      </div>
-    </div>
+    <Link href={`/${workspaceSlug}/projects/${projectId}/modules/${data?.id}`}>
+      <a className="relative flex items-center w-full h-full overflow-hidden shadow-sm">
+        <div
+          className="flex-shrink-0 w-[4px] h-full"
+          style={{ backgroundColor: MODULE_STATUS.find((s) => s.value === data.status)?.color }}
+        />
+        <div className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
+          {data?.name}
+        </div>
+      </a>
+    </Link>
  );

  // handle gantt issue start date and target date
--- a/apps/app/components/ui/custom-search-select.tsx
+++ b/apps/app/components/ui/custom-search-select.tsx
@ -29,6 +29,7 @@ type CustomSearchSelectProps = {
  selfPositioned?: boolean;
  multiple?: boolean;
  footerOption?: JSX.Element;
+  dropdownWidth?: string;
 };
 export const CustomSearchSelect = ({
  label,
@ -47,6 +48,7 @@ export const CustomSearchSelect = ({
  selfPositioned = false,
  multiple = false,
  footerOption,
+  dropdownWidth,
 }: CustomSearchSelectProps) => {
  const [query, setQuery] = useState("");

@ -108,7 +110,9 @@ export const CustomSearchSelect = ({
                position === "right" ? "right-0" : "left-0"
              } ${
                verticalPosition === "top" ? "bottom-full mb-1" : "mt-1"
-              } z-10 origin-top-right rounded-md bg-brand-surface-1 text-xs shadow-lg focus:outline-none`}
+              } z-10 origin-top-right rounded-md bg-brand-surface-1 text-xs shadow-lg focus:outline-none ${
+                dropdownWidth ? dropdownWidth : ``
+              } `}
            >
              <div className="flex w-full items-center justify-start rounded-sm border-[0.6px] border-brand-base bg-brand-surface-1 px-2">
                <MagnifyingGlassIcon className="h-3 w-3 text-brand-secondary" />
--- a/apps/app/components/views/gantt-chart.tsx
+++ b/apps/app/components/views/gantt-chart.tsx
@ -1,7 +1,7 @@
 import { FC } from "react";
-
+// next imports
+import Link from "next/link";
 import { useRouter } from "next/router";
-
 // components
 import { GanttChartRoot } from "components/gantt-chart";
 // hooks
@ -32,15 +32,17 @@ export const ViewIssuesGanttChartView: FC<Props> = ({}) => {

  // rendering issues on gantt card
  const GanttBlockView = ({ data }: any) => (
-    <div className="relative flex items-center w-full h-full overflow-hidden shadow-sm">
-      <div
-        className="flex-shrink-0 w-[4px] h-full"
-        style={{ backgroundColor: data?.state_detail?.color || "#858e96" }}
-      />
-      <div className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
-        {data?.name}
-      </div>
-    </div>
+    <Link href={`/${workspaceSlug}/projects/${projectId}/issues/${data?.id}`}>
+      <a className="relative flex items-center w-full h-full overflow-hidden shadow-sm">
+        <div
+          className="flex-shrink-0 w-[4px] h-full"
+          style={{ backgroundColor: data?.state_detail?.color || "#858e96" }}
+        />
+        <div className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
+          {data?.name}
+        </div>
+      </a>
+    </Link>
  );

  // handle gantt issue start date and target date