@boomerang-io/carbon-addons-boomerang-react 4.6.21-beta.43 → 4.6.21-beta.44
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/AdvantageSideNav/AdvantageSideNav.js +15 -33
- package/dist/cjs/components/Creatable/Creatable.js +32 -3
- package/dist/cjs/components/DataDrivenInput/DataDrivenInput.js +11 -2
- package/dist/cjs/components/DynamicFormik/DynamicFormik.js +11 -1
- package/dist/cjs/components/Header/HeaderTeamSwitcher.js +60 -57
- package/dist/cjs/constants/DataDrivenInputTypes.js +4 -0
- package/dist/esm/components/AdvantageSideNav/AdvantageSideNav.js +15 -33
- package/dist/esm/components/Creatable/Creatable.js +34 -5
- package/dist/esm/components/DataDrivenInput/DataDrivenInput.js +11 -2
- package/dist/esm/components/DynamicFormik/DynamicFormik.js +11 -1
- package/dist/esm/components/Header/HeaderTeamSwitcher.js +60 -57
- package/dist/esm/constants/DataDrivenInputTypes.js +4 -0
- package/dist/types/index.d.ts +2 -1
- package/package.json +5 -2
- package/scss/components/Creatable/_creatable.scss +31 -1
|
@@ -97,6 +97,14 @@ function AdvantageSideNav(props) {
|
|
|
97
97
|
destinationPath: toolsLink,
|
|
98
98
|
});
|
|
99
99
|
};
|
|
100
|
+
const handleDocumentCollectionsClick = () => {
|
|
101
|
+
triggerEvent &&
|
|
102
|
+
triggerEvent({
|
|
103
|
+
action: "Clicked on SideNav Document Collections link",
|
|
104
|
+
category: "Sidenav",
|
|
105
|
+
destinationPath: documentCollectionsLink,
|
|
106
|
+
});
|
|
107
|
+
};
|
|
100
108
|
const handleChatClick = () => {
|
|
101
109
|
let redirectLink = chatLink
|
|
102
110
|
? chatLink
|
|
@@ -107,8 +115,7 @@ function AdvantageSideNav(props) {
|
|
|
107
115
|
category: "Sidenav",
|
|
108
116
|
destinationPath: redirectLink,
|
|
109
117
|
});
|
|
110
|
-
|
|
111
|
-
navigateInternal(redirectLink);
|
|
118
|
+
window.open(redirectLink, "_self", "noopener,noreferrer");
|
|
112
119
|
};
|
|
113
120
|
const handleCreateJoinClick = () => {
|
|
114
121
|
triggerEvent &&
|
|
@@ -140,18 +147,6 @@ function AdvantageSideNav(props) {
|
|
|
140
147
|
};
|
|
141
148
|
const chatSideNavLink = (React__default.default.createElement(react.SideNavLink, { "data-testid": "sidenav-chat-link", className: !enableChatButton ? `${settings.prefix}--bmrg-advantage-sidenav__inactive-link` : "", isActive: windowLocation.href.includes(`${baseEnvUrl}/chat`), disabled: Boolean(!enableChatButton), renderIcon: icons.ChatBot, href: enableChatButton && chatLink, onClick: enableChatButton ? handleChatClick : (e) => e.preventDefault() }, "Chat"));
|
|
142
149
|
const showSecondDivider = showChatButton || toolsLink || agentAssistantStudioLink || agentAssistantLibraryLink || documentCollectionsLink;
|
|
143
|
-
const navigateInternal = (url) => {
|
|
144
|
-
const target = new URL(url, window.location.origin);
|
|
145
|
-
if (target.origin === window.location.origin) {
|
|
146
|
-
const pathname = target.pathname.startsWith("/ica")
|
|
147
|
-
? target.pathname.slice(4) // removes "/ica"
|
|
148
|
-
: target.pathname;
|
|
149
|
-
history.push(pathname + target.search + target.hash);
|
|
150
|
-
}
|
|
151
|
-
else {
|
|
152
|
-
window.location.href = url;
|
|
153
|
-
}
|
|
154
|
-
};
|
|
155
150
|
return (React__default.default.createElement(react.SideNav, { "aria-label": "sidenav-container", className: cx__default.default(`${settings.prefix}--bmrg-advantage-sidenav-container`, className, {
|
|
156
151
|
"--closed": !isMenuOpen,
|
|
157
152
|
}), "data-testid": "sidenav-container", isRail: true, expanded: isMenuOpen, onMouseEnter: () => setActiveMenu(true), onMouseLeave: () => {
|
|
@@ -209,28 +204,15 @@ function AdvantageSideNav(props) {
|
|
|
209
204
|
agentAssistantLibraryLink ? (React__default.default.createElement(react.SideNavLink, { "data-testid": "sidenav-agent-assistant-library-link", renderIcon: icons.Folders,
|
|
210
205
|
//href={agentAssistantLibraryLink}
|
|
211
206
|
className: `${settings.prefix}--bmrg-advantage-sidenav__inactive-link` , disabled: Boolean(!AssistantStudioLink) }, "Agent & Assistant Library")) : null,
|
|
212
|
-
documentCollectionsLink ? (React__default.default.createElement(react.SideNavLink, { "data-testid": "sidenav-document-collections-link", renderIcon: icons.DocumentMultiple_02,
|
|
213
|
-
|
|
214
|
-
|
|
207
|
+
documentCollectionsLink ? (React__default.default.createElement(react.SideNavLink, { "data-testid": "sidenav-document-collections-link", renderIcon: icons.DocumentMultiple_02, href: documentCollectionsLink, onClick: (e) => {
|
|
208
|
+
handleDocumentCollectionsClick();
|
|
209
|
+
} }, "Document Collections")) : null,
|
|
215
210
|
showSecondDivider ? React__default.default.createElement(react.SideNavDivider, null) : null,
|
|
216
|
-
catalogNavlink ? (React__default.default.createElement(react.SideNavLink, { "data-testid": "sidenav-catalog-link", isActive: windowLocation.href.includes(`${baseEnvUrl}/catalog`), renderIcon: icons.Catalog,
|
|
217
|
-
e.preventDefault();
|
|
218
|
-
navigateInternal(catalogNavlink);
|
|
219
|
-
} }, "Catalog")) : null,
|
|
211
|
+
catalogNavlink ? (React__default.default.createElement(react.SideNavLink, { "data-testid": "sidenav-catalog-link", isActive: windowLocation.href.includes(`${baseEnvUrl}/catalog`), href: catalogNavlink, renderIcon: icons.Catalog }, "Catalog")) : null,
|
|
220
212
|
settingsLink ? (React__default.default.createElement(react.SideNavLink, { "data-testid": "sidenav-settings-link", renderIcon: icons.Settings,
|
|
221
213
|
// href={settingsLink}
|
|
222
|
-
className: `${settings.prefix}--bmrg-advantage-sidenav__inactive-link` , disabled: Boolean(!AssistantStudioLink),
|
|
223
|
-
|
|
224
|
-
// handleSettingsClick();
|
|
225
|
-
// }}
|
|
226
|
-
onClick: (e) => {
|
|
227
|
-
e.preventDefault();
|
|
228
|
-
navigateInternal(settingsLink);
|
|
229
|
-
} }, "Settings")) : null,
|
|
230
|
-
adminNavlink ? (React__default.default.createElement(react.SideNavLink, { "data-testid": "sidenav-admin-link", renderIcon: icons.LicenseThirdParty, onClick: (e) => {
|
|
231
|
-
e.preventDefault();
|
|
232
|
-
navigateInternal(adminNavlink);
|
|
233
|
-
} }, "Admin")) : null),
|
|
214
|
+
className: `${settings.prefix}--bmrg-advantage-sidenav__inactive-link` , disabled: Boolean(!AssistantStudioLink) }, "Settings")) : null,
|
|
215
|
+
adminNavlink ? (React__default.default.createElement(react.SideNavLink, { "data-testid": "sidenav-admin-link", href: adminNavlink, renderIcon: icons.LicenseThirdParty }, "Admin")) : null),
|
|
234
216
|
children ? (React__default.default.createElement(React__default.default.Fragment, null,
|
|
235
217
|
React__default.default.createElement(react.SideNavDivider, null),
|
|
236
218
|
children)) : null)));
|
|
@@ -5,6 +5,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
var React = require('react');
|
|
6
6
|
var react = require('@carbon/react');
|
|
7
7
|
var icons = require('@carbon/react/icons');
|
|
8
|
+
var core = require('@dnd-kit/core');
|
|
9
|
+
var sortable = require('@dnd-kit/sortable');
|
|
10
|
+
var utilities = require('@dnd-kit/utilities');
|
|
8
11
|
var cx = require('classnames');
|
|
9
12
|
var TooltipHover = require('../TooltipHover/TooltipHover.js');
|
|
10
13
|
var accessibility = require('../../tools/accessibility.js');
|
|
@@ -20,7 +23,7 @@ IBM Confidential
|
|
|
20
23
|
694970X, 69497O0
|
|
21
24
|
© Copyright IBM Corp. 2022, 2024
|
|
22
25
|
*/
|
|
23
|
-
function CreatableComponent({ buttonClassName = `${settings.prefix}--bmrg-creatable__button`, buttonContent = "Add", buttonProps, createKeyValuePair = false, disabled, id, initialValues: externalInitialValues, invalid, invalidText, helperText, key, keyHelperText, keyLabel, keyLabelText, keyPlaceholder, label, labelText = "", max, nonDeletable = false, onKeyBlur, onValueBlur, onInputBlur, onChange, placeholder, tagProps, tagType = "teal", textInputProps, tooltipClassName = `${settings.prefix}--bmrg-creatable__tooltip`, tooltipContent, tooltipProps = { direction: "top" }, type = "text", valueHelperText, valueLabel, valueLabelText, valuePlaceholder, value: externalValues, values, trimInput = false, removeOnlyFirst = false, }) {
|
|
26
|
+
function CreatableComponent({ buttonClassName = `${settings.prefix}--bmrg-creatable__button`, buttonContent = "Add", buttonProps, createKeyValuePair = false, disabled, id, initialValues: externalInitialValues, invalid, invalidText, helperText, key, keyHelperText, keyLabel, keyLabelText, keyPlaceholder, label, labelText = "", max, nonDeletable = false, onKeyBlur, onValueBlur, onInputBlur, onChange, placeholder, reorderable, tagProps, tagType = "teal", textInputProps, tooltipClassName = `${settings.prefix}--bmrg-creatable__tooltip`, tooltipContent, tooltipProps = { direction: "top" }, type = "text", valueHelperText, valueLabel, valueLabelText, valuePlaceholder, value: externalValues, values, trimInput = false, removeOnlyFirst = false, }) {
|
|
24
27
|
const [keyValue, setKeyValue] = React.useState("");
|
|
25
28
|
const [value, setValue] = React.useState("");
|
|
26
29
|
const [input, setInput] = React.useState("");
|
|
@@ -128,6 +131,21 @@ function CreatableComponent({ buttonClassName = `${settings.prefix}--bmrg-creata
|
|
|
128
131
|
if (onChange)
|
|
129
132
|
onChange(items);
|
|
130
133
|
};
|
|
134
|
+
const sensors = core.useSensors(core.useSensor(core.PointerSensor, {
|
|
135
|
+
activationConstraint: { distance: 5 },
|
|
136
|
+
}));
|
|
137
|
+
function handleDragEnd(event) {
|
|
138
|
+
const { active, over } = event;
|
|
139
|
+
if (over && active.id !== over.id) {
|
|
140
|
+
const oldIndex = tagItems.indexOf(active.id);
|
|
141
|
+
const newIndex = tagItems.indexOf(over.id);
|
|
142
|
+
const reorderedItems = sortable.arrayMove(tagItems, oldIndex, newIndex);
|
|
143
|
+
setCreatedItems(reorderedItems);
|
|
144
|
+
if (onChange) {
|
|
145
|
+
onChange(reorderedItems);
|
|
146
|
+
}
|
|
147
|
+
}
|
|
148
|
+
}
|
|
131
149
|
return (React__default.default.createElement("div", { key: key, className: `${settings.prefix}--bmrg-creatable` },
|
|
132
150
|
React__default.default.createElement("div", { className: `${settings.prefix}--bmrg-creatable__input` },
|
|
133
151
|
createKeyValuePair ? (React__default.default.createElement("div", { className: `${settings.prefix}--bmrg-creatable__key-value-inputs` },
|
|
@@ -149,9 +167,20 @@ function CreatableComponent({ buttonClassName = `${settings.prefix}--bmrg-creata
|
|
|
149
167
|
React__default.default.createElement(TooltipHover.default, { ...tooltipProps, tooltipText: tooltipContent },
|
|
150
168
|
React__default.default.createElement(icons.Information, { size: 16, fill: "currentColor" }))))), onBlur: onInputBlur, onChange: onInputChange, placeholder: placeholder, ref: inputRef, type: type, value: input, ...textInputProps })),
|
|
151
169
|
React__default.default.createElement(react.Button, { className: createButtonClassName, disabled: isAddButtonDisabled, onClick: addValue, iconDescription: "Add", renderIcon: icons.Add, size: "md", type: "button", ...buttonProps }, buttonContent)),
|
|
152
|
-
|
|
170
|
+
reorderable ? (React__default.default.createElement(core.DndContext, { sensors: disabled ? [] : sensors, collisionDetection: core.closestCenter, onDragEnd: handleDragEnd },
|
|
171
|
+
React__default.default.createElement(sortable.SortableContext, { items: tagsToShow, strategy: sortable.verticalListSortingStrategy },
|
|
172
|
+
React__default.default.createElement("div", { className: `${settings.prefix}--bmrg-creatable__tags--reorderable` }, tagsToShow.map((item, index) => (React__default.default.createElement(ReorderableTag, { key: `${item}-${index}`, disabled: disabled, initialTagItems: initialTagItems, item: item, nonDeletable: nonDeletable, removeValue: removeValue, tagProps: tagProps, tagType: tagType }))))))) : (React__default.default.createElement("div", { className: `${settings.prefix}--bmrg-creatable__tags` }, tagsToShow.map((item, index) => (React__default.default.createElement(react.Tag, { key: `${item}-${index}`, disabled: disabled, type: tagType, onClick: nonDeletable && initialTagItems.includes(item) ? undefined : () => removeValue(item), onKeyDown: nonDeletable && initialTagItems.includes(item)
|
|
153
173
|
? undefined
|
|
154
|
-
: (e) => accessibility.isAccessibleKeyDownEvent(e) && removeValue(item), filter: !nonDeletable || (nonDeletable && !initialTagItems.includes(item)), ...tagProps }, item))))));
|
|
174
|
+
: (e) => accessibility.isAccessibleKeyDownEvent(e) && removeValue(item), filter: !nonDeletable || (nonDeletable && !initialTagItems.includes(item)), ...tagProps }, item)))))));
|
|
175
|
+
}
|
|
176
|
+
function ReorderableTag({ disabled, initialTagItems, item, nonDeletable, removeValue, tagProps, tagType, }) {
|
|
177
|
+
const { attributes, listeners, setNodeRef, transform, transition } = sortable.useSortable({ id: item });
|
|
178
|
+
const style = {
|
|
179
|
+
transform: utilities.CSS.Transform.toString(transform),
|
|
180
|
+
transition,
|
|
181
|
+
};
|
|
182
|
+
return (React__default.default.createElement("div", { ref: setNodeRef, ...attributes, ...(!disabled ? listeners : {}), style: style },
|
|
183
|
+
React__default.default.createElement(react.DismissibleTag, { disabled: disabled, type: tagType, onClose: nonDeletable && initialTagItems.includes(item) ? undefined : () => removeValue(item), renderIcon: icons.Draggable, title: "", text: item, ...tagProps })));
|
|
155
184
|
}
|
|
156
185
|
|
|
157
186
|
exports.default = CreatableComponent;
|
|
@@ -117,9 +117,18 @@ function DataDrivenInput(props) {
|
|
|
117
117
|
Component = Creatable$1;
|
|
118
118
|
componentProps = {
|
|
119
119
|
...allInputProps,
|
|
120
|
-
createKeyValuePair: type === DataDrivenInputTypes.CREATABLE_TYPES.CREATABLE_PAIR ||
|
|
120
|
+
createKeyValuePair: type === DataDrivenInputTypes.CREATABLE_TYPES.CREATABLE_PAIR ||
|
|
121
|
+
type === DataDrivenInputTypes.CREATABLE_TYPES.CREATABLE_PAIR_NON_DELETABLE ||
|
|
122
|
+
type === DataDrivenInputTypes.CREATABLE_TYPES.CREATABLE_PAIR_REORDERABLE ||
|
|
123
|
+
type === DataDrivenInputTypes.CREATABLE_TYPES.CREATABLE_PAIR_REORDERABLE_NON_DELETABLE,
|
|
121
124
|
nonDeletable: type === DataDrivenInputTypes.CREATABLE_TYPES.CREATABLE_SINGLE_NON_DELETABLE ||
|
|
122
|
-
type === DataDrivenInputTypes.CREATABLE_TYPES.
|
|
125
|
+
type === DataDrivenInputTypes.CREATABLE_TYPES.CREATABLE_SINGLE_REORDERABLE_NON_DELETABLE ||
|
|
126
|
+
type === DataDrivenInputTypes.CREATABLE_TYPES.CREATABLE_PAIR_NON_DELETABLE ||
|
|
127
|
+
type === DataDrivenInputTypes.CREATABLE_TYPES.CREATABLE_PAIR_REORDERABLE_NON_DELETABLE,
|
|
128
|
+
reorderable: type === DataDrivenInputTypes.CREATABLE_TYPES.CREATABLE_SINGLE_REORDERABLE ||
|
|
129
|
+
type === DataDrivenInputTypes.CREATABLE_TYPES.CREATABLE_SINGLE_REORDERABLE_NON_DELETABLE ||
|
|
130
|
+
type === DataDrivenInputTypes.CREATABLE_TYPES.CREATABLE_PAIR_REORDERABLE ||
|
|
131
|
+
type === DataDrivenInputTypes.CREATABLE_TYPES.CREATABLE_PAIR_REORDERABLE_NON_DELETABLE,
|
|
123
132
|
invalid: invalidInput,
|
|
124
133
|
invalidText: invalidTextMessage,
|
|
125
134
|
placeholder,
|
|
@@ -134,7 +134,13 @@ async function handleGoverningSelectChange({ formikProps, input, inputs, isInput
|
|
|
134
134
|
/** Erase value of governed inputs */
|
|
135
135
|
if (inputsGovernedByCurrentOne.length) {
|
|
136
136
|
await inputsGovernedByCurrentOne.forEach(async (input) => {
|
|
137
|
-
await handleGoverningSelectChange({
|
|
137
|
+
await handleGoverningSelectChange({
|
|
138
|
+
formikProps,
|
|
139
|
+
input,
|
|
140
|
+
inputs,
|
|
141
|
+
isInputBeingChanged: false,
|
|
142
|
+
selectedItem: null,
|
|
143
|
+
});
|
|
138
144
|
});
|
|
139
145
|
}
|
|
140
146
|
// only the top governing select should display warnings if changed and reset touched status for governed ones
|
|
@@ -226,8 +232,12 @@ function generateYupAst({ inputs, allowCustomPropertySyntax, customPropertySynta
|
|
|
226
232
|
if (inputType === DataDrivenInputTypes.MULTI_SELECT_TYPES.MULTI_SELECT ||
|
|
227
233
|
inputType === DataDrivenInputTypes.CREATABLE_TYPES.CREATABLE_SINGLE ||
|
|
228
234
|
inputType === DataDrivenInputTypes.CREATABLE_TYPES.CREATABLE_SINGLE_NON_DELETABLE ||
|
|
235
|
+
inputType === DataDrivenInputTypes.CREATABLE_TYPES.CREATABLE_SINGLE_REORDERABLE ||
|
|
236
|
+
inputType === DataDrivenInputTypes.CREATABLE_TYPES.CREATABLE_SINGLE_REORDERABLE_NON_DELETABLE ||
|
|
229
237
|
inputType === DataDrivenInputTypes.CREATABLE_TYPES.CREATABLE_PAIR ||
|
|
230
238
|
inputType === DataDrivenInputTypes.CREATABLE_TYPES.CREATABLE_PAIR_NON_DELETABLE ||
|
|
239
|
+
inputType === DataDrivenInputTypes.CREATABLE_TYPES.CREATABLE_PAIR_REORDERABLE ||
|
|
240
|
+
inputType === DataDrivenInputTypes.CREATABLE_TYPES.CREATABLE_PAIR_REORDERABLE_NON_DELETABLE ||
|
|
231
241
|
inputType === DataDrivenInputTypes.CHECKBOX_TYPES.CHECKBOX) {
|
|
232
242
|
if (useCSVforArrays) {
|
|
233
243
|
yupValidationArray.push(["yup.string"]);
|
|
@@ -307,67 +307,70 @@ function HeaderTeamSwitcher({ analyticsHelpers, baseServicesUrl, createJoinTeamT
|
|
|
307
307
|
React__default.default.createElement("span", { className: headerTeamSwitcherCreateTeamButtonTextClassname }, createTeamButtonText),
|
|
308
308
|
React__default.default.createElement(icons.AddAlt, { className: headerTeamSwitcherCreateTeamButtonIconClassname })))),
|
|
309
309
|
allTeams.map((team) => {
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
310
|
+
if (Boolean(team?.id)) {
|
|
311
|
+
const isTeamSelected = team.id === selectedTeam?.id;
|
|
312
|
+
if (team.type === TeamTypes.TEAM_TYPES.ACCOUNT) {
|
|
313
|
+
const isSubmenuOpen = team.id === openAccountSubmenuId;
|
|
314
|
+
const projectTeams = team.projectTeams;
|
|
315
|
+
const existProjectTeams = Array.isArray(projectTeams) && projectTeams.length > 0;
|
|
316
|
+
let selectedProjectTeamIndex = -1;
|
|
317
|
+
if (existProjectTeams) {
|
|
318
|
+
selectedProjectTeamIndex = projectTeams.findIndex((team) => team.id === selectedTeam?.id);
|
|
319
|
+
}
|
|
320
|
+
const isProjectTeamSelected = selectedProjectTeamIndex >= 0;
|
|
321
|
+
const isMenuSelected = isTeamSelected || isProjectTeamSelected;
|
|
322
|
+
if (existProjectTeams && isProjectTeamSelected) {
|
|
323
|
+
const [removedTeam] = projectTeams.splice(selectedProjectTeamIndex, 1);
|
|
324
|
+
projectTeams.unshift(removedTeam);
|
|
325
|
+
}
|
|
326
|
+
return (React__default.default.createElement("div", { key: team.id, id: `${team.id}-account-menu` },
|
|
327
|
+
React__default.default.createElement(react.HeaderMenuItem, { "aria-expanded": isSubmenuOpen, "aria-selected": isMenuSelected, className: headerDropdownMenuItemAccountContainerClassname, onClick: (e) => handleOpenAccountSubmenu({ e, id: team.id }),
|
|
328
|
+
// eslint-disable-next-line no-script-url
|
|
329
|
+
href: "javascript:void(0)", "data-testid": "header-team-switcher-menu-account-accordion" },
|
|
330
|
+
React__default.default.createElement("div", { className: headerDropdownMenuItemAccountClassname },
|
|
331
|
+
React__default.default.createElement("div", { className: headerDropdownMenuItemTextIconClassname },
|
|
332
|
+
React__default.default.createElement("span", { title: team.nameToDisplay, className: headerDropdownMenuItemTextClassname }, team.nameToDisplay),
|
|
333
|
+
isMenuSelected ? (React__default.default.createElement(icons.CheckmarkFilled, { className: headerDropdownMenuItemIconClassname })) : null),
|
|
334
|
+
React__default.default.createElement("div", { className: headerDropdownMenuItemAccountIconsClassname },
|
|
335
|
+
React__default.default.createElement(icons.GroupAccount, { className: headerDropdownMenuItemAccountGroupIconClassname }),
|
|
336
|
+
React__default.default.createElement(icons.ChevronDown, { className: headerDropdownMenuItemAccountChevronIconClassname })))),
|
|
337
|
+
React__default.default.createElement("div", { id: `${team.id}-account-submenu`, key: `${team.id}-account-submenu`, "aria-expanded": isSubmenuOpen, className: headerDropdownMenuItemAccountSubmenuClassname },
|
|
338
|
+
React__default.default.createElement(react.HeaderMenuItem, { key: `${team.id}-menu-item`, id: `${team.id}-account-menu-item`, "aria-selected": isTeamSelected, className: headerDropdownMenuItemContainerClassname, onClick: () => {
|
|
339
|
+
handleTeamClick({ team, type: "account" });
|
|
340
|
+
}, "data-testid": "header-team-switcher-menu-account-accordion-item",
|
|
341
|
+
// eslint-disable-next-line no-script-url
|
|
342
|
+
href: "javascript:void(0)" },
|
|
343
|
+
React__default.default.createElement("div", { className: headerDropdownMenuItemClassname, style: { paddingLeft: "1rem" } },
|
|
344
|
+
React__default.default.createElement("span", { title: team.nameToDisplay, className: headerDropdownMenuItemTextClassname }, "Account Page"),
|
|
345
|
+
isTeamSelected ? (React__default.default.createElement(icons.CheckmarkFilled, { className: headerDropdownMenuItemIconClassname })) : null)),
|
|
346
|
+
projectTeams && projectTeams.length > 0
|
|
347
|
+
? projectTeams.map((team) => {
|
|
348
|
+
const isTeamSelected = team.id === selectedTeam?.id;
|
|
349
|
+
return (React__default.default.createElement("div", { key: team.id, id: `${team.id}-project-menu-item` },
|
|
350
|
+
React__default.default.createElement(react.HeaderMenuItem, { "aria-selected": isTeamSelected, className: headerDropdownMenuItemContainerClassname, onClick: () => {
|
|
351
|
+
handleTeamClick({ team, type: "project" });
|
|
352
|
+
}, "data-testid": "header-team-switcher-menu-account-accordion-item",
|
|
353
|
+
// eslint-disable-next-line no-script-url
|
|
354
|
+
href: "javascript:void(0)" },
|
|
355
|
+
React__default.default.createElement("div", { className: headerDropdownMenuItemClassname, style: { paddingLeft: "1rem" } },
|
|
356
|
+
React__default.default.createElement("span", { title: team.nameToDisplay, className: headerDropdownMenuItemTextClassname }, team.nameToDisplay),
|
|
357
|
+
isTeamSelected ? (React__default.default.createElement(icons.CheckmarkFilled, { className: headerDropdownMenuItemIconClassname })) : null))));
|
|
358
|
+
})
|
|
359
|
+
: null)));
|
|
324
360
|
}
|
|
325
|
-
|
|
326
|
-
React__default.default.createElement(
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
React__default.default.createElement("div", { className: headerDropdownMenuItemTextIconClassname },
|
|
331
|
-
React__default.default.createElement("span", { title: team.nameToDisplay, className: headerDropdownMenuItemTextClassname }, team.nameToDisplay),
|
|
332
|
-
isMenuSelected ? React__default.default.createElement(icons.CheckmarkFilled, { className: headerDropdownMenuItemIconClassname }) : null),
|
|
333
|
-
React__default.default.createElement("div", { className: headerDropdownMenuItemAccountIconsClassname },
|
|
334
|
-
React__default.default.createElement(icons.GroupAccount, { className: headerDropdownMenuItemAccountGroupIconClassname }),
|
|
335
|
-
React__default.default.createElement(icons.ChevronDown, { className: headerDropdownMenuItemAccountChevronIconClassname })))),
|
|
336
|
-
React__default.default.createElement("div", { id: `${team.id}-account-submenu`, key: `${team.id}-account-submenu`, "aria-expanded": isSubmenuOpen, className: headerDropdownMenuItemAccountSubmenuClassname },
|
|
337
|
-
React__default.default.createElement(react.HeaderMenuItem, { key: `${team.id}-menu-item`, id: `${team.id}-account-menu-item`, "aria-selected": isTeamSelected, className: headerDropdownMenuItemContainerClassname, onClick: () => {
|
|
338
|
-
handleTeamClick({ team, type: "account" });
|
|
339
|
-
}, "data-testid": "header-team-switcher-menu-account-accordion-item",
|
|
361
|
+
else {
|
|
362
|
+
return (React__default.default.createElement("div", { key: team.id, id: `${team.id}-${team.type}-menu-item` },
|
|
363
|
+
React__default.default.createElement(react.HeaderMenuItem, { "aria-selected": isTeamSelected, className: headerDropdownMenuItemContainerClassname, onClick: () => {
|
|
364
|
+
handleTeamClick({ team, type: team.type ?? "" });
|
|
365
|
+
}, "data-testid": "header-team-switcher-menu-item",
|
|
340
366
|
// eslint-disable-next-line no-script-url
|
|
341
367
|
href: "javascript:void(0)" },
|
|
342
|
-
React__default.default.createElement("div", { className: headerDropdownMenuItemClassname
|
|
343
|
-
React__default.default.createElement("span", { title: team.nameToDisplay, className: headerDropdownMenuItemTextClassname },
|
|
344
|
-
isTeamSelected ? React__default.default.createElement(icons.CheckmarkFilled, { className: headerDropdownMenuItemIconClassname }) : null))
|
|
345
|
-
|
|
346
|
-
? projectTeams.map((team) => {
|
|
347
|
-
const isTeamSelected = team.id === selectedTeam?.id;
|
|
348
|
-
return (React__default.default.createElement("div", { key: team.id, id: `${team.id}-project-menu-item` },
|
|
349
|
-
React__default.default.createElement(react.HeaderMenuItem, { "aria-selected": isTeamSelected, className: headerDropdownMenuItemContainerClassname, onClick: () => {
|
|
350
|
-
handleTeamClick({ team, type: "project" });
|
|
351
|
-
}, "data-testid": "header-team-switcher-menu-account-accordion-item",
|
|
352
|
-
// eslint-disable-next-line no-script-url
|
|
353
|
-
href: "javascript:void(0)" },
|
|
354
|
-
React__default.default.createElement("div", { className: headerDropdownMenuItemClassname, style: { paddingLeft: "1rem" } },
|
|
355
|
-
React__default.default.createElement("span", { title: team.nameToDisplay, className: headerDropdownMenuItemTextClassname }, team.nameToDisplay),
|
|
356
|
-
isTeamSelected ? (React__default.default.createElement(icons.CheckmarkFilled, { className: headerDropdownMenuItemIconClassname })) : null))));
|
|
357
|
-
})
|
|
358
|
-
: null)));
|
|
359
|
-
}
|
|
360
|
-
else {
|
|
361
|
-
return (React__default.default.createElement("div", { key: team.id, id: `${team.id}-${team.type}-menu-item` },
|
|
362
|
-
React__default.default.createElement(react.HeaderMenuItem, { "aria-selected": isTeamSelected, className: headerDropdownMenuItemContainerClassname, onClick: () => {
|
|
363
|
-
handleTeamClick({ team, type: team.type ?? "" });
|
|
364
|
-
}, "data-testid": "header-team-switcher-menu-item",
|
|
365
|
-
// eslint-disable-next-line no-script-url
|
|
366
|
-
href: "javascript:void(0)" },
|
|
367
|
-
React__default.default.createElement("div", { className: headerDropdownMenuItemClassname },
|
|
368
|
-
React__default.default.createElement("span", { title: team.nameToDisplay, className: headerDropdownMenuItemTextClassname }, team.nameToDisplay),
|
|
369
|
-
isTeamSelected ? React__default.default.createElement(icons.CheckmarkFilled, { className: headerDropdownMenuItemIconClassname }) : null))));
|
|
368
|
+
React__default.default.createElement("div", { className: headerDropdownMenuItemClassname },
|
|
369
|
+
React__default.default.createElement("span", { title: team.nameToDisplay, className: headerDropdownMenuItemTextClassname }, team.nameToDisplay),
|
|
370
|
+
isTeamSelected ? React__default.default.createElement(icons.CheckmarkFilled, { className: headerDropdownMenuItemIconClassname }) : null))));
|
|
371
|
+
}
|
|
370
372
|
}
|
|
373
|
+
return null;
|
|
371
374
|
})))));
|
|
372
375
|
}
|
|
373
376
|
return null;
|
|
@@ -11,8 +11,12 @@ const CHECKBOX_TYPES = {
|
|
|
11
11
|
const CREATABLE_TYPES = {
|
|
12
12
|
CREATABLE_SINGLE: "creatable-single",
|
|
13
13
|
CREATABLE_SINGLE_NON_DELETABLE: "creatable-single-non-deletable",
|
|
14
|
+
CREATABLE_SINGLE_REORDERABLE: "creatable-single-reorderable",
|
|
15
|
+
CREATABLE_SINGLE_REORDERABLE_NON_DELETABLE: "creatable-single-reorderable-non-deletable",
|
|
14
16
|
CREATABLE_PAIR: "creatable-pair",
|
|
15
17
|
CREATABLE_PAIR_NON_DELETABLE: "creatable-pair-non-deletable",
|
|
18
|
+
CREATABLE_PAIR_REORDERABLE: "creatable-pair-reorderable",
|
|
19
|
+
CREATABLE_PAIR_REORDERABLE_NON_DELETABLE: "creatable-pair-reorderable-non-deletable",
|
|
16
20
|
};
|
|
17
21
|
const DATE_TYPES = {
|
|
18
22
|
DATE: "date",
|
|
@@ -88,6 +88,14 @@ function AdvantageSideNav(props) {
|
|
|
88
88
|
destinationPath: toolsLink,
|
|
89
89
|
});
|
|
90
90
|
};
|
|
91
|
+
const handleDocumentCollectionsClick = () => {
|
|
92
|
+
triggerEvent &&
|
|
93
|
+
triggerEvent({
|
|
94
|
+
action: "Clicked on SideNav Document Collections link",
|
|
95
|
+
category: "Sidenav",
|
|
96
|
+
destinationPath: documentCollectionsLink,
|
|
97
|
+
});
|
|
98
|
+
};
|
|
91
99
|
const handleChatClick = () => {
|
|
92
100
|
let redirectLink = chatLink
|
|
93
101
|
? chatLink
|
|
@@ -98,8 +106,7 @@ function AdvantageSideNav(props) {
|
|
|
98
106
|
category: "Sidenav",
|
|
99
107
|
destinationPath: redirectLink,
|
|
100
108
|
});
|
|
101
|
-
|
|
102
|
-
navigateInternal(redirectLink);
|
|
109
|
+
window.open(redirectLink, "_self", "noopener,noreferrer");
|
|
103
110
|
};
|
|
104
111
|
const handleCreateJoinClick = () => {
|
|
105
112
|
triggerEvent &&
|
|
@@ -131,18 +138,6 @@ function AdvantageSideNav(props) {
|
|
|
131
138
|
};
|
|
132
139
|
const chatSideNavLink = (React.createElement(SideNavLink, { "data-testid": "sidenav-chat-link", className: !enableChatButton ? `${prefix}--bmrg-advantage-sidenav__inactive-link` : "", isActive: windowLocation.href.includes(`${baseEnvUrl}/chat`), disabled: Boolean(!enableChatButton), renderIcon: ChatBot, href: enableChatButton && chatLink, onClick: enableChatButton ? handleChatClick : (e) => e.preventDefault() }, "Chat"));
|
|
133
140
|
const showSecondDivider = showChatButton || toolsLink || agentAssistantStudioLink || agentAssistantLibraryLink || documentCollectionsLink;
|
|
134
|
-
const navigateInternal = (url) => {
|
|
135
|
-
const target = new URL(url, window.location.origin);
|
|
136
|
-
if (target.origin === window.location.origin) {
|
|
137
|
-
const pathname = target.pathname.startsWith("/ica")
|
|
138
|
-
? target.pathname.slice(4) // removes "/ica"
|
|
139
|
-
: target.pathname;
|
|
140
|
-
history.push(pathname + target.search + target.hash);
|
|
141
|
-
}
|
|
142
|
-
else {
|
|
143
|
-
window.location.href = url;
|
|
144
|
-
}
|
|
145
|
-
};
|
|
146
141
|
return (React.createElement(SideNav, { "aria-label": "sidenav-container", className: cx(`${prefix}--bmrg-advantage-sidenav-container`, className, {
|
|
147
142
|
"--closed": !isMenuOpen,
|
|
148
143
|
}), "data-testid": "sidenav-container", isRail: true, expanded: isMenuOpen, onMouseEnter: () => setActiveMenu(true), onMouseLeave: () => {
|
|
@@ -200,28 +195,15 @@ function AdvantageSideNav(props) {
|
|
|
200
195
|
agentAssistantLibraryLink ? (React.createElement(SideNavLink, { "data-testid": "sidenav-agent-assistant-library-link", renderIcon: Folders,
|
|
201
196
|
//href={agentAssistantLibraryLink}
|
|
202
197
|
className: `${prefix}--bmrg-advantage-sidenav__inactive-link` , disabled: Boolean(!AssistantStudioLink) }, "Agent & Assistant Library")) : null,
|
|
203
|
-
documentCollectionsLink ? (React.createElement(SideNavLink, { "data-testid": "sidenav-document-collections-link", renderIcon: DocumentMultiple_02,
|
|
204
|
-
|
|
205
|
-
|
|
198
|
+
documentCollectionsLink ? (React.createElement(SideNavLink, { "data-testid": "sidenav-document-collections-link", renderIcon: DocumentMultiple_02, href: documentCollectionsLink, onClick: (e) => {
|
|
199
|
+
handleDocumentCollectionsClick();
|
|
200
|
+
} }, "Document Collections")) : null,
|
|
206
201
|
showSecondDivider ? React.createElement(SideNavDivider, null) : null,
|
|
207
|
-
catalogNavlink ? (React.createElement(SideNavLink, { "data-testid": "sidenav-catalog-link", isActive: windowLocation.href.includes(`${baseEnvUrl}/catalog`), renderIcon: Catalog,
|
|
208
|
-
e.preventDefault();
|
|
209
|
-
navigateInternal(catalogNavlink);
|
|
210
|
-
} }, "Catalog")) : null,
|
|
202
|
+
catalogNavlink ? (React.createElement(SideNavLink, { "data-testid": "sidenav-catalog-link", isActive: windowLocation.href.includes(`${baseEnvUrl}/catalog`), href: catalogNavlink, renderIcon: Catalog }, "Catalog")) : null,
|
|
211
203
|
settingsLink ? (React.createElement(SideNavLink, { "data-testid": "sidenav-settings-link", renderIcon: Settings,
|
|
212
204
|
// href={settingsLink}
|
|
213
|
-
className: `${prefix}--bmrg-advantage-sidenav__inactive-link` , disabled: Boolean(!AssistantStudioLink),
|
|
214
|
-
|
|
215
|
-
// handleSettingsClick();
|
|
216
|
-
// }}
|
|
217
|
-
onClick: (e) => {
|
|
218
|
-
e.preventDefault();
|
|
219
|
-
navigateInternal(settingsLink);
|
|
220
|
-
} }, "Settings")) : null,
|
|
221
|
-
adminNavlink ? (React.createElement(SideNavLink, { "data-testid": "sidenav-admin-link", renderIcon: LicenseThirdParty, onClick: (e) => {
|
|
222
|
-
e.preventDefault();
|
|
223
|
-
navigateInternal(adminNavlink);
|
|
224
|
-
} }, "Admin")) : null),
|
|
205
|
+
className: `${prefix}--bmrg-advantage-sidenav__inactive-link` , disabled: Boolean(!AssistantStudioLink) }, "Settings")) : null,
|
|
206
|
+
adminNavlink ? (React.createElement(SideNavLink, { "data-testid": "sidenav-admin-link", href: adminNavlink, renderIcon: LicenseThirdParty }, "Admin")) : null),
|
|
225
207
|
children ? (React.createElement(React.Fragment, null,
|
|
226
208
|
React.createElement(SideNavDivider, null),
|
|
227
209
|
children)) : null)));
|
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
import React, { useState } from 'react';
|
|
2
|
-
import { TextInput, Button, Tag } from '@carbon/react';
|
|
3
|
-
import { Information, Add } from '@carbon/react/icons';
|
|
2
|
+
import { TextInput, Button, Tag, DismissibleTag } from '@carbon/react';
|
|
3
|
+
import { Information, Add, Draggable } from '@carbon/react/icons';
|
|
4
|
+
import { useSensors, useSensor, PointerSensor, DndContext, closestCenter } from '@dnd-kit/core';
|
|
5
|
+
import { SortableContext, verticalListSortingStrategy, useSortable, arrayMove } from '@dnd-kit/sortable';
|
|
6
|
+
import { CSS } from '@dnd-kit/utilities';
|
|
4
7
|
import cx from 'classnames';
|
|
5
8
|
import TooltipHover from '../TooltipHover/TooltipHover.js';
|
|
6
9
|
import { isAccessibleKeyDownEvent } from '../../tools/accessibility.js';
|
|
@@ -11,7 +14,7 @@ IBM Confidential
|
|
|
11
14
|
694970X, 69497O0
|
|
12
15
|
© Copyright IBM Corp. 2022, 2024
|
|
13
16
|
*/
|
|
14
|
-
function CreatableComponent({ buttonClassName = `${prefix}--bmrg-creatable__button`, buttonContent = "Add", buttonProps, createKeyValuePair = false, disabled, id, initialValues: externalInitialValues, invalid, invalidText, helperText, key, keyHelperText, keyLabel, keyLabelText, keyPlaceholder, label, labelText = "", max, nonDeletable = false, onKeyBlur, onValueBlur, onInputBlur, onChange, placeholder, tagProps, tagType = "teal", textInputProps, tooltipClassName = `${prefix}--bmrg-creatable__tooltip`, tooltipContent, tooltipProps = { direction: "top" }, type = "text", valueHelperText, valueLabel, valueLabelText, valuePlaceholder, value: externalValues, values, trimInput = false, removeOnlyFirst = false, }) {
|
|
17
|
+
function CreatableComponent({ buttonClassName = `${prefix}--bmrg-creatable__button`, buttonContent = "Add", buttonProps, createKeyValuePair = false, disabled, id, initialValues: externalInitialValues, invalid, invalidText, helperText, key, keyHelperText, keyLabel, keyLabelText, keyPlaceholder, label, labelText = "", max, nonDeletable = false, onKeyBlur, onValueBlur, onInputBlur, onChange, placeholder, reorderable, tagProps, tagType = "teal", textInputProps, tooltipClassName = `${prefix}--bmrg-creatable__tooltip`, tooltipContent, tooltipProps = { direction: "top" }, type = "text", valueHelperText, valueLabel, valueLabelText, valuePlaceholder, value: externalValues, values, trimInput = false, removeOnlyFirst = false, }) {
|
|
15
18
|
const [keyValue, setKeyValue] = useState("");
|
|
16
19
|
const [value, setValue] = useState("");
|
|
17
20
|
const [input, setInput] = useState("");
|
|
@@ -119,6 +122,21 @@ function CreatableComponent({ buttonClassName = `${prefix}--bmrg-creatable__butt
|
|
|
119
122
|
if (onChange)
|
|
120
123
|
onChange(items);
|
|
121
124
|
};
|
|
125
|
+
const sensors = useSensors(useSensor(PointerSensor, {
|
|
126
|
+
activationConstraint: { distance: 5 },
|
|
127
|
+
}));
|
|
128
|
+
function handleDragEnd(event) {
|
|
129
|
+
const { active, over } = event;
|
|
130
|
+
if (over && active.id !== over.id) {
|
|
131
|
+
const oldIndex = tagItems.indexOf(active.id);
|
|
132
|
+
const newIndex = tagItems.indexOf(over.id);
|
|
133
|
+
const reorderedItems = arrayMove(tagItems, oldIndex, newIndex);
|
|
134
|
+
setCreatedItems(reorderedItems);
|
|
135
|
+
if (onChange) {
|
|
136
|
+
onChange(reorderedItems);
|
|
137
|
+
}
|
|
138
|
+
}
|
|
139
|
+
}
|
|
122
140
|
return (React.createElement("div", { key: key, className: `${prefix}--bmrg-creatable` },
|
|
123
141
|
React.createElement("div", { className: `${prefix}--bmrg-creatable__input` },
|
|
124
142
|
createKeyValuePair ? (React.createElement("div", { className: `${prefix}--bmrg-creatable__key-value-inputs` },
|
|
@@ -140,9 +158,20 @@ function CreatableComponent({ buttonClassName = `${prefix}--bmrg-creatable__butt
|
|
|
140
158
|
React.createElement(TooltipHover, { ...tooltipProps, tooltipText: tooltipContent },
|
|
141
159
|
React.createElement(Information, { size: 16, fill: "currentColor" }))))), onBlur: onInputBlur, onChange: onInputChange, placeholder: placeholder, ref: inputRef, type: type, value: input, ...textInputProps })),
|
|
142
160
|
React.createElement(Button, { className: createButtonClassName, disabled: isAddButtonDisabled, onClick: addValue, iconDescription: "Add", renderIcon: Add, size: "md", type: "button", ...buttonProps }, buttonContent)),
|
|
143
|
-
|
|
161
|
+
reorderable ? (React.createElement(DndContext, { sensors: disabled ? [] : sensors, collisionDetection: closestCenter, onDragEnd: handleDragEnd },
|
|
162
|
+
React.createElement(SortableContext, { items: tagsToShow, strategy: verticalListSortingStrategy },
|
|
163
|
+
React.createElement("div", { className: `${prefix}--bmrg-creatable__tags--reorderable` }, tagsToShow.map((item, index) => (React.createElement(ReorderableTag, { key: `${item}-${index}`, disabled: disabled, initialTagItems: initialTagItems, item: item, nonDeletable: nonDeletable, removeValue: removeValue, tagProps: tagProps, tagType: tagType }))))))) : (React.createElement("div", { className: `${prefix}--bmrg-creatable__tags` }, tagsToShow.map((item, index) => (React.createElement(Tag, { key: `${item}-${index}`, disabled: disabled, type: tagType, onClick: nonDeletable && initialTagItems.includes(item) ? undefined : () => removeValue(item), onKeyDown: nonDeletable && initialTagItems.includes(item)
|
|
144
164
|
? undefined
|
|
145
|
-
: (e) => isAccessibleKeyDownEvent(e) && removeValue(item), filter: !nonDeletable || (nonDeletable && !initialTagItems.includes(item)), ...tagProps }, item))))));
|
|
165
|
+
: (e) => isAccessibleKeyDownEvent(e) && removeValue(item), filter: !nonDeletable || (nonDeletable && !initialTagItems.includes(item)), ...tagProps }, item)))))));
|
|
166
|
+
}
|
|
167
|
+
function ReorderableTag({ disabled, initialTagItems, item, nonDeletable, removeValue, tagProps, tagType, }) {
|
|
168
|
+
const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: item });
|
|
169
|
+
const style = {
|
|
170
|
+
transform: CSS.Transform.toString(transform),
|
|
171
|
+
transition,
|
|
172
|
+
};
|
|
173
|
+
return (React.createElement("div", { ref: setNodeRef, ...attributes, ...(!disabled ? listeners : {}), style: style },
|
|
174
|
+
React.createElement(DismissibleTag, { disabled: disabled, type: tagType, onClose: nonDeletable && initialTagItems.includes(item) ? undefined : () => removeValue(item), renderIcon: Draggable, title: "", text: item, ...tagProps })));
|
|
146
175
|
}
|
|
147
176
|
|
|
148
177
|
export { CreatableComponent as default };
|
|
@@ -109,9 +109,18 @@ function DataDrivenInput(props) {
|
|
|
109
109
|
Component = Creatable;
|
|
110
110
|
componentProps = {
|
|
111
111
|
...allInputProps,
|
|
112
|
-
createKeyValuePair: type === CREATABLE_TYPES.CREATABLE_PAIR ||
|
|
112
|
+
createKeyValuePair: type === CREATABLE_TYPES.CREATABLE_PAIR ||
|
|
113
|
+
type === CREATABLE_TYPES.CREATABLE_PAIR_NON_DELETABLE ||
|
|
114
|
+
type === CREATABLE_TYPES.CREATABLE_PAIR_REORDERABLE ||
|
|
115
|
+
type === CREATABLE_TYPES.CREATABLE_PAIR_REORDERABLE_NON_DELETABLE,
|
|
113
116
|
nonDeletable: type === CREATABLE_TYPES.CREATABLE_SINGLE_NON_DELETABLE ||
|
|
114
|
-
type === CREATABLE_TYPES.
|
|
117
|
+
type === CREATABLE_TYPES.CREATABLE_SINGLE_REORDERABLE_NON_DELETABLE ||
|
|
118
|
+
type === CREATABLE_TYPES.CREATABLE_PAIR_NON_DELETABLE ||
|
|
119
|
+
type === CREATABLE_TYPES.CREATABLE_PAIR_REORDERABLE_NON_DELETABLE,
|
|
120
|
+
reorderable: type === CREATABLE_TYPES.CREATABLE_SINGLE_REORDERABLE ||
|
|
121
|
+
type === CREATABLE_TYPES.CREATABLE_SINGLE_REORDERABLE_NON_DELETABLE ||
|
|
122
|
+
type === CREATABLE_TYPES.CREATABLE_PAIR_REORDERABLE ||
|
|
123
|
+
type === CREATABLE_TYPES.CREATABLE_PAIR_REORDERABLE_NON_DELETABLE,
|
|
115
124
|
invalid: invalidInput,
|
|
116
125
|
invalidText: invalidTextMessage,
|
|
117
126
|
placeholder,
|
|
@@ -106,7 +106,13 @@ async function handleGoverningSelectChange({ formikProps, input, inputs, isInput
|
|
|
106
106
|
/** Erase value of governed inputs */
|
|
107
107
|
if (inputsGovernedByCurrentOne.length) {
|
|
108
108
|
await inputsGovernedByCurrentOne.forEach(async (input) => {
|
|
109
|
-
await handleGoverningSelectChange({
|
|
109
|
+
await handleGoverningSelectChange({
|
|
110
|
+
formikProps,
|
|
111
|
+
input,
|
|
112
|
+
inputs,
|
|
113
|
+
isInputBeingChanged: false,
|
|
114
|
+
selectedItem: null,
|
|
115
|
+
});
|
|
110
116
|
});
|
|
111
117
|
}
|
|
112
118
|
// only the top governing select should display warnings if changed and reset touched status for governed ones
|
|
@@ -198,8 +204,12 @@ function generateYupAst({ inputs, allowCustomPropertySyntax, customPropertySynta
|
|
|
198
204
|
if (inputType === MULTI_SELECT_TYPES.MULTI_SELECT ||
|
|
199
205
|
inputType === CREATABLE_TYPES.CREATABLE_SINGLE ||
|
|
200
206
|
inputType === CREATABLE_TYPES.CREATABLE_SINGLE_NON_DELETABLE ||
|
|
207
|
+
inputType === CREATABLE_TYPES.CREATABLE_SINGLE_REORDERABLE ||
|
|
208
|
+
inputType === CREATABLE_TYPES.CREATABLE_SINGLE_REORDERABLE_NON_DELETABLE ||
|
|
201
209
|
inputType === CREATABLE_TYPES.CREATABLE_PAIR ||
|
|
202
210
|
inputType === CREATABLE_TYPES.CREATABLE_PAIR_NON_DELETABLE ||
|
|
211
|
+
inputType === CREATABLE_TYPES.CREATABLE_PAIR_REORDERABLE ||
|
|
212
|
+
inputType === CREATABLE_TYPES.CREATABLE_PAIR_REORDERABLE_NON_DELETABLE ||
|
|
203
213
|
inputType === CHECKBOX_TYPES.CHECKBOX) {
|
|
204
214
|
if (useCSVforArrays) {
|
|
205
215
|
yupValidationArray.push(["yup.string"]);
|
|
@@ -298,67 +298,70 @@ function HeaderTeamSwitcher({ analyticsHelpers, baseServicesUrl, createJoinTeamT
|
|
|
298
298
|
React.createElement("span", { className: headerTeamSwitcherCreateTeamButtonTextClassname }, createTeamButtonText),
|
|
299
299
|
React.createElement(AddAlt, { className: headerTeamSwitcherCreateTeamButtonIconClassname })))),
|
|
300
300
|
allTeams.map((team) => {
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
301
|
+
if (Boolean(team?.id)) {
|
|
302
|
+
const isTeamSelected = team.id === selectedTeam?.id;
|
|
303
|
+
if (team.type === TEAM_TYPES.ACCOUNT) {
|
|
304
|
+
const isSubmenuOpen = team.id === openAccountSubmenuId;
|
|
305
|
+
const projectTeams = team.projectTeams;
|
|
306
|
+
const existProjectTeams = Array.isArray(projectTeams) && projectTeams.length > 0;
|
|
307
|
+
let selectedProjectTeamIndex = -1;
|
|
308
|
+
if (existProjectTeams) {
|
|
309
|
+
selectedProjectTeamIndex = projectTeams.findIndex((team) => team.id === selectedTeam?.id);
|
|
310
|
+
}
|
|
311
|
+
const isProjectTeamSelected = selectedProjectTeamIndex >= 0;
|
|
312
|
+
const isMenuSelected = isTeamSelected || isProjectTeamSelected;
|
|
313
|
+
if (existProjectTeams && isProjectTeamSelected) {
|
|
314
|
+
const [removedTeam] = projectTeams.splice(selectedProjectTeamIndex, 1);
|
|
315
|
+
projectTeams.unshift(removedTeam);
|
|
316
|
+
}
|
|
317
|
+
return (React.createElement("div", { key: team.id, id: `${team.id}-account-menu` },
|
|
318
|
+
React.createElement(HeaderMenuItem, { "aria-expanded": isSubmenuOpen, "aria-selected": isMenuSelected, className: headerDropdownMenuItemAccountContainerClassname, onClick: (e) => handleOpenAccountSubmenu({ e, id: team.id }),
|
|
319
|
+
// eslint-disable-next-line no-script-url
|
|
320
|
+
href: "javascript:void(0)", "data-testid": "header-team-switcher-menu-account-accordion" },
|
|
321
|
+
React.createElement("div", { className: headerDropdownMenuItemAccountClassname },
|
|
322
|
+
React.createElement("div", { className: headerDropdownMenuItemTextIconClassname },
|
|
323
|
+
React.createElement("span", { title: team.nameToDisplay, className: headerDropdownMenuItemTextClassname }, team.nameToDisplay),
|
|
324
|
+
isMenuSelected ? (React.createElement(CheckmarkFilled, { className: headerDropdownMenuItemIconClassname })) : null),
|
|
325
|
+
React.createElement("div", { className: headerDropdownMenuItemAccountIconsClassname },
|
|
326
|
+
React.createElement(GroupAccount, { className: headerDropdownMenuItemAccountGroupIconClassname }),
|
|
327
|
+
React.createElement(ChevronDown, { className: headerDropdownMenuItemAccountChevronIconClassname })))),
|
|
328
|
+
React.createElement("div", { id: `${team.id}-account-submenu`, key: `${team.id}-account-submenu`, "aria-expanded": isSubmenuOpen, className: headerDropdownMenuItemAccountSubmenuClassname },
|
|
329
|
+
React.createElement(HeaderMenuItem, { key: `${team.id}-menu-item`, id: `${team.id}-account-menu-item`, "aria-selected": isTeamSelected, className: headerDropdownMenuItemContainerClassname, onClick: () => {
|
|
330
|
+
handleTeamClick({ team, type: "account" });
|
|
331
|
+
}, "data-testid": "header-team-switcher-menu-account-accordion-item",
|
|
332
|
+
// eslint-disable-next-line no-script-url
|
|
333
|
+
href: "javascript:void(0)" },
|
|
334
|
+
React.createElement("div", { className: headerDropdownMenuItemClassname, style: { paddingLeft: "1rem" } },
|
|
335
|
+
React.createElement("span", { title: team.nameToDisplay, className: headerDropdownMenuItemTextClassname }, "Account Page"),
|
|
336
|
+
isTeamSelected ? (React.createElement(CheckmarkFilled, { className: headerDropdownMenuItemIconClassname })) : null)),
|
|
337
|
+
projectTeams && projectTeams.length > 0
|
|
338
|
+
? projectTeams.map((team) => {
|
|
339
|
+
const isTeamSelected = team.id === selectedTeam?.id;
|
|
340
|
+
return (React.createElement("div", { key: team.id, id: `${team.id}-project-menu-item` },
|
|
341
|
+
React.createElement(HeaderMenuItem, { "aria-selected": isTeamSelected, className: headerDropdownMenuItemContainerClassname, onClick: () => {
|
|
342
|
+
handleTeamClick({ team, type: "project" });
|
|
343
|
+
}, "data-testid": "header-team-switcher-menu-account-accordion-item",
|
|
344
|
+
// eslint-disable-next-line no-script-url
|
|
345
|
+
href: "javascript:void(0)" },
|
|
346
|
+
React.createElement("div", { className: headerDropdownMenuItemClassname, style: { paddingLeft: "1rem" } },
|
|
347
|
+
React.createElement("span", { title: team.nameToDisplay, className: headerDropdownMenuItemTextClassname }, team.nameToDisplay),
|
|
348
|
+
isTeamSelected ? (React.createElement(CheckmarkFilled, { className: headerDropdownMenuItemIconClassname })) : null))));
|
|
349
|
+
})
|
|
350
|
+
: null)));
|
|
315
351
|
}
|
|
316
|
-
|
|
317
|
-
React.createElement(
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
React.createElement("div", { className: headerDropdownMenuItemTextIconClassname },
|
|
322
|
-
React.createElement("span", { title: team.nameToDisplay, className: headerDropdownMenuItemTextClassname }, team.nameToDisplay),
|
|
323
|
-
isMenuSelected ? React.createElement(CheckmarkFilled, { className: headerDropdownMenuItemIconClassname }) : null),
|
|
324
|
-
React.createElement("div", { className: headerDropdownMenuItemAccountIconsClassname },
|
|
325
|
-
React.createElement(GroupAccount, { className: headerDropdownMenuItemAccountGroupIconClassname }),
|
|
326
|
-
React.createElement(ChevronDown, { className: headerDropdownMenuItemAccountChevronIconClassname })))),
|
|
327
|
-
React.createElement("div", { id: `${team.id}-account-submenu`, key: `${team.id}-account-submenu`, "aria-expanded": isSubmenuOpen, className: headerDropdownMenuItemAccountSubmenuClassname },
|
|
328
|
-
React.createElement(HeaderMenuItem, { key: `${team.id}-menu-item`, id: `${team.id}-account-menu-item`, "aria-selected": isTeamSelected, className: headerDropdownMenuItemContainerClassname, onClick: () => {
|
|
329
|
-
handleTeamClick({ team, type: "account" });
|
|
330
|
-
}, "data-testid": "header-team-switcher-menu-account-accordion-item",
|
|
352
|
+
else {
|
|
353
|
+
return (React.createElement("div", { key: team.id, id: `${team.id}-${team.type}-menu-item` },
|
|
354
|
+
React.createElement(HeaderMenuItem, { "aria-selected": isTeamSelected, className: headerDropdownMenuItemContainerClassname, onClick: () => {
|
|
355
|
+
handleTeamClick({ team, type: team.type ?? "" });
|
|
356
|
+
}, "data-testid": "header-team-switcher-menu-item",
|
|
331
357
|
// eslint-disable-next-line no-script-url
|
|
332
358
|
href: "javascript:void(0)" },
|
|
333
|
-
React.createElement("div", { className: headerDropdownMenuItemClassname
|
|
334
|
-
React.createElement("span", { title: team.nameToDisplay, className: headerDropdownMenuItemTextClassname },
|
|
335
|
-
isTeamSelected ? React.createElement(CheckmarkFilled, { className: headerDropdownMenuItemIconClassname }) : null))
|
|
336
|
-
|
|
337
|
-
? projectTeams.map((team) => {
|
|
338
|
-
const isTeamSelected = team.id === selectedTeam?.id;
|
|
339
|
-
return (React.createElement("div", { key: team.id, id: `${team.id}-project-menu-item` },
|
|
340
|
-
React.createElement(HeaderMenuItem, { "aria-selected": isTeamSelected, className: headerDropdownMenuItemContainerClassname, onClick: () => {
|
|
341
|
-
handleTeamClick({ team, type: "project" });
|
|
342
|
-
}, "data-testid": "header-team-switcher-menu-account-accordion-item",
|
|
343
|
-
// eslint-disable-next-line no-script-url
|
|
344
|
-
href: "javascript:void(0)" },
|
|
345
|
-
React.createElement("div", { className: headerDropdownMenuItemClassname, style: { paddingLeft: "1rem" } },
|
|
346
|
-
React.createElement("span", { title: team.nameToDisplay, className: headerDropdownMenuItemTextClassname }, team.nameToDisplay),
|
|
347
|
-
isTeamSelected ? (React.createElement(CheckmarkFilled, { className: headerDropdownMenuItemIconClassname })) : null))));
|
|
348
|
-
})
|
|
349
|
-
: null)));
|
|
350
|
-
}
|
|
351
|
-
else {
|
|
352
|
-
return (React.createElement("div", { key: team.id, id: `${team.id}-${team.type}-menu-item` },
|
|
353
|
-
React.createElement(HeaderMenuItem, { "aria-selected": isTeamSelected, className: headerDropdownMenuItemContainerClassname, onClick: () => {
|
|
354
|
-
handleTeamClick({ team, type: team.type ?? "" });
|
|
355
|
-
}, "data-testid": "header-team-switcher-menu-item",
|
|
356
|
-
// eslint-disable-next-line no-script-url
|
|
357
|
-
href: "javascript:void(0)" },
|
|
358
|
-
React.createElement("div", { className: headerDropdownMenuItemClassname },
|
|
359
|
-
React.createElement("span", { title: team.nameToDisplay, className: headerDropdownMenuItemTextClassname }, team.nameToDisplay),
|
|
360
|
-
isTeamSelected ? React.createElement(CheckmarkFilled, { className: headerDropdownMenuItemIconClassname }) : null))));
|
|
359
|
+
React.createElement("div", { className: headerDropdownMenuItemClassname },
|
|
360
|
+
React.createElement("span", { title: team.nameToDisplay, className: headerDropdownMenuItemTextClassname }, team.nameToDisplay),
|
|
361
|
+
isTeamSelected ? React.createElement(CheckmarkFilled, { className: headerDropdownMenuItemIconClassname }) : null))));
|
|
362
|
+
}
|
|
361
363
|
}
|
|
364
|
+
return null;
|
|
362
365
|
})))));
|
|
363
366
|
}
|
|
364
367
|
return null;
|
|
@@ -9,8 +9,12 @@ const CHECKBOX_TYPES = {
|
|
|
9
9
|
const CREATABLE_TYPES = {
|
|
10
10
|
CREATABLE_SINGLE: "creatable-single",
|
|
11
11
|
CREATABLE_SINGLE_NON_DELETABLE: "creatable-single-non-deletable",
|
|
12
|
+
CREATABLE_SINGLE_REORDERABLE: "creatable-single-reorderable",
|
|
13
|
+
CREATABLE_SINGLE_REORDERABLE_NON_DELETABLE: "creatable-single-reorderable-non-deletable",
|
|
12
14
|
CREATABLE_PAIR: "creatable-pair",
|
|
13
15
|
CREATABLE_PAIR_NON_DELETABLE: "creatable-pair-non-deletable",
|
|
16
|
+
CREATABLE_PAIR_REORDERABLE: "creatable-pair-reorderable",
|
|
17
|
+
CREATABLE_PAIR_REORDERABLE_NON_DELETABLE: "creatable-pair-reorderable-non-deletable",
|
|
14
18
|
};
|
|
15
19
|
const DATE_TYPES = {
|
|
16
20
|
DATE: "date",
|
package/dist/types/index.d.ts
CHANGED
|
@@ -658,6 +658,7 @@ type Props$y = {
|
|
|
658
658
|
onChange?: (items: string[]) => void;
|
|
659
659
|
placeholder?: string;
|
|
660
660
|
readOnly?: boolean;
|
|
661
|
+
reorderable?: boolean;
|
|
661
662
|
tagProps?: any;
|
|
662
663
|
tagType?: string;
|
|
663
664
|
textInputProps?: any;
|
|
@@ -672,7 +673,7 @@ type Props$y = {
|
|
|
672
673
|
value?: string | string[];
|
|
673
674
|
values?: string | string[];
|
|
674
675
|
};
|
|
675
|
-
declare function CreatableComponent({ buttonClassName, buttonContent, buttonProps, createKeyValuePair, disabled, id, initialValues: externalInitialValues, invalid, invalidText, helperText, key, keyHelperText, keyLabel, keyLabelText, keyPlaceholder, label, labelText, max, nonDeletable, onKeyBlur, onValueBlur, onInputBlur, onChange, placeholder, tagProps, tagType, textInputProps, tooltipClassName, tooltipContent, tooltipProps, type, valueHelperText, valueLabel, valueLabelText, valuePlaceholder, value: externalValues, values, trimInput, removeOnlyFirst, }: Props$y): React.JSX.Element;
|
|
676
|
+
declare function CreatableComponent({ buttonClassName, buttonContent, buttonProps, createKeyValuePair, disabled, id, initialValues: externalInitialValues, invalid, invalidText, helperText, key, keyHelperText, keyLabel, keyLabelText, keyPlaceholder, label, labelText, max, nonDeletable, onKeyBlur, onValueBlur, onInputBlur, onChange, placeholder, reorderable, tagProps, tagType, textInputProps, tooltipClassName, tooltipContent, tooltipProps, type, valueHelperText, valueLabel, valueLabelText, valuePlaceholder, value: externalValues, values, trimInput, removeOnlyFirst, }: Props$y): React.JSX.Element;
|
|
676
677
|
|
|
677
678
|
type OwnDataDrivenInputProps = {
|
|
678
679
|
id?: string;
|
package/package.json
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@boomerang-io/carbon-addons-boomerang-react",
|
|
3
3
|
"description": "Carbon Addons for Boomerang apps",
|
|
4
|
-
"version": "4.6.21-beta.
|
|
4
|
+
"version": "4.6.21-beta.44",
|
|
5
5
|
"author": {
|
|
6
6
|
"name": "Tim Bula",
|
|
7
7
|
"email": "timrbula@gmail.com"
|
|
8
8
|
},
|
|
9
9
|
"license": "Apache-2",
|
|
10
|
-
"repository": {
|
|
10
|
+
"repository": {
|
|
11
11
|
"type": "git",
|
|
12
12
|
"url": "git@github.com:boomerang-io/carbon-addons-boomerang-react"
|
|
13
13
|
},
|
|
@@ -49,6 +49,9 @@
|
|
|
49
49
|
"dependencies": {
|
|
50
50
|
"@carbon/ibm-products": "2.57.1",
|
|
51
51
|
"@carbon/react": "1.77.0",
|
|
52
|
+
"@dnd-kit/core": "^6.3.1",
|
|
53
|
+
"@dnd-kit/sortable": "^10.0.0",
|
|
54
|
+
"@dnd-kit/utilities": "^3.2.2",
|
|
52
55
|
"@stomp/stompjs": "6.1.2",
|
|
53
56
|
"@tippyjs/react": "4.2.6",
|
|
54
57
|
"classnames": "2.3.2",
|
|
@@ -4,7 +4,6 @@ IBM Confidential
|
|
|
4
4
|
© Copyright IBM Corp. 2022, 2024
|
|
5
5
|
*/
|
|
6
6
|
|
|
7
|
-
|
|
8
7
|
@use "../../global/config" as *;
|
|
9
8
|
.#{$prefix}--bmrg-creatable {
|
|
10
9
|
position: relative;
|
|
@@ -42,6 +41,37 @@ IBM Confidential
|
|
|
42
41
|
width: 100%;
|
|
43
42
|
}
|
|
44
43
|
|
|
44
|
+
.#{$prefix}--bmrg-creatable__tags--reorderable {
|
|
45
|
+
display: flex;
|
|
46
|
+
flex-direction: column;
|
|
47
|
+
margin-top: 0.5rem;
|
|
48
|
+
width: 100%;
|
|
49
|
+
|
|
50
|
+
.cds--tag {
|
|
51
|
+
cursor: grab;
|
|
52
|
+
margin-left: 0;
|
|
53
|
+
min-width: 100%;
|
|
54
|
+
width: 100%;
|
|
55
|
+
|
|
56
|
+
.cds--tag__custom-icon ~ span {
|
|
57
|
+
min-width: calc(100% - 1.25rem);
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.cds--interactive--tag-children {
|
|
61
|
+
max-inline-size: none !important;
|
|
62
|
+
width: 100%;
|
|
63
|
+
|
|
64
|
+
.cds--popover {
|
|
65
|
+
display: none;
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.cds--tag__label {
|
|
70
|
+
min-width: calc(100% - 1.5rem);
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
|
|
45
75
|
.#{$prefix}--bmrg-creatable__tooltip {
|
|
46
76
|
line-height: 0;
|
|
47
77
|
margin-left: 0.5rem;
|