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,15 +361,15 @@ 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 &&
-            inputDescription ? (
                 <Textarea
                   autoFocus
                   onBlur={() => {
@@ -392,26 +392,30 @@ export default function GenericNode({
                       e.altKey === false
                     ) {
                       setInputDescription(false);
-                    if (nodeDescription.trim() !== "") {
                       setNodeDescription(nodeDescription);
                       data.node!.description = nodeDescription;
-                    } else {
-                      setNodeDescription(data.node!.description);
-                    }
                     }
                   }}
                 />
               ) : (
                 <div
-                className="generic-node-desc-text truncate-multiline word-break-break-word"
+                  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?.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,6 +37,7 @@ export const EditFlowSettings: React.FC<InputProps> = ({
             <span className="edit-flow-span">Character limit reached</span>
           )}
         </div>
+        {setName ? (
           <Input
             className="nopan nodelete nodrag noundo nocopy mt-2 font-normal"
             onChange={handleNameChange}
@@ -47,12 +48,19 @@ export const EditFlowSettings: React.FC<InputProps> = ({
             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
             name="description"
             id="description"
@@ -62,6 +70,11 @@ export const EditFlowSettings: React.FC<InputProps> = ({
             className="mt-2 max-h-[100px] font-normal"
             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,
       },