Fixed group description edit message and removed ability to change name on Share modal and fixed Saving on custom component

src/frontend/src/CustomNodes/GenericNode/index.tsx

@@ -16,7 +16,7 @@ import { validationStatusType } from "../../types/components";
 import { NodeDataType } from "../../types/flow";
 import { handleKeyDown, scapedJSONStringfy } from "../../utils/reactflowUtils";
 import { nodeColors, nodeIconsLucide } from "../../utils/styleUtils";
-import { classNames, getFieldTitle } from "../../utils/utils";
+import { classNames, cn, getFieldTitle } from "../../utils/utils";
 import ParameterComponent from "./components/parameterComponent";
 
 export default function GenericNode({
@@ -361,36 +361,18 @@ export default function GenericNode({
           <div
             className={
               showNode
-                ? "generic-node-desc overflow-hidden " +
+                ? "overflow-hidden " +
-                  (data.node?.description !== "" ? "py-5" : "pb-5")
+                  (data.node?.description === "" && !data.node?.flow
+                    ? "pb-5"
+                    : "py-5")
                 : ""
             }
           >
-            {data.node?.description !== "" &&
+            <div className="generic-node-desc">
-            showNode &&
+              {showNode && data.node?.flow && inputDescription ? (
-            data.node?.flow &&
+                <Textarea
-            inputDescription ? (
+                  autoFocus
-              <Textarea
+                  onBlur={() => {
-                autoFocus
-                onBlur={() => {
-                  setInputDescription(false);
-                  if (nodeDescription.trim() !== "") {
-                    setNodeDescription(nodeDescription);
-                    data.node!.description = nodeDescription;
-                  } else {
-                    setNodeDescription(data.node!.description);
-                  }
-                }}
-                value={nodeDescription}
-                onChange={(e) => setNodeDescription(e.target.value)}
-                onKeyDown={(e) => {
-                  handleKeyDown(e, nodeDescription, "");
-                  if (
-                    e.key === "Enter" &&
-                    e.shiftKey === false &&
-                    e.ctrlKey === false &&
-                    e.altKey === false
-                  ) {
                     setInputDescription(false);
                     if (nodeDescription.trim() !== "") {
                       setNodeDescription(nodeDescription);
@@ -398,20 +380,42 @@ export default function GenericNode({
                     } else {
                       setNodeDescription(data.node!.description);
                     }
-                  }
+                  }}
-                }}
+                  value={nodeDescription}
-              />
+                  onChange={(e) => setNodeDescription(e.target.value)}
-            ) : (
+                  onKeyDown={(e) => {
-              <div
+                    handleKeyDown(e, nodeDescription, "");
-                className="generic-node-desc-text truncate-multiline word-break-break-word"
+                    if (
-                onDoubleClick={() => {
+                      e.key === "Enter" &&
-                  setInputDescription(true);
+                      e.shiftKey === false &&
-                  takeSnapshot();
+                      e.ctrlKey === false &&
-                }}
+                      e.altKey === false
-              >
+                    ) {
-                {data.node?.description}
+                      setInputDescription(false);
-              </div>
+                      setNodeDescription(nodeDescription);
-            )}
+                      data.node!.description = nodeDescription;
+                    }
+                  }}
+                />
+              ) : (
+                <div
+                  className={cn(
+                    "generic-node-desc-text truncate-multiline word-break-break-word",
+                    data.node?.description === "" && data.node?.flow
+                      ? "font-light italic"
+                      : ""
+                  )}
+                  onDoubleClick={() => {
+                    setInputDescription(true);
+                    takeSnapshot();
+                  }}
+                >
+                  {data.node?.description === "" && data.node?.flow
+                    ? "Double Click to Edit Description"
+                    : data.node?.description}
+                </div>
+              )}
+            </div>
             <>
               {Object.keys(data.node!.template)
                 .filter((templateField) => templateField.charAt(0) !== "_")

src/frontend/src/components/EditFlowSettingsComponent/index.tsx

@@ -21,11 +21,11 @@ export const EditFlowSettings: React.FC<InputProps> = ({
     } else {
       setIsMaxLength(false);
     }
-    setName(value);
+    setName!(value);
   };
 
   const handleDescriptionChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
-    setDescription(event.target.value);
+    setDescription!(event.target.value);
   };
 
   return (
@@ -37,31 +37,44 @@ export const EditFlowSettings: React.FC<InputProps> = ({
             <span className="edit-flow-span">Character limit reached</span>
           )}
         </div>
-        <Input
+        {setName ? (
-          className="nopan nodelete nodrag noundo nocopy mt-2 font-normal"
+          <Input
-          onChange={handleNameChange}
+            className="nopan nodelete nodrag noundo nocopy mt-2 font-normal"
-          type="text"
+            onChange={handleNameChange}
-          name="name"
+            type="text"
-          value={name ?? ""}
+            name="name"
-          placeholder="Flow name"
+            value={name ?? ""}
-          id="name"
+            placeholder="Flow name"
-          maxLength={maxLength}
+            id="name"
-        />
+            maxLength={maxLength}
+          />
+        ) : (
+          <span className="font-normal text-muted-foreground word-break-break-word">
+            {name}
+          </span>
+        )}
       </Label>
       <Label>
         <div className="edit-flow-arrangement mt-3">
-          <span className="font-medium ">Description (optional)</span>
+          <span className="font-medium ">
+            Description {setDescription ? "(optional)" : ""}
+          </span>
         </div>
-
+        {setDescription ? (
-        <Textarea
+          <Textarea
-          name="description"
+            name="description"
-          id="description"
+            id="description"
-          onChange={handleDescriptionChange}
+            onChange={handleDescriptionChange}
-          value={description!}
+            value={description!}
-          placeholder="Flow description"
+            placeholder="Flow description"
-          className="mt-2 max-h-[100px] font-normal"
+            className="mt-2 max-h-[100px] font-normal"
-          rows={3}
+            rows={3}
-        />
+          />
+        ) : (
+          <span className="font-normal text-muted-foreground word-break-break-word">
+            {description}
+          </span>
+        )}
       </Label>
     </>
   );

src/frontend/src/modals/shareModal/index.tsx

@@ -120,11 +120,11 @@ export default function ShareModal({
           is_component: is_component,
         });
 
-    await saveFlow(flow!, true);
-
     function successShare() {
       if (is_component) {
-        addFlow(true, flow);
+        addFlow(true, flow, update);
+      } else {
+        saveFlow(flow!, true);
       }
       setSuccessData({
         title: `${nameComponent} shared successfully`,
@@ -223,13 +223,9 @@ export default function ShareModal({
           />
         </BaseModal.Header>
         <BaseModal.Content>
-          <EditFlowSettings
+          <div className="w-full rounded-lg border border-border p-4">
-            name={name}
+            <EditFlowSettings name={name} description={description} />
-            invalidNameList={unavaliableNames.map((element) => element.name)}
+          </div>
-            description={description}
-            setName={setName}
-            setDescription={setDescription}
-          />
           <div className="mt-3 flex h-8 w-full">
             <TagsSelector
               tags={tags}

src/frontend/src/style/applies.css

@@ -311,10 +311,10 @@
     @apply hover:text-accent-foreground hover:transition-all;
   }
   .generic-node-desc {
-    @apply h-full w-full text-foreground;
+    @apply h-full px-5 mb-4 w-full text-foreground;
   }
   .generic-node-desc-text {
-    @apply w-full px-5 mb-4 text-sm text-muted-foreground;
+    @apply w-full text-sm text-muted-foreground;
   }
 
   .alert-icon {

src/frontend/src/types/components/index.ts

@@ -224,8 +224,8 @@ export type InputProps = {
   name: string | null;
   description: string | null;
   maxLength?: number;
-  setName: (name: string) => void;
+  setName?: (name: string) => void;
-  setDescription: (description: string) => void;
+  setDescription?: (description: string) => void;
   invalidNameList?: string[];
 };
 

src/frontend/src/utils/reactflowUtils.ts

@@ -761,7 +761,7 @@ export function generateNodeFromFlow(
         display_name: "Group",
         documentation: "",
         base_classes: outputNode!.data.node!.base_classes,
-        description: "double click to edit description",
+        description: "",
         template: generateNodeTemplate(data),
         flow: data,
       },