chore: web app use client directive (#4747)

* chore: use client directive

* chore: use client directive

web/components/issues/issue-layouts/calendar/base-calendar-root.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { FC } from "react";
 import { observer } from "mobx-react-lite";
 import { useParams } from "next/navigation";

web/components/issues/issue-layouts/calendar/calendar.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useEffect, useRef, useState } from "react";
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import { autoScrollForElements } from "@atlaskit/pragmatic-drag-and-drop-auto-scroll/element";

web/components/issues/issue-layouts/calendar/day-tile.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useEffect, useRef, useState } from "react";
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import { dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";

web/components/issues/issue-layouts/calendar/dropdowns/options-dropdown.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";

web/components/issues/issue-layouts/calendar/issue-block.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 /* eslint-disable react/display-name */
 import { useState, useRef, forwardRef } from "react";
 import { observer } from "mobx-react";

web/components/issues/issue-layouts/calendar/quick-add-issue-form.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useEffect, useRef, useState } from "react";
 import { differenceInCalendarDays } from "date-fns";
 import { observer } from "mobx-react";

web/components/issues/issue-layouts/empty-states/cycle.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useState } from "react";
 import isEmpty from "lodash/isEmpty";
 import { observer } from "mobx-react-lite";
@@ -65,8 +67,8 @@ export const CycleEmptyState: React.FC<Props> = observer((props) => {
   const emptyStateType = isCompletedAndEmpty
     ? EmptyStateType.PROJECT_CYCLE_COMPLETED_NO_ISSUES
     : isEmptyFilters
-    ? EmptyStateType.PROJECT_EMPTY_FILTER
-    : EmptyStateType.PROJECT_CYCLE_NO_ISSUES;
+      ? EmptyStateType.PROJECT_EMPTY_FILTER
+      : EmptyStateType.PROJECT_CYCLE_NO_ISSUES;
   const additionalPath = isCompletedAndEmpty ? undefined : activeLayout ?? "list";
 
   return (

web/components/issues/issue-layouts/empty-states/module.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useState } from "react";
 import { observer } from "mobx-react-lite";
 // types

web/components/issues/issue-layouts/filters/applied-filters/cycle.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { observer } from "mobx-react";
 import { X } from "lucide-react";
 import { TCycleGroups } from "@plane/types";

web/components/issues/issue-layouts/filters/applied-filters/members.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { observer } from "mobx-react";
 import { X } from "lucide-react";
 // ui

web/components/issues/issue-layouts/filters/applied-filters/module.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { observer } from "mobx-react";
 import { X } from "lucide-react";
 // hooks

web/components/issues/issue-layouts/filters/applied-filters/priority.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { observer } from "mobx-react";
 
 // icons

web/components/issues/issue-layouts/filters/applied-filters/roots/global-view-root.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import isEmpty from "lodash/isEmpty";
 import isEqual from "lodash/isEqual";
 import { observer } from "mobx-react";

web/components/issues/issue-layouts/filters/applied-filters/roots/project-view-root.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import isEmpty from "lodash/isEmpty";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";

web/components/issues/issue-layouts/filters/applied-filters/state-group.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { observer } from "mobx-react";
 
 // icons

web/components/issues/issue-layouts/filters/applied-filters/state.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { observer } from "mobx-react";
 
 // icons

web/components/issues/issue-layouts/filters/header/filters/assignee.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useMemo, useState } from "react";
 import sortBy from "lodash/sortBy";
 import { observer } from "mobx-react-lite";

web/components/issues/issue-layouts/filters/header/filters/created-by.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useMemo, useState } from "react";
 import sortBy from "lodash/sortBy";
 import { observer } from "mobx-react-lite";

web/components/issues/issue-layouts/filters/header/filters/cycle.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useMemo, useState } from "react";
 import sortBy from "lodash/sortBy";
 import { observer } from "mobx-react";

web/components/issues/issue-layouts/filters/header/filters/labels.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useMemo, useState } from "react";
 import sortBy from "lodash/sortBy";
 import { observer } from "mobx-react";

web/components/issues/issue-layouts/filters/header/filters/mentions.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useMemo, useState } from "react";
 import sortBy from "lodash/sortBy";
 import { observer } from "mobx-react-lite";

web/components/issues/issue-layouts/filters/header/filters/module.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useMemo, useState } from "react";
 import sortBy from "lodash/sortBy";
 import { observer } from "mobx-react";

web/components/issues/issue-layouts/filters/header/filters/priority.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useState } from "react";
 import { observer } from "mobx-react";
 

web/components/issues/issue-layouts/filters/header/filters/project.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useMemo, useState } from "react";
 import sortBy from "lodash/sortBy";
 import { observer } from "mobx-react";

web/components/issues/issue-layouts/filters/header/filters/state-group.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useState } from "react";
 import { observer } from "mobx-react";
 // components

web/components/issues/issue-layouts/filters/header/filters/state.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useMemo, useState } from "react";
 import sortBy from "lodash/sortBy";
 import { observer } from "mobx-react";

web/components/issues/issue-layouts/filters/header/helpers/dropdown.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { Fragment, useState } from "react";
 import { Placement } from "@popperjs/core";
 import { usePopper } from "react-popper";

web/components/issues/issue-layouts/filters/header/layout-selection.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 
 // ui

