From 5dea83e73bf405d533f0774c836ebb515373c9ea Mon Sep 17 00:00:00 2001 From: Akshita Goyal <36129505+gakshita@users.noreply.github.com> Date: Thu, 16 Jan 2025 21:33:48 +0530 Subject: [PATCH] fix: sticky build (#2219) --- web/ee/components/editor/index.ts | 1 - .../editor/sticky-editor/color-pallete.tsx | 36 ---- .../editor/sticky-editor/editor.tsx | 109 ------------ .../components/editor/sticky-editor/index.ts | 2 - .../editor/sticky-editor/toolbar.tsx | 115 ------------ web/ee/hooks/use-stickies.tsx | 11 -- web/ee/store/root.store.ts | 4 - web/ee/store/sticky/sticky.store.ts | 167 ------------------ 8 files changed, 445 deletions(-) delete mode 100644 web/ee/components/editor/sticky-editor/color-pallete.tsx delete mode 100644 web/ee/components/editor/sticky-editor/editor.tsx delete mode 100644 web/ee/components/editor/sticky-editor/index.ts delete mode 100644 web/ee/components/editor/sticky-editor/toolbar.tsx delete mode 100644 web/ee/hooks/use-stickies.tsx delete mode 100644 web/ee/store/sticky/sticky.store.ts diff --git a/web/ee/components/editor/index.ts b/web/ee/components/editor/index.ts index d2d52cf3ec..f8506c1d6d 100644 --- a/web/ee/components/editor/index.ts +++ b/web/ee/components/editor/index.ts @@ -1,2 +1 @@ -export * from "./sticky-editor"; export * from "ce/components/editor"; diff --git a/web/ee/components/editor/sticky-editor/color-pallete.tsx b/web/ee/components/editor/sticky-editor/color-pallete.tsx deleted file mode 100644 index 3060650f7d..0000000000 --- a/web/ee/components/editor/sticky-editor/color-pallete.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import { TSticky } from "@plane/types"; - -export const STICKY_COLORS = [ - "#D4DEF7", // light periwinkle - "#B4E4FF", // light blue - "#FFF2B4", // light yellow - "#E3E3E3", // light gray - "#FFE2DD", // light pink - "#F5D1A5", // light orange - "#D1F7C4", // light green - "#E5D4FF", // light purple -]; - -type TProps = { - handleUpdate: (data: Partial) => Promise; -}; - -export const ColorPalette = (props: TProps) => { - const { handleUpdate } = props; - return ( -
-
Background colors
-
- {STICKY_COLORS.map((color, index) => ( -
-
- ); -}; diff --git a/web/ee/components/editor/sticky-editor/editor.tsx b/web/ee/components/editor/sticky-editor/editor.tsx deleted file mode 100644 index a56fc119b9..0000000000 --- a/web/ee/components/editor/sticky-editor/editor.tsx +++ /dev/null @@ -1,109 +0,0 @@ -import React, { useState } from "react"; -// plane constants -import { EIssueCommentAccessSpecifier } from "@plane/constants"; -// plane editor -import { EditorRefApi, ILiteTextEditor, LiteTextEditorWithRef } from "@plane/editor"; -// components -import { TSticky } from "@plane/types"; -// helpers -import { cn } from "@/helpers/common.helper"; -import { getEditorFileHandlers } from "@/helpers/editor.helper"; -// hooks -// plane web hooks -import { useEditorFlagging } from "@/plane-web/hooks/use-editor-flagging"; -import { useFileSize } from "@/plane-web/hooks/use-file-size"; -import { Toolbar } from "./toolbar"; - -interface StickyEditorWrapperProps - extends Omit { - workspaceSlug: string; - workspaceId: string; - projectId?: string; - accessSpecifier?: EIssueCommentAccessSpecifier; - handleAccessChange?: (accessKey: EIssueCommentAccessSpecifier) => void; - showAccessSpecifier?: boolean; - showSubmitButton?: boolean; - isSubmitting?: boolean; - showToolbarInitially?: boolean; - showToolbar?: boolean; - uploadFile: (file: File) => Promise; - parentClassName?: string; - handleColorChange: (data: Partial) => Promise; - handleDelete: () => Promise; -} - -export const StickyEditor = React.forwardRef((props, ref) => { - const { - containerClassName, - workspaceSlug, - workspaceId, - projectId, - handleDelete, - handleColorChange, - showToolbarInitially = true, - showToolbar = true, - parentClassName = "", - placeholder = "Add comment...", - uploadFile, - ...rest - } = props; - // states - const [isFocused, setIsFocused] = useState(showToolbarInitially); - // editor flaggings - const { liteTextEditor: disabledExtensions } = useEditorFlagging(workspaceSlug?.toString()); - // file size - const { maxFileSize } = useFileSize(); - function isMutableRefObject(ref: React.ForwardedRef): ref is React.MutableRefObject { - return !!ref && typeof ref === "object" && "current" in ref; - } - // derived values - const editorRef = isMutableRefObject(ref) ? ref.current : null; - - return ( -
!showToolbarInitially && setIsFocused(true)} - onBlur={() => !showToolbarInitially && setIsFocused(false)} - > - <>, - }} - placeholder={placeholder} - containerClassName={cn(containerClassName, "relative")} - {...rest} - /> -
- { - // TODO: update this while toolbar homogenization - // @ts-expect-error type mismatch here - editorRef?.executeMenuItemCommand({ - itemKey: item.itemKey, - ...item.extraProps, - }); - }} - handleDelete={handleDelete} - handleColorChange={handleColorChange} - editorRef={editorRef} - /> -
-
- ); -}); - -StickyEditor.displayName = "StickyEditor"; diff --git a/web/ee/components/editor/sticky-editor/index.ts b/web/ee/components/editor/sticky-editor/index.ts deleted file mode 100644 index f73ee92ef6..0000000000 --- a/web/ee/components/editor/sticky-editor/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from "./editor"; -export * from "./toolbar"; diff --git a/web/ee/components/editor/sticky-editor/toolbar.tsx b/web/ee/components/editor/sticky-editor/toolbar.tsx deleted file mode 100644 index f3d0dfec24..0000000000 --- a/web/ee/components/editor/sticky-editor/toolbar.tsx +++ /dev/null @@ -1,115 +0,0 @@ -"use client"; - -import React, { useEffect, useState, useCallback } from "react"; -import { Palette, Trash2 } from "lucide-react"; -// editor -import { EditorRefApi } from "@plane/editor"; -// ui -import { useOutsideClickDetector } from "@plane/hooks"; -import { TSticky } from "@plane/types"; -import { Tooltip } from "@plane/ui"; -// constants -import { TOOLBAR_ITEMS, ToolbarMenuItem } from "@/constants/editor"; -// helpers -import { cn } from "@/helpers/common.helper"; -import { ColorPalette } from "./color-pallete"; - -type Props = { - executeCommand: (item: ToolbarMenuItem) => void; - editorRef: EditorRefApi | null; - handleColorChange: (data: Partial) => Promise; - handleDelete: () => void; -}; - -const toolbarItems = TOOLBAR_ITEMS.sticky; - -export const Toolbar: React.FC = (props) => { - const { executeCommand, editorRef, handleColorChange, handleDelete } = props; - - // State to manage active states of toolbar items - const [activeStates, setActiveStates] = useState>({}); - const [showColorPalette, setShowColorPalette] = useState(false); - const colorPaletteRef = React.useRef(null); - // Function to update active states - const updateActiveStates = useCallback(() => { - if (!editorRef) return; - const newActiveStates: Record = {}; - Object.values(toolbarItems) - .flat() - .forEach((item) => { - // TODO: update this while toolbar homogenization - // @ts-expect-error type mismatch here - newActiveStates[item.renderKey] = editorRef.isMenuItemActive({ - itemKey: item.itemKey, - ...item.extraProps, - }); - }); - setActiveStates(newActiveStates); - }, [editorRef]); - - // useEffect to call updateActiveStates when isActive prop changes - useEffect(() => { - if (!editorRef) return; - const unsubscribe = editorRef.onStateChange(updateActiveStates); - updateActiveStates(); - return () => unsubscribe(); - }, [editorRef, updateActiveStates]); - - useOutsideClickDetector(colorPaletteRef, () => setShowColorPalette(false)); - - return ( -
-
- {/* color palette */} - {showColorPalette && } - - -
-
- {Object.keys(toolbarItems).map((key) => ( -
- {toolbarItems[key].map((item) => { - const isItemActive = activeStates[item.renderKey]; - - return ( - - {item.name} - {item.shortcut && {item.shortcut.join(" + ")}} -

- } - > - - - ); - })} -
- ))} -
-
-
- {/* delete action */} - -
- ); -}; diff --git a/web/ee/hooks/use-stickies.tsx b/web/ee/hooks/use-stickies.tsx deleted file mode 100644 index f81b39ee33..0000000000 --- a/web/ee/hooks/use-stickies.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import { useContext } from "react"; -// context -import { StoreContext } from "@/lib/store-context"; -import { IStickyStore } from "@/plane-web/store/sticky/sticky.store"; -// plane web stores - -export const useSticky = (): IStickyStore => { - const context = useContext(StoreContext); - if (context === undefined) throw new Error("useSticky must be used within StoreProvider"); - return context.stickyStore; -}; diff --git a/web/ee/store/root.store.ts b/web/ee/store/root.store.ts index 51f2768f3d..30c837fdcd 100644 --- a/web/ee/store/root.store.ts +++ b/web/ee/store/root.store.ts @@ -67,7 +67,6 @@ import { import { IPiChatStore, PiChatStore } from "./pi-chat/pi-chat"; // timeline import { IProjectStore, ProjectStore } from "./projects/projects"; -import { IStickyStore, StickyStore } from "./sticky/sticky.store"; import { ITimelineStore } from "./timeline"; export class RootStore extends CoreRootStore { @@ -101,7 +100,6 @@ export class RootStore extends CoreRootStore { gitlabIntegration: IGitlabStore; initiativeFilterStore: IInitiativeFilterStore; initiativeStore: IInitiativeStore; - stickyStore: IStickyStore; constructor() { super(); @@ -123,7 +121,6 @@ export class RootStore extends CoreRootStore { this.projectDetails = new ProjectStore(this); this.teamRoot = new TeamRootStore(this); this.workspaceNotification = new WorkspaceNotificationStore(this); - this.stickyStore = new StickyStore(); // importers this.jiraImporter = new JiraStore(this); this.jiraServerImporter = new JiraServerStore(this); @@ -157,7 +154,6 @@ export class RootStore extends CoreRootStore { this.timelineStore = new TimeLineStore(this); this.projectDetails = new ProjectStore(this); this.teamRoot = new TeamRootStore(this); - this.stickyStore = new StickyStore(); // importers this.jiraImporter = new JiraStore(this); this.jiraServerImporter = new JiraServerStore(this); diff --git a/web/ee/store/sticky/sticky.store.ts b/web/ee/store/sticky/sticky.store.ts deleted file mode 100644 index 4bed2295ba..0000000000 --- a/web/ee/store/sticky/sticky.store.ts +++ /dev/null @@ -1,167 +0,0 @@ -import { observable, action, makeObservable, runInAction } from "mobx"; -import { computedFn } from "mobx-utils"; -import { v4 } from "uuid"; -import { TSticky } from "@plane/types"; -import { StickyService } from "@/plane-web/services/sticky.service"; -export interface IStickyStore { - creatingSticky: boolean; - fetchingWorkspaceStickies: boolean; - workspaceStickies: Record; // workspaceId -> stickyIds - stickies: Record; // stickyId -> sticky - searchQuery: string; - activeStickyId: string | undefined; - recentStickyId: string | undefined; - showAddNewSticky: boolean; - currentPage: number; - totalPages: number; - - // computed - getWorkspaceStickies: (workspaceSlug: string) => string[]; - - // actions - toggleShowNewSticky: (value: boolean) => void; - updateSearchQuery: (query: string) => void; - fetchWorkspaceStickies: (workspaceSlug: string, cursor?: string, per_page?: number) => void; - createSticky: (workspaceSlug: string, sticky: Partial) => void; - updateSticky: (workspaceSlug: string, id: string, updates: Partial) => void; - deleteSticky: (workspaceSlug: string, id: string) => void; - updateActiveStickyId: (id: string | undefined) => void; - fetchRecentSticky: (workspaceSlug: string) => void; - incrementPage: () => void; -} - -export class StickyStore implements IStickyStore { - creatingSticky = false; - fetchingWorkspaceStickies = true; - workspaceStickies: Record = {}; - stickies: Record = {}; - recentStickyId: string | undefined = undefined; - searchQuery = ""; - activeStickyId: string | undefined = undefined; - showAddNewSticky = false; - currentPage = 0; - totalPages = 0; - - // services - stickyService; - - constructor() { - makeObservable(this, { - // observables - creatingSticky: observable, - fetchingWorkspaceStickies: observable, - activeStickyId: observable, - showAddNewSticky: observable, - recentStickyId: observable, - workspaceStickies: observable, - stickies: observable, - searchQuery: observable, - currentPage: observable, - totalPages: observable, - // actions - updateSearchQuery: action, - updateSticky: action, - deleteSticky: action, - incrementPage: action, - }); - this.stickyService = new StickyService(); - } - - getWorkspaceStickies = computedFn((workspaceSlug: string) => { - let filteredStickies = (this.workspaceStickies[workspaceSlug] || []).map((stickyId) => this.stickies[stickyId]); - if (this.searchQuery) { - filteredStickies = filteredStickies.filter( - (sticky) => sticky.name && sticky.name.toLowerCase().includes(this.searchQuery.toLowerCase()) - ); - } - return filteredStickies.map((sticky) => sticky.id); - }); - - toggleShowNewSticky = (value: boolean) => { - this.showAddNewSticky = value; - }; - - updateSearchQuery = (query: string) => { - this.searchQuery = query; - }; - - updateActiveStickyId = (id: string | undefined) => { - this.activeStickyId = id; - }; - - incrementPage = () => { - this.currentPage += 1; - }; - - fetchRecentSticky = async (workspaceSlug: string) => { - const response = await this.stickyService.getStickies(workspaceSlug, "1:0:0", 1); - runInAction(() => { - this.recentStickyId = response.results[0]?.id; - this.stickies[response.results[0]?.id] = response.results[0]; - }); - }; - fetchWorkspaceStickies = async (workspaceSlug: string, cursor?: string, per_page?: number) => { - this.fetchingWorkspaceStickies = true; - const response = await this.stickyService.getStickies(workspaceSlug, cursor, per_page); - - runInAction(() => { - response.results.forEach((sticky) => { - if (!this.workspaceStickies[workspaceSlug]?.includes(sticky.id)) { - this.workspaceStickies[workspaceSlug] = [...(this.workspaceStickies[workspaceSlug] || []), sticky.id]; - } - this.stickies[sticky.id] = sticky; - }); - this.totalPages = response.total_pages; - this.fetchingWorkspaceStickies = false; - }); - }; - - createSticky = async (workspaceSlug: string, sticky: Partial) => { - if (!this.showAddNewSticky) return; - this.showAddNewSticky = false; - this.creatingSticky = true; - const workspaceStickies = this.workspaceStickies[workspaceSlug] || []; - const response = await this.stickyService.createSticky(workspaceSlug, sticky); - runInAction(() => { - this.stickies[response.id] = response; - this.workspaceStickies[workspaceSlug] = [response.id, ...workspaceStickies]; - this.activeStickyId = response.id; - this.recentStickyId = response.id; - this.creatingSticky = false; - }); - }; - - updateSticky = async (workspaceSlug: string, id: string, updates: Partial) => { - const sticky = this.stickies[id]; - if (!sticky) return; - try { - this.stickies[id] = { - ...sticky, - ...updates, - updatedAt: new Date(), - }; - this.recentStickyId = id; - await this.stickyService.updateSticky(workspaceSlug, id, updates); - } catch (e) { - console.log(e); - this.stickies[id] = sticky; - } - }; - - deleteSticky = async (workspaceSlug: string, id: string) => { - const sticky = this.stickies[id]; - if (!sticky) return; - try { - this.workspaceStickies[workspaceSlug] = this.workspaceStickies[workspaceSlug].filter( - (stickyId) => stickyId !== id - ); - if (this.activeStickyId === id) this.activeStickyId = undefined; - delete this.stickies[id]; - this.recentStickyId = this.workspaceStickies[workspaceSlug][0]; - await this.stickyService.deleteSticky(workspaceSlug, id); - } catch (e) { - console.log(e); - this.stickies[id] = sticky; - } - }; -}