fix(designer-ui): Ensure "update connection" shows even if connection…

… (name) is missing (#4171) Fix "update connection" not showing for missing connections
Azure · Feb 13, 2024 · 22677d9 · 22677d9
1 parent ecfad50
commit 22677d9
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 19 deletions.
diff --git a/Localize/lang/strings.json b/Localize/lang/strings.json
@@ -882,6 +882,7 @@
   "Yuu5CD": "Zoom out",
   "Yuxprm": "Welcome to the workflow assistant!",
   "Yw7Nfl": "Disable Static Result",
+  "Yz9o1k": "Not connected.",
   "Z8tBFS": "The workflow assistant is designed only to provide help and doesn't support workflow creation or editing.",
   "Z9PWl/": "Retry Policy count is invalid (Must be from {min} to {max})",
   "ZAdaBl": "Select an existing connection reference or create a new one",
@@ -1782,6 +1783,7 @@
   "_Yuu5CD.comment": "Label to zoom the canvas out",
   "_Yuxprm.comment": "Chatbot greeting message from existing flow",
   "_Yw7Nfl.comment": "Label for toggle to disable static result",
+  "_Yz9o1k.comment": "Text to show that no connection is connected to the node",
   "_Z8tBFS.comment": "Chatbot disclaimer message that workflow assistant can only provide help and not modify workflows",
   "_Z9PWl/.comment": "error message for invalid retry count",
   "_ZAdaBl.comment": "Select an existing connection reference or create a new one.",

diff --git a/libs/designer/src/lib/ui/panel/nodeDetailsPanel/tabs/parametersTab/connectionDisplay.tsx b/libs/designer/src/lib/ui/panel/nodeDetailsPanel/tabs/parametersTab/connectionDisplay.tsx
@@ -9,7 +9,7 @@ import { useIntl } from 'react-intl';
 import { useDispatch } from 'react-redux';
 
 interface ConnectionDisplayProps {
-  connectionName: string;
+  connectionName: string | undefined;
   nodeId: string;
   readOnly: boolean;
   isLoading?: boolean;
@@ -38,7 +38,7 @@ export const ConnectionDisplay = (props: ConnectionDisplayProps) => {
     }
   }, [isOperationMissingConnection, openChangeConnectionCallback, requiresConnection]);
 
-  const connectionDisplayText = intl.formatMessage(
+  const connectionDisplayTextWithName = intl.formatMessage(
     {
       defaultMessage: 'Connected to {connectionName}.',
       description: 'Text to show which connection is connected to the node',
@@ -48,6 +48,11 @@ export const ConnectionDisplay = (props: ConnectionDisplayProps) => {
     }
   );
 
+  const connectionDisplayTextWithoutName = intl.formatMessage({
+    defaultMessage: 'Not connected.',
+    description: 'Text to show that no connection is connected to the node',
+  });
+
   const openChangeConnectionText = isXrmConnectionReferenceMode
     ? intl.formatMessage({
         defaultMessage: 'Change connection reference',
@@ -77,23 +82,21 @@ export const ConnectionDisplay = (props: ConnectionDisplayProps) => {
 
   return (
     <div className="connection-display">
-      {connectionName && (
-        <div className="connection-info">
-          <LinkMultiple16Regular />
-          <Label className="label">{connectionDisplayText}</Label>
-          {!readOnly ? (
-            <Button
-              id="change-connection-button"
-              size="small"
-              appearance="subtle"
-              onClick={openChangeConnectionCallback}
-              style={{ color: 'var(--colorBrandForeground1)' }}
-            >
-              {openChangeConnectionText}
-            </Button>
-          ) : null}
-        </div>
-      )}
+      <div className="connection-info">
+        <LinkMultiple16Regular />
+        <Label className="label">{connectionName ? connectionDisplayTextWithName : connectionDisplayTextWithoutName}</Label>
+        {!readOnly ? (
+          <Button
+            id="change-connection-button"
+            size="small"
+            appearance="subtle"
+            onClick={openChangeConnectionCallback}
+            style={{ color: 'var(--colorBrandForeground1)' }}
+          >
+            {openChangeConnectionText}
+          </Button>
+        ) : null}
+      </div>
       {props.hasError ? (
         <div className="connection-info-error">
           <Badge appearance="ghost" color="danger" icon={<ErrorCircle16Filled />}>

diff --git a/libs/services/intl/src/compiled-lang/strings.en-XA.json b/libs/services/intl/src/compiled-lang/strings.en-XA.json
@@ -13001,6 +13001,20 @@
       "value": "]"
     }
   ],
+  "Yz9o1k": [
+    {
+      "type": 0,
+      "value": "["
+    },
+    {
+      "type": 0,
+      "value": "Ƞǿǿŧ ƈǿǿƞƞḗḗƈŧḗḗḓ."
+    },
+    {
+      "type": 0,
+      "value": "]"
+    }
+  ],
   "Z8tBFS": [
     {
       "type": 0,

diff --git a/libs/services/intl/src/compiled-lang/strings.json b/libs/services/intl/src/compiled-lang/strings.json
@@ -5937,6 +5937,12 @@
       "value": "Disable Static Result"
     }
   ],
+  "Yz9o1k": [
+    {
+      "type": 0,
+      "value": "Not connected."
+    }
+  ],
   "Z8tBFS": [
     {
       "type": 0,