fix: Redesign sidebar description (#846)

equinor · Dec 10, 2024 · c499138 · c499138
1 parent 9a39225
commit c499138
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 44 deletions.
diff --git a/components/MarkdownEditor.tsx b/components/MarkdownEditor.tsx
@@ -17,7 +17,7 @@ Icon.add({ link });
 export default function MarkdownEditor(props: {
   canEdit?: boolean;
   defaultText: string;
-  label: string;
+  label?: string;
   onChange?: (value?: string) => void;
   helperText?: string;
   requireText?: boolean;
@@ -137,7 +137,7 @@ export default function MarkdownEditor(props: {
             previewOptions={{
               rehypePlugins: [[rehypeSanitize]],
               style: {
-                backgroundColor: canEdit ? "rgba(247,247,247,1" : "white",
+                backgroundColor: "rgba(247,247,247,1",
                 color: "rgba(61,61,61,1)",
                 cursor: canEdit ? "text" : "not-allowed",
                 fontSize: "1rem",

diff --git a/components/canvas/Flow.tsx b/components/canvas/Flow.tsx
@@ -70,7 +70,7 @@ const Flow = ({ apiNodes, apiEdges, userCanEdit }: CanvasProps) => {
   const ref = useRef<HTMLDivElement>(null);
   const { menuData, onNodeContextMenu, onPaneContextMenu, closeContextMenu } =
     useContextMenu(ref);
-  const anyNodeIsSelected = selectedNode !== undefined;
+  const anyNodeIsSelected = selectedNode !== undefined || !!selectedNodeForPQIR;
 
   const { copyToClipboard, paste } = useCopyPaste(
     hoveredNode,

diff --git a/components/canvas/Sidebar/NewPQIR.tsx b/components/canvas/Sidebar/NewPQIR.tsx
@@ -1,13 +1,16 @@
 import { NodeDataCommon } from "@/types/NodeData";
-import { uid } from "@/utils/uuid";
 import { Button, Checkbox, Icon } from "@equinor/eds-core-react";
 import { add } from "@equinor/eds-icons";
+import dynamic from "next/dynamic";
 import styles from "./PQIRListElement.module.scss";
-import { PQIRListElementTextField } from "./PQIRListElementTextField";
 import { PQIRTypeSelection } from "./PQIRTypeSelection";
 import { usePQIR } from "./usePQIR";
 import { usePQIRMutations } from "./usePQIRMutations";
 
+const MarkdownEditor = dynamic(() => import("components/MarkdownEditor"), {
+  ssr: false,
+});
+
 type NewPQIRProps = {
   selectedNode: NodeDataCommon;
 };
@@ -87,11 +90,11 @@ export const NewPQIR = ({ selectedNode }: NewPQIRProps) => {
     <div className={styles.panel}>
       <div className={styles.panelContent}>
         {panelSectionTop()}
-        <PQIRListElementTextField
-          id={uid()}
-          value={description}
-          onEdit={(e) => setDescription(e)}
-          userCanEdit
+        <MarkdownEditor
+          defaultText={description}
+          onChange={(value) => value && setDescription(value)}
+          canEdit
+          requireText
         />
         {panelSectionBottom(selectedNode.id)}
       </div>

diff --git a/components/canvas/Sidebar/PQIRListElement.tsx b/components/canvas/Sidebar/PQIRListElement.tsx
@@ -9,13 +9,17 @@ import {
   Typography,
 } from "@equinor/eds-core-react";
 import { add, delete_to_trash, minimize } from "@equinor/eds-icons";
+import dynamic from "next/dynamic";
 import { TextCircle } from "../entities/TextCircle";
 import styles from "./PQIRListElement.module.scss";
-import { PQIRListElementTextField } from "./PQIRListElementTextField";
 import { PQIRTypeSelection } from "./PQIRTypeSelection";
 import { usePQIR } from "./usePQIR";
 import { usePQIRMutations } from "./usePQIRMutations";
 
+const MarkdownEditor = dynamic(() => import("components/MarkdownEditor"), {
+  ssr: false,
+});
+
 type PQIRListElement = {
   pqir: Task;
   isSelectedSection?: boolean;
@@ -122,11 +126,11 @@ export const PQIRListELement = ({
       <Accordion.Panel className={styles.panel}>
         <div className={styles.panelContent}>
           {userCanEdit && panelSectionTop}
-          <PQIRListElementTextField
-            id={pqir.id}
-            value={description}
-            userCanEdit={userCanEdit}
-            onEdit={(e) => setDescription(e)}
+          <MarkdownEditor
+            defaultText={description}
+            onChange={(value) => value && setDescription(value)}
+            canEdit={userCanEdit}
+            requireText
           />
           {userCanEdit && panelSectionBottom}
         </div>

diff --git a/components/canvas/Sidebar/PQIRListElementTextField.tsx b/components/canvas/Sidebar/PQIRListElementTextField.tsx