feat(template): Updating quickview panel with latest UI (#4994)

* feat(template): Updating quickview panel with latest UI

* Fixing tests

---------

Co-authored-by: Priti Sambandam <psamband@microsoft.com>

Localize/lang/strings.json

@@ -92,6 +92,7 @@
   "1jhzOM": "Required. The object to check if it is less than value being compared to.",
   "1nODUD": "Hide functions",
   "1nvvw1": "Enter the value of the Authorization header",
+  "1nykVf": "Workflow preview",
   "1pjO9s": "Hide source schema",
   "1r9ljA": "Enter a valid URI.",
   "1uGBLP": "5",
@@ -131,6 +132,7 @@
   "3BZnxY": "Add dynamic content",
   "3ERi+E": "Terms of Service",
   "3GINhd": "Triggers",
+  "3HrFPS": "Not Connected",
   "3KPLpx": "Remove all mappings within source element `{nodeName}` first.",
   "3MTSYZ": "(UTC-03:00) Salvador",
   "3NhwIJ": "Required. The separator.",
@@ -382,6 +384,7 @@
   "DWsh56": "Enter client ID",
   "DYXoEM": "(UTC+02:00) Chisinau",
   "DZZ3fj": "Duration",
+  "DcJBUx": "Trigger type",
   "DfXxoX": "Select an existing connection or create a new one",
   "Dhu3IS": "Show mini-map",
   "DjbVKU": "OAuth",
@@ -398,6 +401,7 @@
   "E8iqLl": "(UTC+11:00) Sakhalin",
   "ECZC6Y": "Converts the parameter to a decimal number",
   "EJj4E0": "Overview Tab",
+  "EJnXVY": "Workflow preview tab",
   "ERAWZA": "Response",
   "ERVorY": "Make Group",
   "ESZXfC": "At these minutes",
@@ -515,13 +519,15 @@
   "JKZpcd": "Copilot chat canceled",
   "JNQHws": "Required. A string that contains the time.",
   "JSfWJ0": "Required. The value that is converted to a boolean.",
+  "JVNRly": "Solution type",
   "JWl/LD": "Add new item",
   "Jaz3EC": "Converts a string timestamp passed in from a source time zone to a target time zone",
   "JbgTET": "Method",
   "JgugQX": "Enter a valid Array.",
   "Ji6663": "Returns true if a dictionary contains a key, if an array contains a value, or if a string contains a substring",
   "Jil/Wa": "Invalid settings",
   "JjTfC7": "Required. The number to be formatted.",
+  "Jk2B0i": "Prerequisites",
   "JnlcZQ": "Name:",
   "Jq2Y/o": "Required. The numeric format string.",
   "JzRzVp": "(UTC-09:00) Alaska",
@@ -731,7 +737,6 @@
   "SToblZ": "Configure parameters for this node",
   "SXb47U": "{minutes}m",
   "SY04wn": "Required. The name of the action with a form-data or form-encoded response.",
-  "SgScU5": "Workflow Tab",
   "SgiTAh": "Please enter your input",
   "Sh10cw": "Save",
   "SmCQys": "Custom Tracking Id",
@@ -760,6 +765,7 @@
   "TlX98E": "(UTC+02:00) Kaliningrad",
   "Tla33B": "Required. The value for which to find the index.",
   "Tmr/9e": "Invalid parameters",
+  "TnwRGo": "Connections included in this template",
   "To3RNy": "Workflow parameter errors",
   "Ts5Pzr": "Note",
   "TsJbGH": "Disconnected",
@@ -844,6 +850,7 @@
   "WnU9v0": "A managed identity is not configured on the logic app.",
   "WvvJYw": "Actions",
   "X/7je+": "Minute",
+  "X02GGK": "Tags",
   "X2idLs": "(UTC-03:00) Montevideo",
   "X2xiq1": "State Type",
   "X4SuNU": "Retry Policy Minimum Interval is invalid, must match ISO 8601 duration format",
@@ -1029,6 +1036,7 @@
   "_1jhzOM.comment": "Required object parameter to compare to in greater function",
   "_1nODUD.comment": "Label to close Functions list",
   "_1nvvw1.comment": "Raw Value Placeholder Text",
+  "_1nykVf.comment": "The tab label for the monitoring parameters tab on the operation panel",
   "_1pjO9s.comment": "Label to close source schema toolbox",
   "_1r9ljA.comment": "Error validation message for URIs",
   "_1uGBLP.comment": "Hour of the day",
@@ -1068,6 +1076,7 @@
   "_3BZnxY.comment": "Label for button to open token picker",
   "_3ERi+E.comment": "Title for terms of service iframe.",
   "_3GINhd.comment": "Heading for a tooltip explaining Triggers",
+  "_3HrFPS.comment": "Not Connected text",
   "_3KPLpx.comment": "Message informing that mapping to child elements need to be deleted prior to selected one.",
   "_3MTSYZ.comment": "Time zone value ",
   "_3NhwIJ.comment": "Required delimeter parameter to apply split function with",
@@ -1319,6 +1328,7 @@
   "_DWsh56.comment": "Client ID Placeholder Text",
   "_DYXoEM.comment": "Time zone value ",
   "_DZZ3fj.comment": "Column header text for duration",
+  "_DcJBUx.comment": "Type of the trigger in the template",
   "_DfXxoX.comment": "Select an existing connection or create a new one.",
   "_Dhu3IS.comment": "Label to show the mini-map",
   "_DjbVKU.comment": "Dropdown text for OAuth connection",
@@ -1335,6 +1345,7 @@
   "_E8iqLl.comment": "Time zone value ",
   "_ECZC6Y.comment": "Label for description of custom decimal Function",
   "_EJj4E0.comment": "An accessability label that describes the oveview tab",
+  "_EJnXVY.comment": "An accessability label that describes the oveview tab",
   "_ERAWZA.comment": "Header text for response",
   "_ERVorY.comment": "Make group button",
   "_ESZXfC.comment": "Label for schedule minutes",
@@ -1452,13 +1463,15 @@
   "_JKZpcd.comment": "Chatbot card telling user that the AI response is being canceled",
   "_JNQHws.comment": "Required string parameter that contains the time",
   "_JSfWJ0.comment": "Required parameter to be converted using bool function",
+  "_JVNRly.comment": "Solution type of the template",
   "_JWl/LD.comment": "Label to add item to array editor",
   "_Jaz3EC.comment": "Label for description of custom convertTimeZone Function",
   "_JbgTET.comment": "Label text for request method",
   "_JgugQX.comment": "Error validation message",
   "_Ji6663.comment": "Label for description of custom contains Function",
   "_Jil/Wa.comment": "Text to explain that there are invalid settings for this node",
   "_JjTfC7.comment": "Required value parameter to apply formatNumber function on",
+  "_Jk2B0i.comment": "Title for the prerequisites section in the template overview tab",
   "_JnlcZQ.comment": "Label text for workflow name",
   "_Jq2Y/o.comment": "Required format parameter to apply formatNumber function with",
   "_JzRzVp.comment": "Time zone value ",
@@ -1668,7 +1681,6 @@
   "_SToblZ.comment": "Parameters tab description",
   "_SXb47U.comment": "This is a period in time in seconds. {minutes} is replaced by the number and m is an abbreviation of minutes",
   "_SY04wn.comment": "Required string parameter to identify action name for formDataMultiValues function",
-  "_SgScU5.comment": "An accessability label that describes the oveview tab",
   "_SgiTAh.comment": "Placeholder description for a newly inserted Text parameter",
   "_Sh10cw.comment": "Button text for save the changes",
   "_SmCQys.comment": "title for client tracking id setting",
@@ -1697,6 +1709,7 @@
   "_TlX98E.comment": "Time zone value ",
   "_Tla33B.comment": "Required. The text parameter for which to find the index with the 'indexOf' function.",
   "_Tmr/9e.comment": "Text to explain that there are invalid parameters for this node",
+  "_TnwRGo.comment": "Title for the connections section in the template overview tab",
   "_To3RNy.comment": "Header for the workflow parameter errors category",
   "_Ts5Pzr.comment": "Note text",
   "_TsJbGH.comment": "Text to show when a connection is disconnected",
@@ -1781,6 +1794,7 @@
   "_WnU9v0.comment": "Error message when no identity is associated",
   "_WvvJYw.comment": "Header for the connected actions section",
   "_X/7je+.comment": "Frequency value ",
+  "_X02GGK.comment": "Title for the tags section in the template overview tab",
   "_X2idLs.comment": "Time zone value ",
   "_X2xiq1.comment": "Label for choosing State type",
   "_X4SuNU.comment": "error message for invalid minimum retry interval",
@@ -2136,7 +2150,6 @@
   "_l72gf4.comment": "Dropdown text for legacy managed identity connection",
   "_lA/sHA.comment": "Accessibility label for a button to copy all text in a value box",
   "_lB56l2.comment": "Error validation message for Numbers",
-  "_lFWXhc.comment": "The tab label for the monitoring parameters tab on the operation panel",
   "_lM9qrG.comment": "Time zone value ",
   "_lPTdSf.comment": "Button text for run trigger",
   "_lQNKUB.comment": "Describes connection being added",
@@ -2183,6 +2196,7 @@
   "_mwEHSX.comment": "Label for function node",
   "_mx2IMJ.comment": "Hour of the day",
   "_n+F7e2.comment": "Hour of the day",
+  "_n+sJ5W.comment": "Name of the organization that published this template",
   "_n20T2h.comment": "Hour of the day",
   "_n35O/+.comment": "Required string parameter to be converted using float function",
   "_n42uAO.comment": "Time zone value ",
@@ -2225,6 +2239,7 @@
   "_oLtwMw.comment": "title for content transfer setting",
   "_oMphsh.comment": "The tab label for the settings tab on the operation panel",
   "_oO12r6.comment": "Time zone value ",
+  "_oOGTSo.comment": "Connected text",
   "_oQjIWf.comment": "The title of the errors field in the static result parseJson action",
   "_oR2x4N.comment": "Error message for invalid integer value",
   "_oRxmXb.comment": "Copy Trigger text",
@@ -2233,6 +2248,7 @@
   "_oVVPst.comment": "Discard warning message",
   "_oWGaw9.comment": "Click to view less token options.",
   "_oZMhX/.comment": "Text of Tooltip to expand",
+  "_ocW+RF.comment": "Title for the details section in the template overview tab",
   "_odQ554.comment": "Response body for test map API",
   "_onXUu0.comment": "Text to tell users to click to add comments",
   "_osKNnl.comment": "Error validation message for doubles",
@@ -2791,7 +2807,6 @@
   "l72gf4": "Managed Identity",
   "lA/sHA": "Copy the value of ''{label}'' to the clipboard",
   "lB56l2": "Enter a valid number.",
-  "lFWXhc": "Workflow",
   "lM9qrG": "(UTC+13:00) Nuku'alofa",
   "lPTdSf": "Run trigger",
   "lQNKUB": "A line for the parent element is added automatically.",
@@ -2838,6 +2853,7 @@
   "mwEHSX": "Function",
   "mx2IMJ": "13",
   "n+F7e2": "15",
+  "n+sJ5W": "Published by",
   "n20T2h": "7",
   "n35O/+": "Required. The value that is converted to a floating-point number.",
   "n42uAO": "(UTC-04:00) Santiago",
@@ -2880,6 +2896,7 @@
   "oLtwMw": "Content Transfer",
   "oMphsh": "Settings",
   "oO12r6": "(UTC-08:00) Baja California",
+  "oOGTSo": "Connected",
   "oQjIWf": "Errors",
   "oR2x4N": "Invalid integer value",
   "oRxmXb": "Copy Trigger",
@@ -2888,6 +2905,7 @@
   "oVVPst": "Do you want to discard all unsaved changes?",
   "oWGaw9": "See Less",
   "oZMhX/": "Expand",
+  "ocW+RF": "Details",
   "odQ554": "Response body",
   "onXUu0": "Add a note",
   "osKNnl": "Enter a valid Double number.",

libs/designer-ui/src/lib/styles.less

@@ -40,10 +40,7 @@
 @import "./floatingactionmenu/_floatingactionmenu.less";
 @import "./monitoring/monitoring.less";
 @import "./monitoring/statuspill/statuspill.less";
-@import "./templates/templatesPanelContent.less";
-@import "./templates/templatesPanelFooter.less";
-@import "./templates/templatesPanelHeader.less";
-@import "./templates/templatesParametersField.less";
+@import "./templates/templates.less";
 @import "./tip/tip.less";
 @import "./arrayeditor/arrayeditor.less";
 @import "./ariaSearchResults/ariaSearchResultsAlert.less";

libs/designer-ui/src/lib/templates/index.ts

@@ -1,4 +1,4 @@
-export * from './templatePanelUtil';
+export * from './model';
 export * from './templatesPanelContent';
 export * from './templatesParametersField';
 export * from './templatesPanelFooter';

libs/designer-ui/src/lib/templates/templatesPanelContent.less → libs/designer-ui/src/lib/templates/templates.less

@@ -1,7 +1,32 @@
+.msla-templates-panel-header {
+    padding: 16px 20px 16px 0;
+    width: 100%;
+
+    .msla-templates-panel-header-title {
+        font-size: 24px;
+        font-weight: 600;
+        line-height: 32px;
+    }
+
+    .msla-templates-panel-header-description-wrapper {
+        padding-top: 8px;
+    }
+
+    .msla-templates-panel-header-description {
+        font-size: 12px;
+        color: #605E5C;
+    }
+}
+
 .msla-templates-panel {
+
+    .msla-templates-panel-tabs {
+        margin: '0px -12px';
+    }
+
     .msla-templates-panel-tabName {
-        margin: 0px 8px 8px 8px;
-        height: 36px;
+        padding: 0 5px 10px 0;
+        margin: 0 20px 0 0;
 
         .msla-templates-panel-tabName-index {
             display: inline-flex;
@@ -46,4 +71,42 @@
             }
         }
     }
-}
+}
+
+.msla-templates-panel-footer {
+    padding: 0 20px 10px 0;
+}
+
+.msla-templates-parameters {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+
+    .msla-templates-parameter-heading {
+      margin-bottom: 8px;
+    }
+
+    .msla-templates-parameter-heading-text {
+      font-weight: 600;
+      font-size: 14px;
+    }
+
+    .msla-templates-parameter-description {
+      margin-bottom: 16px;
+    }
+
+    .msla-templates-parameter-description-text {
+      font-size: 13px;
+      color: @ms-color-secondary;
+    }
+
+    .ms-List-cell {
+      padding-bottom: 16px;
+    }
+
+    .msla-templates-parameter-field {
+      display: flex;
+      min-height: 24px;
+    }
+}
+

