improving the NEW menu on the canvas

KaotoIO · Dec 5, 2023 · 2bd1750 · 2bd1750
1 parent 7731628
commit 2bd1750
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 4 deletions.
diff --git a/packages/ui/src/components/Visualization/ContextToolbar/FlowType/FlowTypeSelector.tsx b/packages/ui/src/components/Visualization/ContextToolbar/FlowType/FlowTypeSelector.tsx
@@ -47,6 +47,23 @@ export const FlowTypeSelector: FunctionComponent<ISourceTypeSelector> = (props)
     onSelect(undefined, currentSchemaType);
   }, [onSelect, currentSchemaType]);
 
+  /** Override function to provide more useful help texts than available via schema */
+  const getDescriptionForType = (type: string) => {
+    switch (type) {
+      case SourceSchemaType.Route:
+        return 'Defines an executable integration flow by declaring a source (starter) and followed by a sequence of actions (or steps). Actions can include data manipulations, EIPs (integration patterns) and internal or external calls.';
+      case SourceSchemaType.Kamelet:
+        return 'Defines a reusable Camel route as a building block. Kamelets can not be executed on their own, they are used as sources, actions or sinks in Camel Routes or Pipes.';
+      case SourceSchemaType.Pipe:
+      case SourceSchemaType.KameletBinding:
+        return 'Defines a sequence of concatenated Kamelets to form start to finish integration flows. Pipes are a more abstract level of defining integration flows, by chosing and configuring Kamelets.';
+      case SourceSchemaType.Integration:
+        return 'An integration defines a Camel route in a CRD file.';
+      default:
+        return undefined;
+    }
+  };
+
   const toggle = (toggleRef: Ref<MenuToggleElement>) => (
     <MenuToggle
       data-testid="dsl-list-dropdown"
@@ -94,6 +111,7 @@ export const FlowTypeSelector: FunctionComponent<ISourceTypeSelector> = (props)
         setIsOpen(isOpen);
       }}
       toggle={toggle}
+      style={{ width: '20rem' }}
     >
       <SelectList>
         {Object.entries({
@@ -111,8 +129,10 @@ export const FlowTypeSelector: FunctionComponent<ISourceTypeSelector> = (props)
               data-testid={`dsl-${sourceSchema.schema?.name}`}
               itemId={sourceType}
               description={
-                <span className="pf-v5-u-text-break-word">
-                  {(sourceSchema.schema?.schema as { description: string }).description ?? ''}
+                <span className="pf-v5-u-text-break-word" style={{ wordBreak: 'keep-all' }}>
+                  {getDescriptionForType(sourceType) !== undefined
+                    ? getDescriptionForType(sourceType)
+                    : (sourceSchema.schema?.schema as { description: string }).description ?? ''}
                 </span>
               }
               isDisabled={isOptionDisabled}

diff --git a/packages/ui/src/components/Visualization/ContextToolbar/FlowType/NewFlow.tsx b/packages/ui/src/components/Visualization/ContextToolbar/FlowType/NewFlow.tsx
@@ -45,7 +45,7 @@ export const NewFlow: FunctionComponent<PropsWithChildren> = () => {
     <>
       <FlowTypeSelector isStatic onSelect={checkBeforeAddNewFlow}>
         <PlusIcon />
-        <span className="pf-v5-u-m-sm">New route</span>
+        <span className="pf-v5-u-m-sm">New</span>
       </FlowTypeSelector>
       <Modal
         title="Warning"
@@ -81,7 +81,7 @@ export const NewFlow: FunctionComponent<PropsWithChildren> = () => {
         isOpen={isConfirmationModalOpen}
       >
         <p>
-          This will remove the existing routes and you will lose your current work. Are you sure you would like to
+          This will remove any existing integration and you will lose your current work. Are you sure you would like to
           proceed?
         </p>
       </Modal>