Skip to content

Commit

Permalink
feat(Templates): Styling for Header, Tabs, Footer (#4992)
Browse files Browse the repository at this point in the history
* moved tab styling to designer-ui

* added styling and disabled, selected into tab title area

* enforced templatePanelTab props with type

* added footer

* moved panelTabs to upper level for panel footer

* fully enabled footer for quickview panel

* moved quickviewPanel header to use TemplatesPanelContent

* added template panel header

* changed reviewCreate tab to intl and create button

* defined a global handle dismiss panel

* brings to the valid next tab for sequence

* added next button blocked for parameters and name state tab on missing info

* fixed tests

* fixed minor nits, addressing rest in next pr due to current pr size
  • Loading branch information
Elaina-Lee committed Jun 18, 2024
1 parent 691fdbb commit 8a64f12
Show file tree
Hide file tree
Showing 27 changed files with 565 additions and 277 deletions.
22 changes: 12 additions & 10 deletions Localize/lang/strings.json
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@
"+xXHdp": "No outputs",
"/2V8bQ": "Timed out",
"/EU/oJ": "Required. A string that contains the time zone name of the source time zone. See 'Default Time Zones' at 'https://go.microsoft.com/fwlink/?linkid=2238292'.",
"/G8rbe": "Create New Workflow",
"/I/U8L": "Body",
"/KRvvg": "No values match your search.",
"/NtebP": "(UTC+05:00) Islamabad, Karachi",
Expand All @@ -36,6 +35,7 @@
"/mjH84": "Show raw outputs",
"/n13VL": "Properties",
"/qchXQ": "Required. The collection to join items from.",
"/qrBuJ": "Create",
"/qu3zt": "0",
"/ut0u7": "Returns the first Count elements from the array or string passed in",
"/vWMKW": "Missing required inputs",
Expand All @@ -61,6 +61,7 @@
"0KMjv6": "Tracking",
"0R2D5l": "Returns a binary representation of a URI encoded string",
"0SSwxD": "Close panel",
"0UfxUM": "Next",
"0Vzp0l": "Collapse",
"0i/6TR": "Required. The string to convert to upper casing. If a character in the string does not have an uppercase equivalent, the character is included unchanged in the returned string.",
"0m2Y1/": "Value",
Expand Down Expand Up @@ -368,7 +369,6 @@
"D/xTXV": "Show source schema",
"D1lgsT": "Required. The string from which to remove leading and trailing whitespace.",
"D5FIKL": "Paste from sample",
"D6Gabc": "Configure Connections",
"D6KzoS": "Specify upload chunk size between {minimumSize} and {maximumSize} Mb. Example: 10",
"DDIIAQ": "Node",
"DEKsll": "Retry Policy Interval is invalid, must match ISO 8601 duration format",
Expand Down Expand Up @@ -427,6 +427,7 @@
"FMA0Q0": "Your flow has been updated.",
"FN5zHQ": "Returns a section of a string defined by the start index and the end index",
"FT3jt6": "Webhook reference information",
"FTrMxN": "Close",
"FUhNu4": "Split On",
"FUuFlC": "Default",
"FXLR5M": "{hours, plural, one {# hour} other {# hours}}",
Expand Down Expand Up @@ -872,13 +873,15 @@
"Xkt2vD": "Select a function app function",
"Xnn0uj": "Request",
"XqamWZ": "Delete",
"Xs7Uvt": "By Microsoft",
"XsktQ/": "Limit Logic Apps to not include workflow metadata headers in the response.",
"XtuP5e": "Math functions",
"Xv5CGN": "(UTC-05:00) Indiana (East)",
"Xx/naD": "Required. The name of the action whose body outputs you want.",
"Y/bcmG": "Password",
"Y0H9aX": "More Info",
"Y5XAbg": "Select a Swagger Function App resource",
"Y9VTmA": "Create a new workflow",
"Y9kBz5": "Returns a binary representation of a data URI",
"YABOLz": "Body Item",
"YCDF7A": "All required parameters are set",
Expand Down Expand Up @@ -953,7 +956,6 @@
"_+xXHdp.comment": "No outputs text",
"_/2V8bQ.comment": "Timed out run",
"_/EU/oJ.comment": "Required string parameter for source time zone",
"_/G8rbe.comment": "Create new workflow description",
"_/I/U8L.comment": "Label text for request or response body",
"_/KRvvg.comment": "Label for when no values match search value.",
"_/NtebP.comment": "Time zone value ",
Expand All @@ -969,6 +971,7 @@
"_/mjH84.comment": "Show outputs text",
"_/n13VL.comment": "Properties text",
"_/qchXQ.comment": "Required collection parameter to apply join function on",
"_/qrBuJ.comment": "Button text for creating the workflow",
"_/qu3zt.comment": "Hour of the day",
"_/ut0u7.comment": "Label for description of custom take Function",
"_/vWMKW.comment": "Title for a function missing a required input card",
Expand All @@ -994,6 +997,7 @@
"_0KMjv6.comment": "title for tracking component",
"_0R2D5l.comment": "Label for description of custom uriComponentToBinary Function",
"_0SSwxD.comment": "Label on button that closes floating panel",
"_0UfxUM.comment": "Button text for moving to the next tab in the create workflow panel",
"_0Vzp0l.comment": "Collapse, making the node smaller, hiding the contents",
"_0i/6TR.comment": "Required text parameter to upper case",
"_0m2Y1/.comment": "The title of the value field in the static result parseJson action",
Expand Down Expand Up @@ -1301,7 +1305,6 @@
"_D/xTXV.comment": "Label to open source schema toolbox",
"_D1lgsT.comment": "Required text parameter to apply trim function with",
"_D5FIKL.comment": "Paste from sample",
"_D6Gabc.comment": "Configure Connections description",
"_D6KzoS.comment": "tooltip for upload chunk size setting",
"_DDIIAQ.comment": "Title for other node",
"_DEKsll.comment": "error message for invalid retry interval",
Expand Down Expand Up @@ -1360,6 +1363,7 @@
"_FMA0Q0.comment": "Chatbot report a bug button",
"_FN5zHQ.comment": "Label for description of custom slice Function",
"_FT3jt6.comment": "httpwebhook callback url section title",
"_FTrMxN.comment": "Button text for closing the panel",
"_FUhNu4.comment": "title for split on setting",
"_FUuFlC.comment": "Default, the backup option if none other apply",
"_FXLR5M.comment": "A duration of time shown in hours",
Expand Down Expand Up @@ -1805,13 +1809,15 @@
"_Xkt2vD.comment": "Label for function app selection",
"_Xnn0uj.comment": "Header text for request",
"_XqamWZ.comment": "Label of Delete Token Button",
"_Xs7Uvt.comment": "Panel description for stating it was created by Microsoft",
"_XsktQ/.comment": "description of workflow headers on response setting",
"_XtuP5e.comment": "Label for math functions",
"_Xv5CGN.comment": "Time zone value ",
"_Xx/naD.comment": "Required string parameter to determine action's body output wanted",
"_Y/bcmG.comment": "Client Certificate Password Label Display Name",
"_Y0H9aX.comment": "This is shown as an aria label on button as well as the tooltip that is shown after clicking the button",
"_Y5XAbg.comment": "Select a Swagger Function App resource",
"_Y9VTmA.comment": "Panel header title for creating the workflow",
"_Y9kBz5.comment": "Label for description of custom dataUriToBinary Function",
"_YABOLz.comment": "The title of the child item field in the static result query action",
"_YCDF7A.comment": "Chatbot message letting user know that required parameters are set.",
Expand Down Expand Up @@ -2148,7 +2154,6 @@
"_lwlg2K.comment": "Command for underline text for non-mac users",
"_lztiwS.comment": "Parameter Field Actual Value Title",
"_m/jJ/5.comment": "Map checker",
"_m1BGgQ.comment": "Button text to open quick view panel to display more information",
"_m7Y6Qf.comment": "Title for a tab panel",
"_m8Q61y.comment": "Parameter Field Name Title",
"_m8z4Yr.comment": "placeholder for pagination setting",
Expand All @@ -2171,7 +2176,6 @@
"_mej02C.comment": "Time zone value ",
"_mjS/k1.comment": "description of suppress woers setting",
"_mlU+AC.comment": "Header for the connections panel",
"_mmph/s.comment": "Button text for Creating new workflow from the template",
"_mvrlkP.comment": "OAuth Password Placeholder Text",
"_mvu5xN.comment": "Accessibility Label for the dictionary text value field",
"_mwEHSX.comment": "Label for function node",
Expand Down Expand Up @@ -2362,7 +2366,6 @@
"_toWTrl.comment": "Search from file list",
"_tooc6v.comment": "label for switching time format to local time",
"_tqqUHX.comment": "Time zone value ",
"_tsPPWB.comment": "Button text to create workflow from this template",
"_tsmuoF.comment": "Column header for connection display name",
"_tu4TTM.comment": "Label in the chatbot header stating the chatbot feature is a preview",
"_u81zB9.comment": "Time zone value ",
Expand Down Expand Up @@ -2432,6 +2435,7 @@
"_wF7C+h.comment": "Button to cancel a connection",
"_wFCkpM.comment": "Require parameters to find minimum using min function",
"_wGYmui.comment": "Header for including dynamic content section",
"_wGkH/j.comment": "Button text to create workflow from this template",
"_wP0/uB.comment": "Label for the button on the progress card that stops AI response generation",
"_wPlTDB.comment": "Full path of current node",
"_wQcEXt.comment": "Required parameters for the custom Replace Function",
Expand Down Expand Up @@ -2805,7 +2809,6 @@
"lwlg2K": "Underline (Ctrl+U)",
"lztiwS": "Actual Value",
"m/jJ/5": "Map checker",
"m1BGgQ": "Quick View",
"m7Y6Qf": "Testing",
"m8Q61y": "Name",
"m8z4Yr": "Threshold of items to return",
Expand All @@ -2828,7 +2831,6 @@
"mej02C": "(UTC+08:30) Pyongyang",
"mjS/k1": "Limit Logic Apps to not include workflow metadata headers in the outgoing request.",
"mlU+AC": "Connections",
"mmph/s": "Create",
"mvrlkP": "Enter password as plain text or use a secure parameter",
"mvu5xN": "{name} Value",
"mwEHSX": "Function",
Expand Down Expand Up @@ -3019,7 +3021,6 @@
"toWTrl": "Search",
"tooc6v": "Switch ''{label}'' to the local time",
"tqqUHX": "(UTC+12:45) Chatham Islands",
"tsPPWB": "Create Workflow",
"tsmuoF": "Display Name",
"tu4TTM": "Preview",
"u81zB9": "(UTC-09:00) Coordinated Universal Time-09",
Expand Down Expand Up @@ -3089,6 +3090,7 @@
"wF7C+h": "Cancel",
"wFCkpM": "Required. Either an array of values to find the minimum value, or the first value of a set.",
"wGYmui": "Including dynamic content",
"wGkH/j": "Create a workflow with this template",
"wP0/uB": "Stop generating",
"wPlTDB": "Full path",
"wQcEXt": "Required. The string that is searched for parameter 2 and updated with parameter 3, when parameter 2 is found in parameter 1.",
Expand Down
2 changes: 1 addition & 1 deletion libs/designer-ui/src/lib/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ export * from './settings/settingsection';
export * from './staticResult';
export * from './table';
export * from './telemetry/models';
export * from './templates/templatesParametersField';
export * from './templates';
// export * from './textbox';
export * from './text';
export * from './tip';
Expand Down
3 changes: 3 additions & 0 deletions libs/designer-ui/src/lib/styles.less
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,9 @@
@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 "./tip/tip.less";
@import "./arrayeditor/arrayeditor.less";
Expand Down
5 changes: 5 additions & 0 deletions libs/designer-ui/src/lib/templates/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
export * from './templatePanelUtil';
export * from './templatesPanelContent';
export * from './templatesParametersField';
export * from './templatesPanelFooter';
export * from './templatesPanelHeader';
17 changes: 17 additions & 0 deletions libs/designer-ui/src/lib/templates/templatePanelUtil.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import type { IntlShape } from 'react-intl';
import type { ReactNode } from 'react';

export type TemplatePanelTabFn = (intl: IntlShape) => TemplatePanelTab;
export interface TemplatePanelTab {
id: string;
title: string;
description?: string;
visible?: boolean;
order: number;
content: React.ReactElement;
footerContent: {
primaryButtonText: string | ReactNode;
primaryButtonOnClick: () => void | Promise<void>;
primaryButtonDisabled?: boolean;
};
}
49 changes: 49 additions & 0 deletions libs/designer-ui/src/lib/templates/templatesPanelContent.less
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
.msla-templates-panel {
.msla-templates-panel-tabName {
margin: 0px 8px 8px 8px;
height: 36px;

.msla-templates-panel-tabName-index {
display: inline-flex;
width: 16px;
height: 16px;
justify-content: center;
align-items: center;
border-radius: 100%;
border: 1px solid #57A300;
background-color: #57A300;
font-size: 10px;
font-weight: 600;
color: white;
margin-right: 8px;
}

.msla-templates-panel-tabName-title {
display: flex-inline;
align-items: center;
}

&.selected {
box-shadow: 0px -2px 0px 0px #0078D4 inset;

.msla-templates-panel-tabName-index {
border-color: #0078D4;
background-color: #0078D4;
}

.msla-templates-panel-tabName-title {
font-weight: 600;
}
}

&:disabled {
box-shadow: none;

.msla-templates-panel-tabName-index {
background-color: transparent;
border-color: #949494;
color: #949494;
}
}
}
}
55 changes: 55 additions & 0 deletions libs/designer-ui/src/lib/templates/templatesPanelContent.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
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';

export interface TemplatesPanelContentProps {
isSequence: boolean;
tabs: TemplatePanelTab[];
selectedTab?: string;
selectTab: (tabId: string) => void;
}
export const TemplatesPanelContent = ({
isSequence = true,
tabs = [],
selectedTab,
selectTab,
}: TemplatesPanelContentProps): JSX.Element => {
const selectedTabId = selectedTab ?? tabs[0]?.id;

const selectedTabProps = tabs?.find((tab) => tab.id === selectedTabId);
const selectedTabOrder = selectedTabProps?.order ?? 0;

const onTabSelected = (e?: SelectTabEvent, data?: SelectTabData): void => {
if (data) {
const itemKey = data.value as string;
selectTab(itemKey);
}
};

return (
<div className="msla-templates-panel">
<TabList selectedValue={selectedTabId} onTabSelect={onTabSelected} style={{ margin: '0px -12px' }}>
{tabs.map(({ id, title, order }, index) => (
<Tab
key={id}
id={id}
data-testid={id}
className={css('msla-templates-panel-tabName', id === selectedTabId && 'selected')}
value={id}
role={'tab'}
disabled={isSequence && order > selectedTabOrder}
>
{isSequence && (
<Text className="msla-templates-panel-tabName-index">
{order < selectedTabOrder ? <Icon iconName="accept" /> : index + 1}
</Text>
)}
<Text className="msla-templates-panel-tabName-title">{title}</Text>
</Tab>
))}
</TabList>
<div className="msla-panel-content-container">{selectedTabProps?.content}</div>
</div>
);
};
4 changes: 4 additions & 0 deletions libs/designer-ui/src/lib/templates/templatesPanelFooter.less
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
.msla-templates-panel-footer {
padding: 16px 20px;
border-top: 1px solid #CCC;
}
45 changes: 45 additions & 0 deletions libs/designer-ui/src/lib/templates/templatesPanelFooter.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
import { DefaultButton, PrimaryButton } from '@fluentui/react';
import type { ReactNode } from 'react';
import { useIntl } from 'react-intl';

export interface TemplatePanelFooterProps {
primaryButtonText: string | ReactNode;
primaryButtonOnClick: () => void | Promise<void>;
primaryButtonDisabled?: boolean;
onClose: () => void;
}

export const TemplatesPanelFooter = ({
primaryButtonText,
primaryButtonDisabled,
primaryButtonOnClick,
onClose,
}: TemplatePanelFooterProps) => {
const intl = useIntl();
const CLOSE = intl.formatMessage({
defaultMessage: 'Close',
id: 'FTrMxN',
description: 'Button text for closing the panel',
});

return (
<div className="msla-templates-panel-footer">
<PrimaryButton
data-testid={'template-footer-primary-button'}
data-automation-id={'template-footer-primary-button'}
onClick={primaryButtonOnClick}
disabled={primaryButtonDisabled}
>
{primaryButtonText}
</PrimaryButton>
<DefaultButton
onClick={onClose}
style={{
marginLeft: '8px',
}}
>
{CLOSE}
</DefaultButton>
</div>
);
};
19 changes: 19 additions & 0 deletions libs/designer-ui/src/lib/templates/templatesPanelHeader.less
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
.msla-templates-panel-header {
padding: 16px 20px;
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;
}
}
Loading

0 comments on commit 8a64f12

Please sign in to comment.