Skip to content

Feature/FWF-4833 sidebar updations #628

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Jun 21, 2025
Merged

Feature/FWF-4833 sidebar updations #628

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
74f2812
sidebar icon updations
Ajay-aot Jun 20, 2025
e3b7410
navbar icon updates
Ajay-aot Jun 20, 2025
5a635f7
unwanted imports removed
Ajay-aot Jun 20, 2025
edc313f
sonar issue solved
Ajay-aot Jun 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 47 additions & 1 deletion forms-flow-components/src/components/SvgIcons/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1030,4 +1030,50 @@ export const SharedWithMeIcon = ({ color = grayMediumColor,className, ...props }
strokeLinejoin="round"
/>
</svg>
);
);

export const NavbarTaskIcon = ({
color = grayDarkestColor,
className,
...props
}) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="25"
viewBox="0 0 24 25"
fill="none"
>
<circle cx="12" cy="12.5" r="12" fill={color} />
<path
d="M8 12.6786L10.5 15.3571L15.5 10"
stroke="white"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);

export const NavbarSubmitIcon = ({
color = grayDarkestColor,
className,
...props
}) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="25"
viewBox="0 0 24 25"
fill="none"
>
<circle cx="12" cy="12.5" r="12" fill={color}/>
<path
d="M6.41992 10.1029L17.3302 9L10.9199 17.8971L10.835 12.75L6.41992 10.1029Z"
stroke="white"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
25 changes: 14 additions & 11 deletions forms-flow-nav/src/sidenav/MenuComponent.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,8 @@ const MenuComponent = ({
subMenu,
optionsCount,
subscribe,
baseUrl
baseUrl,
icon
}) => {
const [tenant, setTenant] = React.useState({});
const [activeMenu, setActiveMenu] = React.useState(null);
Expand Down Expand Up @@ -76,9 +77,8 @@ const MenuComponent = ({
getComputedStyle(document.documentElement).getPropertyValue(
"--navbar-main-menu-active-font-color"
)?.trim() || getComputedStyle(document.documentElement).getPropertyValue(
"--ff-gray-800"
"gray-darkest"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can you change it to --gray-darkest

).trim();

return (
<Accordion.Item eventKey={eventKey}>
<Accordion.Header
Expand All @@ -89,14 +89,16 @@ const MenuComponent = ({
}`}
onClick={noOptionsMenu ? handleHeaderClick : undefined}
>
{!noOptionsMenu && (
<ChevronIcon
width="10"
height="5"
className="custom-chevron"
color={chevronColor}
/>
)}
{icon ? (
<span>{icon}</span>
) : !noOptionsMenu && (
<ChevronIcon
width="10"
height="5"
className="custom-chevron"
color={chevronColor}
/>
)}
<span>{t(mainMenu)}</span>
</Accordion.Header>
{!noOptionsMenu && (
Expand Down Expand Up @@ -137,6 +139,7 @@ MenuComponent.propTypes = {
optionsCount: PropTypes.string.isRequired,
subscribe: PropTypes.func.isRequired,
baseUrl: PropTypes.string.isRequired,
icon: PropTypes.node,
};

export default MenuComponent;
99 changes: 55 additions & 44 deletions forms-flow-nav/src/sidenav/Sidebar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ import { LANGUAGE } from "../constants/constants";
import { checkIntegrationEnabled } from "../services/integration";
import MenuComponent from "./MenuComponent";
// import Appname from "./formsflow.svg";
import { ApplicationLogo } from "@formsflow/components";
import { ApplicationLogo, NavbarTaskIcon, NavbarSubmitIcon } from "@formsflow/components";
import { ProfileSettingsModal } from "./ProfileSettingsModal";
import PropTypes from 'prop-types';

Expand All @@ -40,7 +40,7 @@ const UserProfile = ({ userDetail, initials, handleProfileModal, logout, t }) =>
</div>
</button>
<button className="button-as-div sign-out-button" onClick={logout} data-testid="sign-out-button">
<p className="m-0">{t("Sign Out")}</p>
<p className="m-0">{t("Logout")}</p>
</button>
</div>
);
Expand Down Expand Up @@ -319,6 +319,13 @@ const Sidebar = React.memo(({ props, sidenavHeight="100%" }) => {

return options;
}

const iconBgColor =
getComputedStyle(document.documentElement).getPropertyValue(
"--navbar-main-menu-active-font-color"
)?.trim() || getComputedStyle(document.documentElement).getPropertyValue(
"gray-darkest"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can you change it to --gray-darkest

).trim();


return (
Expand All @@ -330,6 +337,50 @@ const Sidebar = React.memo(({ props, sidenavHeight="100%" }) => {
{renderLogo(hideLogo)}
<div className="options-container" data-testid="options-container">
<Accordion activeKey={activeKey} onSelect={(key) => setActiveKey(key)}>
{(isViewTask || isManageTask) && ENABLE_TASKS_MODULE && (
<MenuComponent
baseUrl={baseUrl}
eventKey={SectionKeys.REVIEW.value}
optionsCount="0"
mainMenu="Review"
subMenu={[
{
name: "Review",
path: "review",
},
]}
subscribe={props.subscribe}
icon={<NavbarTaskIcon color={iconBgColor} />}
/>
)}

{(isCreateSubmissions ||
(showApplications &&
isViewSubmissions &&
ENABLE_APPLICATIONS_MODULE)) && (
<MenuComponent
baseUrl={baseUrl}
eventKey={SectionKeys.SUBMIT.value}
optionsCount="0"
mainMenu="Submit"
subMenu={[
{
name: "Forms",
path: "form",
supportedSubRoutes: [
"form",
"bundle",
"application",
"draft",
],
unsupportedSubRoutes: ["formflow", "bundleflow"],
},
]}
subscribe={props.subscribe}
icon={<NavbarSubmitIcon color={iconBgColor} />}
/>
)}

{ENABLE_FORMS_MODULE && (isCreateDesigns || isViewDesigns) && (
<MenuComponent
baseUrl={baseUrl}
Expand All @@ -338,13 +389,13 @@ const Sidebar = React.memo(({ props, sidenavHeight="100%" }) => {
mainMenu="Design"
subMenu={[
{
name: "Forms",
name: "Forms & Flows",
path: "formflow",
},
...(IS_ENTERPRISE && isManageBundles
? [
{
name: "Bundle",
name: "Bundles",
path: "bundleflow",
isPremium: true,
},
Expand Down Expand Up @@ -394,47 +445,7 @@ const Sidebar = React.memo(({ props, sidenavHeight="100%" }) => {
/>
)}

{(isCreateSubmissions ||
(showApplications &&
isViewSubmissions &&
ENABLE_APPLICATIONS_MODULE)) && (
<MenuComponent
baseUrl={baseUrl}
eventKey={SectionKeys.SUBMIT.value}
optionsCount="1"
mainMenu="Submit"
subMenu={[
{
name: "Forms",
path: "form",
supportedSubRoutes: [
"form",
"bundle",
"application",
"draft",
],
unsupportedSubRoutes: ["formflow", "bundleflow"],
},
]}
subscribe={props.subscribe}
/>
)}

{(isViewTask || isManageTask) && ENABLE_TASKS_MODULE && (
<MenuComponent
baseUrl={baseUrl}
eventKey={SectionKeys.REVIEW.value}
optionsCount="1"
mainMenu="Review"
subMenu={[
{
name: "Review",
path: "review",
},
]}
subscribe={props.subscribe}
/>
)}
{isManageWorkflows &&
!isCreateDesigns &&
!isViewDesigns &&
Expand Down
8 changes: 4 additions & 4 deletions forms-flow-nav/src/sidenav/Sidebar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@
color: var(--navbar-main-menu-active-font-color);
background-color: var(--navbar-bg-color);
gap: 0.5rem;
box-shadow: none;

&:focus {
box-shadow: none;
Expand Down Expand Up @@ -124,7 +125,7 @@
}

.sign-out-button {
text-align: left;
justify-content: center;
padding: var(--spacer-100) var(--spacer-150);
border: none;
cursor: pointer;
Expand Down Expand Up @@ -153,6 +154,8 @@
line-height: var(--text-line-height);
letter-spacing: var(--text-space-xs);
background-color: var(--navbar-bg-color) !important;
text-align: left;
margin-left: var(--spacer-050) !important;
margin: 0;
cursor: pointer;
border: none;
Expand Down Expand Up @@ -185,9 +188,6 @@
display: none;
}

&.no-arrow .accordion-button {
padding-left: 3.2rem;
}

&.active .accordion-button {
background-color: var(--navbar-active-submenu-bg-color);
Expand Down
2 changes: 1 addition & 1 deletion forms-flow-review/src/api/services/filterServices.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ export const fetchServiceTaskList = (
API.GET_BPM_TASK_FILTERS
}?firstResult=${firstResultIndex}&maxResults=${maxResults ?? MAX_RESULTS}`;
return (dispatch) => {
dispatch(setBPMTaskLoader(true));
// dispatch(setBPMTaskLoader(true)); Adding a temporary comment to prevent the skeleton loader in the task table from displaying oddly due to socket.
dispatch(setLastReqPayload(reqData));
RequestService.httpPOSTRequestWithHAL(
apiUrlgetTaskList,
Expand Down
Loading