From a7aa5c2ba7100512d9aa52b624c4d2227dd143f1 Mon Sep 17 00:00:00 2001
From: rahulramesha <71900764+rahulramesha@users.noreply.github.com>
Date: Wed, 3 Jul 2024 16:25:41 +0530
Subject: [PATCH] [WEB-1829] fix: stop issues query before fetching the view
 filters (#5015)

* fix to not query issues before fetching the view filters

* add default group by for Kanban views
---
 .../roots/project-view-layout-root.tsx             | 11 ++++++++++-
 web/core/store/project-view.store.ts               |  4 ++--
 web/helpers/project-views.helpers.ts               | 14 ++++++++++++++
 3 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/web/core/components/issues/issue-layouts/roots/project-view-layout-root.tsx b/web/core/components/issues/issue-layouts/roots/project-view-layout-root.tsx
index 768d45781..1552ba948 100644
--- a/web/core/components/issues/issue-layouts/roots/project-view-layout-root.tsx
+++ b/web/core/components/issues/issue-layouts/roots/project-view-layout-root.tsx
@@ -4,6 +4,7 @@ import { useParams } from "next/navigation";
 import useSWR from "swr";
 // mobx store
 // components
+import { LogoSpinner } from "@/components/common";
 import {
   IssuePeekOverview,
   ProjectViewAppliedFiltersRoot,
@@ -42,7 +43,7 @@ export const ProjectViewLayoutRoot: React.FC = observer(() => {
   // hooks
   const { issuesFilter } = useIssues(EIssuesStoreType.PROJECT_VIEW);
 
-  useSWR(
+  const { isLoading } = useSWR(
     workspaceSlug && projectId && viewId ? `PROJECT_VIEW_ISSUES_${workspaceSlug}_${projectId}_${viewId}` : null,
     async () => {
       if (workspaceSlug && projectId && viewId) {
@@ -56,6 +57,14 @@ export const ProjectViewLayoutRoot: React.FC = observer(() => {
 
   if (!workspaceSlug || !projectId || !viewId) return <></>;
 
+  if (isLoading) {
+    return (
+      <div className="relative flex h-screen w-full items-center justify-center">
+        <LogoSpinner />
+      </div>
+    );
+  }
+
   return (
     <IssuesStoreContext.Provider value={EIssuesStoreType.PROJECT_VIEW}>
       <div className="relative flex h-full w-full flex-col overflow-hidden">
diff --git a/web/core/store/project-view.store.ts b/web/core/store/project-view.store.ts
index bfb560f7e..f76bb45fe 100644
--- a/web/core/store/project-view.store.ts
+++ b/web/core/store/project-view.store.ts
@@ -6,7 +6,7 @@ import { IProjectView, TViewFilters } from "@plane/types";
 // constants
 import { EViewAccess } from "@/constants/views";
 // helpers
-import { getViewName, orderViews, shouldFilterView } from "@/helpers/project-views.helpers";
+import { getValidatedViewFilters, getViewName, orderViews, shouldFilterView } from "@/helpers/project-views.helpers";
 // services
 import { ViewService } from "@/plane-web/services";
 // store
@@ -196,7 +196,7 @@ export class ProjectViewStore implements IProjectViewStore {
    * @returns Promise<IProjectView>
    */
   createView = async (workspaceSlug: string, projectId: string, data: Partial<IProjectView>): Promise<IProjectView> => {
-    const response = await this.viewService.createView(workspaceSlug, projectId, data);
+    const response = await this.viewService.createView(workspaceSlug, projectId, getValidatedViewFilters(data));
 
     runInAction(() => {
       set(this.viewMap, [response.id], response);
diff --git a/web/helpers/project-views.helpers.ts b/web/helpers/project-views.helpers.ts
index 51ff4d63b..c0c42b104 100644
--- a/web/helpers/project-views.helpers.ts
+++ b/web/helpers/project-views.helpers.ts
@@ -1,3 +1,4 @@
+import isNil from "lodash/isNil";
 import orderBy from "lodash/orderBy";
 import { IProjectView, TViewFilterProps, TViewFiltersSortBy, TViewFiltersSortKey } from "@plane/types";
 import { getDate } from "@/helpers/date-time.helper";
@@ -74,3 +75,16 @@ export const getViewName = (name: string | undefined) => {
   if (!name || name.trim() === "") return "Untitled";
   return name;
 };
+
+/**
+ * Adds validation for the view creation filters
+ * @param data
+ * @returns
+ */
+export const getValidatedViewFilters = (data: Partial<IProjectView>) => {
+  if (data?.display_filters && data?.display_filters?.layout === "kanban" && isNil(data.display_filters.group_by)) {
+    data.display_filters.group_by = "state";
+  }
+
+  return data;
+};