web/components/issues/issue-layouts/gantt/blocks.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { observer } from "mobx-react";
 // hooks
 // ui

web/components/issues/issue-layouts/gantt/quick-add-issue-form.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useEffect, useState, useRef, FC } from "react";
 import { observer } from "mobx-react";
 import { useParams, usePathname } from "next/navigation";

web/components/issues/issue-layouts/kanban/base-kanban-root.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { FC, useCallback, useEffect, useRef, useState } from "react";
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import { dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";

web/components/issues/issue-layouts/kanban/block.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { MutableRefObject, useEffect, useRef, useState } from "react";
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";

web/components/issues/issue-layouts/kanban/headers/group-by-card.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { FC } from "react";
 import { observer } from "mobx-react";
 import { useParams, usePathname } from "next/navigation";

web/components/issues/issue-layouts/kanban/kanban-group.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { MutableRefObject, useEffect, useRef, useState } from "react";
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import { dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
@@ -133,7 +135,16 @@ export const KanbanGroup = observer((props: IKanbanGroup) => {
         element,
       })
     );
-  }, [columnRef, groupId, sub_group_id, setIsDraggingOverColumn, orderBy, isDropDisabled, dropErrorMessage, handleOnDrop]);
+  }, [
+    columnRef,
+    groupId,
+    sub_group_id,
+    setIsDraggingOverColumn,
+    orderBy,
+    isDropDisabled,
+    dropErrorMessage,
+    handleOnDrop,
+  ]);
 
   const prePopulateQuickAddData = (
     groupByKey: string | undefined,
@@ -201,7 +212,7 @@ export const KanbanGroup = observer((props: IKanbanGroup) => {
       ref={columnRef}
     >
       <GroupDragOverlay
-        dragColumnOrientation={sub_group_by ? "justify-start": "justify-center" }
+        dragColumnOrientation={sub_group_by ? "justify-start" : "justify-center"}
         canOverlayBeVisible={canOverlayBeVisible}
         isDropDisabled={isDropDisabled}
         dropErrorMessage={dropErrorMessage}

web/components/issues/issue-layouts/kanban/quick-add-issue-form.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useEffect, useState, useRef } from "react";
 import { observer } from "mobx-react";
 import { useParams, usePathname } from "next/navigation";

web/components/issues/issue-layouts/list/block-root.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { FC, MutableRefObject, useEffect, useRef, useState } from "react";
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import { dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";

web/components/issues/issue-layouts/list/block.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { Dispatch, MouseEvent, SetStateAction, useEffect, useRef } from "react";
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import { draggable } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";

web/components/issues/issue-layouts/list/headers/group-by-card.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useState } from "react";
 import { observer } from "mobx-react";
 import { useParams, usePathname } from "next/navigation";

web/components/issues/issue-layouts/list/list-group.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { MutableRefObject, useEffect, useRef, useState } from "react";
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import { dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";

web/components/issues/issue-layouts/list/quick-add-issue-form.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { FC, useEffect, useState, useRef } from "react";
 import { observer } from "mobx-react";
 import { useParams, usePathname } from "next/navigation";

web/components/issues/issue-layouts/properties/all-properties.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useCallback, useMemo } from "react";
 import xor from "lodash/xor";
 import { observer } from "mobx-react";

web/components/issues/issue-layouts/properties/labels.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { Fragment, useEffect, useRef, useState } from "react";
 import { Placement } from "@popperjs/core";
 import { observer } from "mobx-react";

web/components/issues/issue-layouts/quick-action-dropdowns/all-issue.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useState } from "react";
 import omit from "lodash/omit";
 import { observer } from "mobx-react";

web/components/issues/issue-layouts/quick-action-dropdowns/archived-issue.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";

web/components/issues/issue-layouts/quick-action-dropdowns/cycle-issue.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useState } from "react";
 import omit from "lodash/omit";
 import { observer } from "mobx-react";

web/components/issues/issue-layouts/quick-action-dropdowns/draft-issue.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useState } from "react";
 import omit from "lodash/omit";
 import { observer } from "mobx-react";

web/components/issues/issue-layouts/quick-action-dropdowns/module-issue.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useState } from "react";
 import omit from "lodash/omit";
 import { observer } from "mobx-react";

web/components/issues/issue-layouts/quick-action-dropdowns/project-issue.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useState } from "react";
 import omit from "lodash/omit";
 import { observer } from "mobx-react";

web/components/issues/issue-layouts/roots/project-layout-root.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { FC, Fragment } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";

web/components/issues/issue-layouts/save-filter-view.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { FC, useState } from "react";
 import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions } from "@plane/types";
 import { Button } from "@plane/ui";

web/components/issues/issue-layouts/spreadsheet/columns/header-column.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 //ui
 import {
   ArrowDownWideNarrow,

web/components/issues/issue-layouts/spreadsheet/issue-row.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { Dispatch, MouseEvent, MutableRefObject, SetStateAction, useRef, useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";

web/components/issues/issue-layouts/spreadsheet/quick-add-issue-form.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useEffect, useState, useRef } from "react";
 import { observer } from "mobx-react";
 import { usePathname } from "next/navigation";

web/components/issues/issue-layouts/utils.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { extractInstruction } from "@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item";
 import clone from "lodash/clone";
 import concat from "lodash/concat";