From 2db9f28bad36be41c3bf3ecff684141e6c2624b4 Mon Sep 17 00:00:00 2001 From: fahad-aot Date: Thu, 19 Jun 2025 09:25:27 -0700 Subject: [PATCH 1/3] bugfix/fwf-4843-4663: fixed ui and permission issues in reviewer journey --- .../CustomComponents/AssignUser.tsx | 77 ++++++----- .../CustomComponents/InputDropdown.tsx | 125 +++++++++--------- .../AttributeFIlterModalBody.tsx | 22 +-- .../components/AttributeFilterModal/Notes.tsx | 22 +-- .../TaskFilterModal/SaveFilterTab.tsx | 11 +- .../TaskList/AttributeFilterDropdown.tsx | 25 ++-- forms-flow-theme/scss/_card.scss | 4 +- forms-flow-theme/scss/_forms.scss | 1 + forms-flow-theme/scss/_table.scss | 4 +- 9 files changed, 148 insertions(+), 143 deletions(-) diff --git a/forms-flow-components/src/components/CustomComponents/AssignUser.tsx b/forms-flow-components/src/components/CustomComponents/AssignUser.tsx index e7c9be5f5..f7ecc3d14 100644 --- a/forms-flow-components/src/components/CustomComponents/AssignUser.tsx +++ b/forms-flow-components/src/components/CustomComponents/AssignUser.tsx @@ -70,14 +70,19 @@ export const AssignUser: React.FC = ({ const handleMeClick = () => { - const name = username ?? userData?.preferred_username; - setSelected("Me"); - setSelectedName(name); - meOnClick?.(); - if(!username){ - setSelectedName(`${userData.family_name}, ${userData.given_name}`); - } - }; + const defaultName = userData?.preferred_username; + const fullName = userData?.family_name && userData?.given_name + ? `${userData.family_name}, ${userData.given_name}` + : defaultName; + + const name = username ?? fullName; + + setSelected("Me"); + setSelectedName(name); + + meOnClick?.(); +}; + const handleOthersClick = () => { setSelected("Others"); @@ -91,28 +96,38 @@ export const AssignUser: React.FC = ({ handleCloseClick?.(); }; -const dropdownOptions = useMemo(() => { - if (Array.isArray(users)) { - return users.map((user) => { - const fullName = getDisplayName(user); - const label = user.email ? `${fullName} (${user.email})` : fullName; - return { - label, - value: user.id, - onClick: () => { - setSelectedName(fullName); - optionSelect?.(user.username); - setOpenDropdown(false); - }, - }; - }); - } - return []; -}, [users, optionSelect]); - - - const showSelector = selected === null; +const showSelector = selected === null; const selectedOption = selected === "Me" ? selectedName : undefined; + //show close icons based on the user permissions + const assignedToCurrentUser = + selectedOption === userData.preferred_username || + selectedOption === `${userData.family_name}, ${userData.given_name}`; + + const showCloseIcon = (assignedToCurrentUser && manageMyTasks) ||(!assignedToCurrentUser && assignToOthers); + + +const dropdownOptions = useMemo(() => { + if (!Array.isArray(users)) return []; + + const filteredUsers = (!assignedToCurrentUser && manageMyTasks &&!assignToOthers) + ? users.filter((user) => user.id === userData.sub) + : users; + + return filteredUsers.map((user) => { + const fullName = getDisplayName(user); + const label = user.email ? `${fullName} (${user.email})` : fullName; + return { + label, + value: user.id, + onClick: () => { + setSelectedName(fullName); + optionSelect?.(user.username); + setOpenDropdown(false); + }, + }; + }); +}, [users, optionSelect, assignedToCurrentUser, userData]); + return ( <> @@ -142,8 +157,10 @@ const dropdownOptions = useMemo(() => { )} {/* Show InputDropdown when either Me or Others is selected */} - {(selected === "Me" || selected === "Others") && ( + {(selected === "Me" || selected === "Others") && ( void; openByDefault?: boolean; + showCloseIcon?: boolean; + hideDropDownList?: boolean; } export const InputDropdown: React.FC = ({ @@ -55,6 +57,8 @@ export const InputDropdown: React.FC = ({ variant, handleCloseClick, openByDefault = false, + showCloseIcon = true, + hideDropDownList = false, }) => { const { t } = useTranslation(); const primaryColor = StyleServices.getCSSVariable('--ff-primary'); @@ -160,13 +164,13 @@ useEffect(() => { const renderIcon = () => { // Only show CloseIcon when variant is present AND inputValue exists if (variant && inputValue) { - return ; + height={9}/> } else { // Default to ChevronIcon in all other cases return { const isItemSelected = (item: DropdownItem) => { return item.label === inputValue || item.value === selectedOption; }; - return (
- {textBoxInput ? ( - - + } - className="input-with-close" - label={t(dropdownLabel)} - feedback={t(feedback)} - variant={variant} - /> - - ) : ( - - - + className="input-with-close" + label={t(dropdownLabel)} + feedback={t(feedback)} + variant={variant} + /> + + ) : ( + + + + )} + + {!textBoxInput && isDropdownOpen && !disabled && !hideDropDownList && ( + + {isAllowInput && ( + + {t(firstItemLabel)} + )} - - {!textBoxInput && isDropdownOpen && !disabled && ( - - {isAllowInput && ( - - {t(firstItemLabel)} - - )} {(filteredItems.length > 0 ? filteredItems : Options).map((item, index) => ( - handleSelect(item)} - data-testid={`list-${index}-item`} - aria-label={`list-${item.label}-item`} + handleSelect(item)} + data-testid={`list-${index}-item`} + aria-label={`list-${item.label}-item`} className={`${isItemSelected(item) ? 'selected-dropdown-item' : ''}`} - > - {t(item.label)} - + > + {t(item.label)} + ))} - - )} -
+ + )} + ); }; diff --git a/forms-flow-review/src/components/AttributeFilterModal/AttributeFIlterModalBody.tsx b/forms-flow-review/src/components/AttributeFilterModal/AttributeFIlterModalBody.tsx index beb32ec4c..eaf1cf832 100644 --- a/forms-flow-review/src/components/AttributeFilterModal/AttributeFIlterModalBody.tsx +++ b/forms-flow-review/src/components/AttributeFilterModal/AttributeFIlterModalBody.tsx @@ -33,7 +33,7 @@ const AttributeFilterModalBody = ({ onClose, toggleUpdateModal, updateSuccess, t const { t } = useTranslation(); const dispatch = useDispatch(); const filterNameLength = 50; - const { manageAllFilters } = userRoles(); + const { manageAllFilters,createFilters } = userRoles(); const baseColor = StyleServices.getCSSVariable("--ff-primary"); const whiteColor = StyleServices.getCSSVariable("--ff-white"); @@ -111,19 +111,9 @@ const AttributeFilterModalBody = ({ onClose, toggleUpdateModal, updateSuccess, t /* ---------------------------- access management --------------------------- */ - const isCreator = - attributeFilter?.createdBy === userDetails?.preferred_username; const createdByMe = attributeFilter?.createdBy === userDetails?.preferred_username; - const publicAccess = - attributeFilter?.roles?.length === 0 && - attributeFilter?.users?.length === 0; - const roleAccess = attributeFilter?.roles?.some((role) => - userDetails.groups.includes(role) - ); - const canAccess = roleAccess || publicAccess || createdByMe; - const viewOnly = !manageAllFilters && canAccess; - const editRole = manageAllFilters && canAccess; + const editRole = manageAllFilters || (createdByMe && createFilters); /* ---------------------------- get users groups ---------------------------- */ useEffect(() => { @@ -389,7 +379,7 @@ const createFilterShareOption = (labelKey, value) => ({ } const renderActionButtons = () => { if (attributeFilter?.id) { - if (canAccess && manageAllFilters) { + if (editRole ) { return (
({ return null; } - if (manageAllFilters) { + if (createFilters ) { return (
({
{renderActionButtons()} diff --git a/forms-flow-review/src/components/AttributeFilterModal/Notes.tsx b/forms-flow-review/src/components/AttributeFilterModal/Notes.tsx index 363db11c0..98b86bd2d 100644 --- a/forms-flow-review/src/components/AttributeFilterModal/Notes.tsx +++ b/forms-flow-review/src/components/AttributeFilterModal/Notes.tsx @@ -3,7 +3,7 @@ import { useTranslation } from "react-i18next"; import { useSelector } from "react-redux"; import { RootState } from "../../reducers"; -const RenderOwnerShipNotes = ({isCreator, viewOnly, editRole, attributeFilter}) => { +const RenderOwnerShipNotes = ({isCreator, attributeFilter}) => { const { t } = useTranslation(); const isUnsavedFilter = useSelector((state:RootState)=>state.task.isUnsavedFilter); @@ -35,9 +35,10 @@ const RenderOwnerShipNotes = ({isCreator, viewOnly, editRole, attributeFilter}) ); } - if (viewOnly) { + if (!isCreator) { return ( - + - ); - } - - if (editRole) { - return ( -
-
); } - return null; }; diff --git a/forms-flow-review/src/components/TaskFilterModal/SaveFilterTab.tsx b/forms-flow-review/src/components/TaskFilterModal/SaveFilterTab.tsx index 85266555e..266108232 100644 --- a/forms-flow-review/src/components/TaskFilterModal/SaveFilterTab.tsx +++ b/forms-flow-review/src/components/TaskFilterModal/SaveFilterTab.tsx @@ -102,7 +102,7 @@ const SaveFilterTab = ({ ); } - if (createdByMe) { + if (createdByMe && createFilters) { return ( <>
@@ -138,7 +138,7 @@ const SaveFilterTab = ({ ); } - if (editRole) { + if (manageAllFilters && !createdByMe) { return ( <>
@@ -240,7 +240,6 @@ const SaveFilterTab = ({ } return null; }; - return ( <>
@@ -267,7 +266,7 @@ const SaveFilterTab = ({ dataTestIdforDropdown="share-filter-options" selectedOption={shareFilter} setNewInput={setShareFilter} - disabled={!editRole} + disabled={filterToEdit && !editRole} /> {shareFilter === SPECIFIC_USER_OR_GROUP && (
@@ -281,7 +280,7 @@ const SaveFilterTab = ({ dataTestIdforDropdown="candidate-options" selectedOption={shareFilterForSpecificRole} setNewInput={setShareFilterForSpecificRole} - disabled={!editRole} + disabled={ filterToEdit &&!editRole} />
)} diff --git a/forms-flow-review/src/components/TaskList/AttributeFilterDropdown.tsx b/forms-flow-review/src/components/TaskList/AttributeFilterDropdown.tsx index dc5a09590..e797dc7f2 100644 --- a/forms-flow-review/src/components/TaskList/AttributeFilterDropdown.tsx +++ b/forms-flow-review/src/components/TaskList/AttributeFilterDropdown.tsx @@ -10,10 +10,13 @@ import { import AttributeFilterModal from "../AttributeFilterModal/AttributeFilterModal"; import { fetchServiceTaskList } from "../../api/services/filterServices"; import { cloneDeep } from "lodash"; +import { userRoles } from "../../helper/permissions"; const AttributeFilterDropdown = () => { const { t } = useTranslation(); const dispatch = useDispatch(); + const { createFilters } = userRoles(); + const selectedAttributeFilter = useSelector( (state: RootState) => state.task?.selectedAttributeFilter ); @@ -81,7 +84,10 @@ const AttributeFilterDropdown = () => { const attributeItems = Array.isArray(attributeFilterList) && attributeFilterList.length > 0 ? attributeFilterList.map((filter) => ({ - className: filter?.id === selectedAttributeFilter?.id ? "selected-filter-item" : "", + className: + filter?.id === selectedAttributeFilter?.id + ? "selected-filter-item" + : "", content: `${t(filter.name)}`, onClick: () => changeAttributeFilterSelection(filter), type: String(filter.id), @@ -137,16 +143,17 @@ const AttributeFilterDropdown = () => { }; let options = []; if (attributeItems.length) { - options = [ - clearAttributeFilter, - ...attributeItems, - customAttribute, - reorderOption, - ]; + options = [clearAttributeFilter, ...attributeItems]; + //If only createFilters is there then only push custom attribute filter and reorder option + if (createFilters) { + options.push(customAttribute, reorderOption); + } } else { - options = [noAttributeFilter, customAttribute]; + options = [noAttributeFilter]; + if (createFilters) { + options.push(customAttribute); + } } - return options; }; diff --git a/forms-flow-theme/scss/_card.scss b/forms-flow-theme/scss/_card.scss index 0224aeac9..8536a853e 100644 --- a/forms-flow-theme/scss/_card.scss +++ b/forms-flow-theme/scss/_card.scss @@ -82,7 +82,9 @@ $gray-darkest: var(--ff-gray-darkest); line-height: var(--text-line-height); } } - +.task-details-view{ + padding: var(--spacer-250) var(--spacer-150) var(--spacer-250) var(--spacer-150) !important; +} .white-text { color: var(--ff-white) !important; } diff --git a/forms-flow-theme/scss/_forms.scss b/forms-flow-theme/scss/_forms.scss index 511d6f114..0d429c429 100644 --- a/forms-flow-theme/scss/_forms.scss +++ b/forms-flow-theme/scss/_forms.scss @@ -140,6 +140,7 @@ select option:hover { border: 2px solid $primary; background: var(--ff-white); color: var(--default-font-color) !important; + padding-right: 2rem !important; } &.is-searching { diff --git a/forms-flow-theme/scss/_table.scss b/forms-flow-theme/scss/_table.scss index 722e3da5a..323854bf8 100644 --- a/forms-flow-theme/scss/_table.scss +++ b/forms-flow-theme/scss/_table.scss @@ -314,7 +314,7 @@ $white-color: var(--ff-white); padding: var(--spacer-050) var(--spacer-075); font-weight: var(--font-weight-xl); font-size: var(--font-size-xs); - line-height: 90%; //To be updated .actually it is 120% + line-height: 120%; user-select: none; background-color: var(--ff-body-bg); border-left: 1px solid var(--ff-gray-medium-dark); @@ -357,6 +357,7 @@ $white-color: var(--ff-white); vertical-align: middle; .empty-table-message{ border-left: none !important; + float: left; } } } @@ -369,6 +370,7 @@ $white-color: var(--ff-white); gap: var(--spacer-100); color: var(--ff-gray-medium-dark); overflow: visible !important; + float: left; &:hover { border: none !important; } From 6c3760f54402bf0c3c32072a47005cb6ba260a63 Mon Sep 17 00:00:00 2001 From: fahad-aot Date: Fri, 20 Jun 2025 04:02:23 -0700 Subject: [PATCH 2/3] updated --- forms-flow-components/package-lock.json | 367 ++++++++++++++++++++++++ forms-flow-components/package.json | 1 + 2 files changed, 368 insertions(+) diff --git a/forms-flow-components/package-lock.json b/forms-flow-components/package-lock.json index ba6df3718..79f6629f8 100644 --- a/forms-flow-components/package-lock.json +++ b/forms-flow-components/package-lock.json @@ -12,6 +12,7 @@ "@types/react-dom": "^17.0.9", "@types/systemjs": "^6.1.1", "@types/webpack-env": "^1.16.2", + "bpmn-js": "^18.6.2", "multiselect-react-dropdown": "^2.0.25", "react-loading-skeleton": "^3.5.0", "single-spa": "^5.9.3", @@ -1946,6 +1947,16 @@ "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==", "dev": true }, + "node_modules/@bpmn-io/diagram-js-ui": { + "version": "0.2.3", + "resolved": "https://registry.npmjs.org/@bpmn-io/diagram-js-ui/-/diagram-js-ui-0.2.3.tgz", + "integrity": "sha512-OGyjZKvGK8tHSZ0l7RfeKhilGoOGtFDcoqSGYkX0uhFlo99OVZ9Jn1K7TJGzcE9BdKwvA5Y5kGqHEhdTxHvFfw==", + "license": "MIT", + "dependencies": { + "htm": "^3.1.1", + "preact": "^10.11.2" + } + }, "node_modules/@discoveryjs/json-ext": { "version": "0.5.7", "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz", @@ -4671,6 +4682,39 @@ "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==", "dev": true }, + "node_modules/bpmn-js": { + "version": "18.6.2", + "resolved": "https://registry.npmjs.org/bpmn-js/-/bpmn-js-18.6.2.tgz", + "integrity": "sha512-3C+ktypiJKTco5U6GmZ3FTqcy2o7KwWY0W1KlNon39tW3RInPqJ3W48impd8cFkZ/9QmvITN99NoZjSBu4JFgw==", + "license": "SEE LICENSE IN LICENSE", + "dependencies": { + "bpmn-moddle": "^9.0.1", + "diagram-js": "^15.3.0", + "diagram-js-direct-editing": "^3.2.0", + "ids": "^1.0.5", + "inherits-browser": "^0.1.0", + "min-dash": "^4.1.1", + "min-dom": "^4.2.1", + "tiny-svg": "^3.1.2" + }, + "engines": { + "node": "*" + } + }, + "node_modules/bpmn-moddle": { + "version": "9.0.2", + "resolved": "https://registry.npmjs.org/bpmn-moddle/-/bpmn-moddle-9.0.2.tgz", + "integrity": "sha512-HXWMJ+UZSm2PeBS9FuY713AB6Pjwbzp6l2ncWdUpuPrQVGdtcsS/FIK5P3CVQKR8LYrf0BUaM+ID+0Xu7PdsIw==", + "license": "MIT", + "dependencies": { + "min-dash": "^4.2.1", + "moddle": "^7.0.0", + "moddle-xml": "^11.0.0" + }, + "engines": { + "node": ">= 18" + } + }, "node_modules/brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -4938,6 +4982,15 @@ "node": ">=6" } }, + "node_modules/clsx": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", + "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==", + "license": "MIT", + "engines": { + "node": ">=6" + } + }, "node_modules/co": { "version": "4.6.0", "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz", @@ -4999,6 +5052,12 @@ "integrity": "sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==", "dev": true }, + "node_modules/component-event": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/component-event/-/component-event-0.2.1.tgz", + "integrity": "sha512-wGA++isMqiDq1jPYeyv2as/Bt/u+3iLW0rEa+8NQ82jAv3TgqMiCM+B2SaBdn2DfLilLjjq736YcezihRYhfxw==", + "license": "MIT" + }, "node_modules/compressible": { "version": "2.0.18", "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.18.tgz", @@ -5679,6 +5738,51 @@ "integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==", "dev": true }, + "node_modules/diagram-js": { + "version": "15.3.0", + "resolved": "https://registry.npmjs.org/diagram-js/-/diagram-js-15.3.0.tgz", + "integrity": "sha512-Fjq+C8Bee2DhX9N3jpIUIhbqvSbP6oMD75n+y5UChcr34buApZFO+fXsv8a/SlW+tci+6nvc71vf17TBY/RJVg==", + "license": "MIT", + "dependencies": { + "@bpmn-io/diagram-js-ui": "^0.2.3", + "clsx": "^2.1.0", + "didi": "^10.2.2", + "inherits-browser": "^0.1.0", + "min-dash": "^4.1.0", + "min-dom": "^4.2.1", + "object-refs": "^0.4.0", + "path-intersection": "^3.0.0", + "tiny-svg": "^3.1.2" + }, + "engines": { + "node": "*" + } + }, + "node_modules/diagram-js-direct-editing": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/diagram-js-direct-editing/-/diagram-js-direct-editing-3.2.0.tgz", + "integrity": "sha512-+pyxeQGBSdLiZX0/tmmsm2qZSvm9YtVzod5W3RMHSTR7VrkUMD6E7EX/W9JQv3ebxO7oIdqFmytmNDDpSHnYEw==", + "license": "MIT", + "dependencies": { + "min-dash": "^4.0.0", + "min-dom": "^4.2.1" + }, + "engines": { + "node": "*" + }, + "peerDependencies": { + "diagram-js": "*" + } + }, + "node_modules/didi": { + "version": "10.2.2", + "resolved": "https://registry.npmjs.org/didi/-/didi-10.2.2.tgz", + "integrity": "sha512-l8NYkYFXV1izHI65EyT8EXOjUZtKmQkHLTT89cSP7HU5J/G7AOj0dXKtLc04EXYlga99PBY18IPjOeZ+c3DI4w==", + "license": "MIT", + "engines": { + "node": ">= 16" + } + }, "node_modules/diff-sequences": { "version": "29.6.3", "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-29.6.3.tgz", @@ -5800,6 +5904,15 @@ "url": "https://github.com/fb55/domhandler?sponsor=1" } }, + "node_modules/domify": { + "version": "1.4.2", + "resolved": "https://registry.npmjs.org/domify/-/domify-1.4.2.tgz", + "integrity": "sha512-m4yreHcUWHBncGVV7U+yQzc12vIlq0jMrtHZ5mW6dQMiL/7skSYNVX9wqKwOtyO9SGCgevrAFEgOCAHmamHTUA==", + "license": "MIT", + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/domutils": { "version": "2.8.0", "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz", @@ -7689,6 +7802,12 @@ "safe-buffer": "~5.1.0" } }, + "node_modules/htm": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/htm/-/htm-3.1.1.tgz", + "integrity": "sha512-983Vyg8NwUE7JkZ6NmOqpCZ+sh1bKv2iYTlUkzlWmA5JD2acKoxd4KVxbMmxX/85mtfdnDmTFoNKcg5DGAvxNQ==", + "license": "Apache-2.0" + }, "node_modules/html-encoding-sniffer": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-2.0.1.tgz", @@ -7984,6 +8103,12 @@ "node": ">=4" } }, + "node_modules/ids": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/ids/-/ids-1.0.5.tgz", + "integrity": "sha512-XQ0yom/4KWTL29sLG+tyuycy7UmeaM/79GRtSJq6IG9cJGIPeBz5kwDCguie3TwxaMNIc3WtPi0cTa1XYHicpw==", + "license": "MIT" + }, "node_modules/ignore": { "version": "4.0.6", "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz", @@ -8078,6 +8203,12 @@ "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==", "dev": true }, + "node_modules/inherits-browser": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/inherits-browser/-/inherits-browser-0.1.0.tgz", + "integrity": "sha512-CJHHvW3jQ6q7lzsXPpapLdMx5hDpSF3FSh45pwsj6bKxJJ8Nl8v43i5yXnr3BdfOimGHKyniewQtnAIp3vyJJw==", + "license": "ISC" + }, "node_modules/internal-slot": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.7.tgz", @@ -11314,6 +11445,23 @@ "node": ">=6" } }, + "node_modules/min-dash": { + "version": "4.2.3", + "resolved": "https://registry.npmjs.org/min-dash/-/min-dash-4.2.3.tgz", + "integrity": "sha512-VLMYQI5+FcD9Ad24VcB08uA83B07OhueAlZ88jBK6PyupTvEJwllTMUqMy0wPGYs7pZUEtEEMWdHB63m3LtEcg==", + "license": "MIT" + }, + "node_modules/min-dom": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/min-dom/-/min-dom-4.2.1.tgz", + "integrity": "sha512-TMoL8SEEIhUWYgkj7XMSgxmwSyGI+4fP2KFFGnN3FbHfbGHVdsLYSz8LoIsgPhz4dWRmLvxWWSMgzZMJW5sZuA==", + "license": "MIT", + "dependencies": { + "component-event": "^0.2.1", + "domify": "^1.4.1", + "min-dash": "^4.2.1" + } + }, "node_modules/min-indent": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz", @@ -11362,6 +11510,31 @@ "mkdirp": "bin/cmd.js" } }, + "node_modules/moddle": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/moddle/-/moddle-7.2.0.tgz", + "integrity": "sha512-x1+JREThy7JBOBR3g2hbOnOfrlC/YAWXX9RzrSZS5HhqeuBly9H/PCtOBtcQs+Y2sjRAXF+WTNSgHvn8Uq+6Yw==", + "license": "MIT", + "dependencies": { + "min-dash": "^4.2.1" + } + }, + "node_modules/moddle-xml": { + "version": "11.0.0", + "resolved": "https://registry.npmjs.org/moddle-xml/-/moddle-xml-11.0.0.tgz", + "integrity": "sha512-L3Sseepfcq9Uy0iIfqEDTXSoYLva1Y/JGbN/4AMOeQ6cqbu8Ma/SDJIdOFm7smsAa64j2z3SwCGG3FIilQVnUg==", + "license": "MIT", + "dependencies": { + "min-dash": "^4.0.0", + "saxen": "^10.0.0" + }, + "engines": { + "node": ">= 18" + }, + "peerDependencies": { + "moddle": ">= 6.2.0" + } + }, "node_modules/mri": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz", @@ -11567,6 +11740,15 @@ "node": ">= 0.4" } }, + "node_modules/object-refs": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/object-refs/-/object-refs-0.4.0.tgz", + "integrity": "sha512-6kJqKWryKZmtte6QYvouas0/EIJKPI1/MMIuRsiBlNuhIMfqYTggzX2F1AJ2+cDs288xyi9GL7FyasHINR98BQ==", + "license": "MIT", + "engines": { + "node": "*" + } + }, "node_modules/object.assign": { "version": "4.1.5", "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.5.tgz", @@ -11843,6 +12025,15 @@ "node": ">=8" } }, + "node_modules/path-intersection": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/path-intersection/-/path-intersection-3.1.0.tgz", + "integrity": "sha512-3xS3lvv/vuwm5aH2BVvNRvnvwR2Drde7jQClKpCXTYXIMMjcw/EnMhzCgeHwqbCpzi760PEfAkU53vSIlrNr9A==", + "license": "MIT", + "engines": { + "node": ">= 14.20" + } + }, "node_modules/path-is-absolute": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz", @@ -12036,6 +12227,16 @@ "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==", "dev": true }, + "node_modules/preact": { + "version": "10.26.9", + "resolved": "https://registry.npmjs.org/preact/-/preact-10.26.9.tgz", + "integrity": "sha512-SSjF9vcnF27mJK1XyFMNJzFd5u3pQiATFqoaDy03XuN00u4ziveVVEGt5RKJrDR8MHE/wJo9Nnad56RLzS2RMA==", + "license": "MIT", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/preact" + } + }, "node_modules/prelude-ls": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz", @@ -12957,6 +13158,15 @@ } } }, + "node_modules/saxen": { + "version": "10.0.0", + "resolved": "https://registry.npmjs.org/saxen/-/saxen-10.0.0.tgz", + "integrity": "sha512-RXsmWok/SAWqOG/f5ADEz51DN9WtZEzqih3e08ranldcaXekxjx8NBKjGh/y5hlowjo0JH/LekBu6gtPFD1G6g==", + "license": "MIT", + "engines": { + "node": ">= 18" + } + }, "node_modules/saxes": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/saxes/-/saxes-5.0.1.tgz", @@ -13927,6 +14137,12 @@ "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==", "dev": true }, + "node_modules/tiny-svg": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/tiny-svg/-/tiny-svg-3.1.3.tgz", + "integrity": "sha512-9mwnPqXInRsBmH/DO6NMxBE++9LsqpVXQSSTZGc5bomoKKvL5OX/Hlotw7XVXP6XLRcHWIzZpxfovGqWKgCypQ==", + "license": "MIT" + }, "node_modules/tmpl": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz", @@ -16568,6 +16784,15 @@ "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==", "dev": true }, + "@bpmn-io/diagram-js-ui": { + "version": "0.2.3", + "resolved": "https://registry.npmjs.org/@bpmn-io/diagram-js-ui/-/diagram-js-ui-0.2.3.tgz", + "integrity": "sha512-OGyjZKvGK8tHSZ0l7RfeKhilGoOGtFDcoqSGYkX0uhFlo99OVZ9Jn1K7TJGzcE9BdKwvA5Y5kGqHEhdTxHvFfw==", + "requires": { + "htm": "^3.1.1", + "preact": "^10.11.2" + } + }, "@discoveryjs/json-ext": { "version": "0.5.7", "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz", @@ -18765,6 +18990,31 @@ "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==", "dev": true }, + "bpmn-js": { + "version": "18.6.2", + "resolved": "https://registry.npmjs.org/bpmn-js/-/bpmn-js-18.6.2.tgz", + "integrity": "sha512-3C+ktypiJKTco5U6GmZ3FTqcy2o7KwWY0W1KlNon39tW3RInPqJ3W48impd8cFkZ/9QmvITN99NoZjSBu4JFgw==", + "requires": { + "bpmn-moddle": "^9.0.1", + "diagram-js": "^15.3.0", + "diagram-js-direct-editing": "^3.2.0", + "ids": "^1.0.5", + "inherits-browser": "^0.1.0", + "min-dash": "^4.1.1", + "min-dom": "^4.2.1", + "tiny-svg": "^3.1.2" + } + }, + "bpmn-moddle": { + "version": "9.0.2", + "resolved": "https://registry.npmjs.org/bpmn-moddle/-/bpmn-moddle-9.0.2.tgz", + "integrity": "sha512-HXWMJ+UZSm2PeBS9FuY713AB6Pjwbzp6l2ncWdUpuPrQVGdtcsS/FIK5P3CVQKR8LYrf0BUaM+ID+0Xu7PdsIw==", + "requires": { + "min-dash": "^4.2.1", + "moddle": "^7.0.0", + "moddle-xml": "^11.0.0" + } + }, "brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -18950,6 +19200,11 @@ "shallow-clone": "^3.0.0" } }, + "clsx": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", + "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==" + }, "co": { "version": "4.6.0", "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz", @@ -19004,6 +19259,11 @@ "integrity": "sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==", "dev": true }, + "component-event": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/component-event/-/component-event-0.2.1.tgz", + "integrity": "sha512-wGA++isMqiDq1jPYeyv2as/Bt/u+3iLW0rEa+8NQ82jAv3TgqMiCM+B2SaBdn2DfLilLjjq736YcezihRYhfxw==" + }, "compressible": { "version": "2.0.18", "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.18.tgz", @@ -19502,6 +19762,36 @@ "integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==", "dev": true }, + "diagram-js": { + "version": "15.3.0", + "resolved": "https://registry.npmjs.org/diagram-js/-/diagram-js-15.3.0.tgz", + "integrity": "sha512-Fjq+C8Bee2DhX9N3jpIUIhbqvSbP6oMD75n+y5UChcr34buApZFO+fXsv8a/SlW+tci+6nvc71vf17TBY/RJVg==", + "requires": { + "@bpmn-io/diagram-js-ui": "^0.2.3", + "clsx": "^2.1.0", + "didi": "^10.2.2", + "inherits-browser": "^0.1.0", + "min-dash": "^4.1.0", + "min-dom": "^4.2.1", + "object-refs": "^0.4.0", + "path-intersection": "^3.0.0", + "tiny-svg": "^3.1.2" + } + }, + "diagram-js-direct-editing": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/diagram-js-direct-editing/-/diagram-js-direct-editing-3.2.0.tgz", + "integrity": "sha512-+pyxeQGBSdLiZX0/tmmsm2qZSvm9YtVzod5W3RMHSTR7VrkUMD6E7EX/W9JQv3ebxO7oIdqFmytmNDDpSHnYEw==", + "requires": { + "min-dash": "^4.0.0", + "min-dom": "^4.2.1" + } + }, + "didi": { + "version": "10.2.2", + "resolved": "https://registry.npmjs.org/didi/-/didi-10.2.2.tgz", + "integrity": "sha512-l8NYkYFXV1izHI65EyT8EXOjUZtKmQkHLTT89cSP7HU5J/G7AOj0dXKtLc04EXYlga99PBY18IPjOeZ+c3DI4w==" + }, "diff-sequences": { "version": "29.6.3", "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-29.6.3.tgz", @@ -19594,6 +19884,11 @@ "domelementtype": "^2.2.0" } }, + "domify": { + "version": "1.4.2", + "resolved": "https://registry.npmjs.org/domify/-/domify-1.4.2.tgz", + "integrity": "sha512-m4yreHcUWHBncGVV7U+yQzc12vIlq0jMrtHZ5mW6dQMiL/7skSYNVX9wqKwOtyO9SGCgevrAFEgOCAHmamHTUA==" + }, "domutils": { "version": "2.8.0", "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz", @@ -21039,6 +21334,11 @@ } } }, + "htm": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/htm/-/htm-3.1.1.tgz", + "integrity": "sha512-983Vyg8NwUE7JkZ6NmOqpCZ+sh1bKv2iYTlUkzlWmA5JD2acKoxd4KVxbMmxX/85mtfdnDmTFoNKcg5DGAvxNQ==" + }, "html-encoding-sniffer": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-2.0.1.tgz", @@ -21237,6 +21537,11 @@ "harmony-reflect": "^1.4.6" } }, + "ids": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/ids/-/ids-1.0.5.tgz", + "integrity": "sha512-XQ0yom/4KWTL29sLG+tyuycy7UmeaM/79GRtSJq6IG9cJGIPeBz5kwDCguie3TwxaMNIc3WtPi0cTa1XYHicpw==" + }, "ignore": { "version": "4.0.6", "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz", @@ -21305,6 +21610,11 @@ "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==", "dev": true }, + "inherits-browser": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/inherits-browser/-/inherits-browser-0.1.0.tgz", + "integrity": "sha512-CJHHvW3jQ6q7lzsXPpapLdMx5hDpSF3FSh45pwsj6bKxJJ8Nl8v43i5yXnr3BdfOimGHKyniewQtnAIp3vyJJw==" + }, "internal-slot": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.7.tgz", @@ -23706,6 +24016,21 @@ "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==", "dev": true }, + "min-dash": { + "version": "4.2.3", + "resolved": "https://registry.npmjs.org/min-dash/-/min-dash-4.2.3.tgz", + "integrity": "sha512-VLMYQI5+FcD9Ad24VcB08uA83B07OhueAlZ88jBK6PyupTvEJwllTMUqMy0wPGYs7pZUEtEEMWdHB63m3LtEcg==" + }, + "min-dom": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/min-dom/-/min-dom-4.2.1.tgz", + "integrity": "sha512-TMoL8SEEIhUWYgkj7XMSgxmwSyGI+4fP2KFFGnN3FbHfbGHVdsLYSz8LoIsgPhz4dWRmLvxWWSMgzZMJW5sZuA==", + "requires": { + "component-event": "^0.2.1", + "domify": "^1.4.1", + "min-dash": "^4.2.1" + } + }, "min-indent": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz", @@ -23742,6 +24067,23 @@ "minimist": "^1.2.6" } }, + "moddle": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/moddle/-/moddle-7.2.0.tgz", + "integrity": "sha512-x1+JREThy7JBOBR3g2hbOnOfrlC/YAWXX9RzrSZS5HhqeuBly9H/PCtOBtcQs+Y2sjRAXF+WTNSgHvn8Uq+6Yw==", + "requires": { + "min-dash": "^4.2.1" + } + }, + "moddle-xml": { + "version": "11.0.0", + "resolved": "https://registry.npmjs.org/moddle-xml/-/moddle-xml-11.0.0.tgz", + "integrity": "sha512-L3Sseepfcq9Uy0iIfqEDTXSoYLva1Y/JGbN/4AMOeQ6cqbu8Ma/SDJIdOFm7smsAa64j2z3SwCGG3FIilQVnUg==", + "requires": { + "min-dash": "^4.0.0", + "saxen": "^10.0.0" + } + }, "mri": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz", @@ -23891,6 +24233,11 @@ "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==", "dev": true }, + "object-refs": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/object-refs/-/object-refs-0.4.0.tgz", + "integrity": "sha512-6kJqKWryKZmtte6QYvouas0/EIJKPI1/MMIuRsiBlNuhIMfqYTggzX2F1AJ2+cDs288xyi9GL7FyasHINR98BQ==" + }, "object.assign": { "version": "4.1.5", "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.5.tgz", @@ -24095,6 +24442,11 @@ "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==", "dev": true }, + "path-intersection": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/path-intersection/-/path-intersection-3.1.0.tgz", + "integrity": "sha512-3xS3lvv/vuwm5aH2BVvNRvnvwR2Drde7jQClKpCXTYXIMMjcw/EnMhzCgeHwqbCpzi760PEfAkU53vSIlrNr9A==" + }, "path-is-absolute": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz", @@ -24221,6 +24573,11 @@ "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==", "dev": true }, + "preact": { + "version": "10.26.9", + "resolved": "https://registry.npmjs.org/preact/-/preact-10.26.9.tgz", + "integrity": "sha512-SSjF9vcnF27mJK1XyFMNJzFd5u3pQiATFqoaDy03XuN00u4ziveVVEGt5RKJrDR8MHE/wJo9Nnad56RLzS2RMA==" + }, "prelude-ls": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz", @@ -24893,6 +25250,11 @@ "neo-async": "^2.6.2" } }, + "saxen": { + "version": "10.0.0", + "resolved": "https://registry.npmjs.org/saxen/-/saxen-10.0.0.tgz", + "integrity": "sha512-RXsmWok/SAWqOG/f5ADEz51DN9WtZEzqih3e08ranldcaXekxjx8NBKjGh/y5hlowjo0JH/LekBu6gtPFD1G6g==" + }, "saxes": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/saxes/-/saxes-5.0.1.tgz", @@ -25646,6 +26008,11 @@ "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==", "dev": true }, + "tiny-svg": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/tiny-svg/-/tiny-svg-3.1.3.tgz", + "integrity": "sha512-9mwnPqXInRsBmH/DO6NMxBE++9LsqpVXQSSTZGc5bomoKKvL5OX/Hlotw7XVXP6XLRcHWIzZpxfovGqWKgCypQ==" + }, "tmpl": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz", diff --git a/forms-flow-components/package.json b/forms-flow-components/package.json index 5c577c7c5..4b9c1de19 100644 --- a/forms-flow-components/package.json +++ b/forms-flow-components/package.json @@ -63,6 +63,7 @@ "@types/react-dom": "^17.0.9", "@types/systemjs": "^6.1.1", "@types/webpack-env": "^1.16.2", + "bpmn-js": "^18.6.2", "multiselect-react-dropdown": "^2.0.25", "react-loading-skeleton": "^3.5.0", "single-spa": "^5.9.3", From 20062bb4fce3986fd93cae7e9ad4cb37c459aea9 Mon Sep 17 00:00:00 2001 From: fahad-aot Date: Fri, 20 Jun 2025 04:11:35 -0700 Subject: [PATCH 3/3] updated z-index of resizable th --- forms-flow-theme/scss/_table.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/forms-flow-theme/scss/_table.scss b/forms-flow-theme/scss/_table.scss index baa5b6984..7ec871011 100644 --- a/forms-flow-theme/scss/_table.scss +++ b/forms-flow-theme/scss/_table.scss @@ -306,7 +306,7 @@ $white-color: var(--ff-white); thead { position: sticky; top: 0; - z-index: 3; + z-index: 102; background-color: var(--ff-body-bg); th { @@ -351,7 +351,7 @@ $white-color: var(--ff-white); position: sticky; right: 0; background-color: var(--ff-body-bg); - z-index: 2; + z-index: 101; border-left: 1px solid var(--ff-gray-medium-dark); text-align: left; vertical-align: middle;