libs/designer-ui/src/lib/templates/templatesPanelContent.tsx

@@ -1,9 +1,10 @@
 import { Icon, css } from '@fluentui/react';
 import { TabList, Tab, Text } from '@fluentui/react-components';
 import type { SelectTabData, SelectTabEvent } from '@fluentui/react-components';
-import type { TemplatePanelTab } from './templatePanelUtil';
+import type { TemplatePanelTab } from './model';
 
 export interface TemplatesPanelContentProps {
+  className?: string;
   isSequence: boolean;
   tabs: TemplatePanelTab[];
   selectedTab?: string;
@@ -14,6 +15,7 @@ export const TemplatesPanelContent = ({
   tabs = [],
   selectedTab,
   selectTab,
+  className,
 }: TemplatesPanelContentProps): JSX.Element => {
   const selectedTabId = selectedTab ?? tabs[0]?.id;
 
@@ -27,9 +29,10 @@ export const TemplatesPanelContent = ({
     }
   };
 
+  const tabClass = className ?? 'msla-template-panel-tabs';
   return (
     <div className="msla-templates-panel">
-      <TabList selectedValue={selectedTabId} onTabSelect={onTabSelected} style={{ margin: '0px -12px' }}>
+      <TabList selectedValue={selectedTabId} onTabSelect={onTabSelected} className={tabClass}>
         {tabs.map(({ id, title, order }, index) => (
           <Tab
             key={id}

libs/designer-ui/src/lib/utils/utils.ts

@@ -371,6 +371,12 @@ export const filterRecord = <T>(data: Record<string, T>, filter: (_key: string,
 };
 
 export const getConnectorCategoryString = (connector: Connector | OperationApi | string): string => {
+  const allStrings = getConnectorAllCategories();
+
+  return isBuiltInConnector(connector) ? allStrings['inapp'] : isCustomConnector(connector) ? allStrings['custom'] : allStrings['shared'];
+};
+
+export const getConnectorAllCategories = (): Record<string, string> => {
   const intl = getIntl();
   const builtInText = intl.formatMessage({
     defaultMessage: 'In App',
@@ -388,7 +394,7 @@ export const getConnectorCategoryString = (connector: Connector | OperationApi |
     description: 'Custom category name text',
   });
 
-  return isBuiltInConnector(connector) ? builtInText : isCustomConnector(connector) ? customText : azureText;
+  return { inapp: builtInText, shared: azureText, custom: customText };
 };
 
 export const getPreviewTag = (status: string | undefined): string | undefined => {