feat: report error creation and help menu

.changeset/pr-446-1598414134.md

@@ -0,0 +1,10 @@
+
+---
+"fusion-project-portal": minor
+--- 
+Incorporated the following enhancements:
+- Implemented a help menu accessible from the top bar for user guidance.
+- Introduced the capability to report errors seamlessly through Service Now.
+- Included a link for enhancement suggestions within the Service Now interface.
+- Integrated a link to the changelog for users to stay informed about updates.
+- Provided a direct link to the portal documentation for easy reference.

client/package.json

@@ -57,7 +57,7 @@
     "@emotion/css": "11.10.6",
     "@emotion/react": "11.10.6",
     "@emotion/styled": "11.10.6",
-    "@equinor/eds-core-react": "^0.28.0",
+    "@equinor/eds-core-react": "^0.33.1",
     "@equinor/eds-icons": "^0.17.0",
     "@equinor/eds-tokens": "^0.9.0",
     "@equinor/fusion-framework-app": "^7.1.7",
@@ -76,10 +76,11 @@
     "@equinor/fusion-observable": "^8.1.2",
     "@equinor/fusion-react-context-selector": "^0.4.9",
     "@equinor/fusion-react-person": "^0.6.0",
-    "@equinor/fusion-react-side-sheet": "1.0.2",
+    "@equinor/fusion-react-side-sheet": "1.2.1",
     "@equinor/fusion-react-skeleton": "^0.2.14",
     "@equinor/fusion-react-styles": "^0.5.11",
     "@equinor/fusion-react-tooltip": "^1.1.11",
+    "@hookform/resolvers": "^3.3.2",
     "@microsoft/applicationinsights-web": "^3.0.2",
     "@microsoft/signalr": "^7.0.0",
     "adaptivecards": "^2.11.2",
@@ -89,13 +90,15 @@
     "re-resizable": "^6.9.9",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-hook-form": "^7.48.2",
     "react-query": "^3.39.2",
     "react-router-dom": "^6.16.0",
     "rxjs": "^7.5.7",
     "styled-components": "5.3.6",
-    "swiper": "^9.3.2"
+    "swiper": "^9.3.2",
+    "zod": "^3.22.4"
   },
   "workspaces": [
     "packages/**"
   ]
-}
+}

client/packages/components/package.json

@@ -6,5 +6,8 @@
     "build": "tsc",
     "test": "vitest --silent --run",
     "test:coverage": "vitest run --coverage"
+  },
+  "resolutions": {
+    "styled-components": "^5"
   }
 }

client/packages/components/src/components/help/Help.tsx

@@ -0,0 +1,77 @@
+import { PortalActionProps } from '@equinor/portal-core';
+
+import { SideSheet } from '@equinor/fusion-react-side-sheet';
+import { Divider, Typography } from '@equinor/eds-core-react';
+import styled from 'styled-components';
+import { ExternalLink, MessageCard } from '@portal/ui';
+
+const Style = {
+	Wrapper: styled.div`
+		padding: 1rem 0.5rem;
+	`,
+	Content: styled.div`
+		padding-top: 1rem;
+	`,
+};
+
+export const Help = ({ action, onClose, open }: PortalActionProps) => {
+	const subTitle = action.subTitle || '';
+	return (
+		<SideSheet isOpen={open} onClose={onClose} isDismissable={true} minWidth={action.minWidth}>
+			<SideSheet.Indicator color={action.color} />
+			<SideSheet.Title title={action.name} />
+			<SideSheet.SubTitle subTitle={subTitle} />
+			<SideSheet.Content>
+				<Style.Wrapper>
+					<Typography variant="h5"> Welcome to the Fusion Project Portal!</Typography>
+					<Style.Content>
+						<Typography>
+							The application is designed to provide a comprehensive display of fusion applications,
+							tailored to the selected project.
+							<br />
+						</Typography>
+					</Style.Content>
+					<Divider />
+					<MessageCard
+						type="Info"
+						title="Here vi have provided som use full links to help you navigate the portal."
+					/>
+					<Divider />
+					<Typography variant="h5">The Portal</Typography>
+					<Style.Content>
+						<ExternalLink
+							title="Go to Project Selection"
+							text="Project Selection"
+							href="https://equinor.github.io/fusion-project-portal-internal/docs/documentation/howTo/projectSelection"
+						/>
+						<ExternalLink
+							title="Go to App Selection"
+							text="App Selection"
+							href="https://equinor.github.io/fusion-project-portal-internal/docs/documentation/howTo/appSelection"
+						/>
+						<ExternalLink
+							title="Go to Application favorites"
+							text="Application favorites"
+							href="https://equinor.github.io/fusion-project-portal-internal/docs/documentation/howTo/pinnignApps"
+						/>
+						<ExternalLink
+							title="Go to Navigation Bar"
+							text="Navigation Bar"
+							href="https://equinor.github.io/fusion-project-portal-internal/docs/documentation/howTo/topBar"
+						/>
+					</Style.Content>
+					<Divider />
+
+					<Typography variant="h5">Whats new</Typography>
+					<Style.Content>
+						<ExternalLink
+							title="Go to Changelog"
+							text="Project Portal Changelog"
+							href="https://equinor.github.io/fusion-project-portal-internal/docs/documentation/CHANGELOG"
+						/>
+					</Style.Content>
+				</Style.Wrapper>
+			</SideSheet.Content>
+		</SideSheet>
+	);
+};

client/packages/components/src/components/help/HelpMenu.test.tsx

@@ -0,0 +1,14 @@
+import { render } from '@testing-library/react';
+import { it, describe, expect, vi } from 'vitest';
+import HelpMenu from './HelpMenu';
+
+const setActiveActionById = vi.fn();
+
+describe('HelpMenu', () => {
+	it('should be defined', () => {
+		const { getAllByTestId } = render(<HelpMenu setActiveActionById={setActiveActionById} />);
+		const items = getAllByTestId('menu-item-button');
+
+		expect(items).toBeDefined();
+	});
+});

client/packages/components/src/components/help/HelpMenu.tsx

@@ -0,0 +1,87 @@
+import { Button, Icon, Menu } from '@equinor/eds-core-react';
+import { file_description, help_outline, info_circle, launch, report_bug } from '@equinor/eds-icons';
+import { useRef, useState } from 'react';
+import styled from 'styled-components';
+
+import { MenuItem } from '@portal/ui';
+
+export const StyledItem = styled.div`
+	min-width: 250px;
+	padding-left: 0.5rem;
+`;
+
+export const StyledActionMenuButton = styled(Button)`
+	height: 48px;
+	width: 48px;
+`;
+export const HelpMenu = ({ setActiveActionById }: { setActiveActionById: (id: string) => void }) => {
+	const topBarMenuAnchorEl = useRef<HTMLDivElement>(null);
+	const [isOpen, setIsOpen] = useState<boolean>(false);
+
+	const handleOnClick = () => {
+		setIsOpen((s) => !s);
+	};
+
+	const handleCloseMenu = () => {
+		setIsOpen(false);
+	};
+
+	return (
+		<>
+			<StyledActionMenuButton
+				variant="ghost_icon"
+				data-testid="menu-button"
+				onClick={() => handleOnClick()}
+				ref={topBarMenuAnchorEl}
+				title="Help Menu"
+			>
+				<Icon data={info_circle} />
+			</StyledActionMenuButton>
+			<Menu
+				id="menu-complex"
+				aria-labelledby="anchor-complex"
+				open={isOpen}
+				anchorEl={topBarMenuAnchorEl.current}
+				onClose={handleCloseMenu}
+				placement="bottom-start"
+			>
+				<MenuItem
+					iconData={report_bug}
+					title="Report an error to service@equinor"
+					onClick={() => {
+						setActiveActionById('services');
+					}}
+				>
+					Report an error
+				</MenuItem>
+				<MenuItem
+					iconData={launch}
+					title="Submit an improvement suggestion"
+					link="https://equinor.service-now.com/selfservice?id=sc_cat_item&sys_id=32d7c0cddb2d630023a69407db961900"
+				>
+					Improvement suggestion
+				</MenuItem>
+				<MenuItem
+					iconData={file_description}
+					title="Project portal user documentation"
+					link="https://equinor.github.io/fusion-project-portal-internal/docs/documentation/intro"
+				>
+					User Documentation
+				</MenuItem>
+				<Menu.Section title="">
+					<MenuItem
+						iconData={help_outline}
+						title="Report an error to service@equinor"
+						onClick={() => {
+							setActiveActionById('help');
+						}}
+					>
+						Help
+					</MenuItem>
+				</Menu.Section>
+			</Menu>
+		</>
+	);
+};
+
+export default HelpMenu;

client/packages/components/src/components/help/index.ts

@@ -0,0 +1,2 @@
+export * from './Help';
+export * from './HelpMenu';

client/packages/components/src/components/my-account/MyAccount.tsx

@@ -6,7 +6,7 @@ import { SideSheet } from '@equinor/fusion-react-side-sheet';
 import { ProfileCardHeader } from './components/ProfileCardHeader';
 
 import { ProfileContactDetails } from './components/ProfileContactDetails';
-import { Button, Icon } from '@equinor/eds-core-react';
+import { Icon } from '@equinor/eds-core-react';
 import { ProfileManagerCard } from './components/ProfileManager';
 import { briefcase, settings, verified_user } from '@equinor/eds-icons';
 import styled from 'styled-components';
@@ -25,11 +25,29 @@ const Style = {
 		flex-direction: column;
 		align-items: flex-start;
 	`,
-	Button: styled(Button)`
+	Button: styled.button`
 		width: 100%;
 		display: flex;
 		padding: 1rem;
 		height: auto;
+		gap: 1rem;
+		align-items: center;
+		background: none;
+		border: 1px solid transparent;
+		color: ${tokens.colors.interactive.primary__resting.hex};
+		font-weight: 500;
+		line-height: 1.143em;
+		text-align: center;
+		:hover {
+			background: var(--eds_interactive_primary__hover_alt, rgba(222, 237, 238, 1));
+			color: var(--eds_interactive_primary__hover, rgba(0, 79, 85, 1));
+			border: 1px solid transparent;
+			border-radius: var(--eds_button__radius, 4px);
+		}
+		:focus-visible {
+			outline: 2px dashed rgba(0, 112, 121, 1);
+			outline-offset: 3px;
+		}
 	`,
 };
 
@@ -56,23 +74,11 @@ export function MyAccount({ action, onClose, open }: PortalActionProps) {
 					<ProfileManagerCard user={user} />
 					<hr />
 					<Style.Wrapper>
-						<Style.Button
-							variant="ghost"
-							onClick={() => setActiveTab('MyAllocations')}
-							title="My Allocations"
-							aria-label="Open My Allocation Tab"
-							role="button"
-						>
+						<Style.Button onClick={() => setActiveTab('MyAllocations')}>
 							<Icon data={briefcase} scale={40} color={tokens.colors.text.static_icons__tertiary.hex} />
 							My Allocations
 						</Style.Button>
-						<Style.Button
-							variant="ghost"
-							onClick={() => setActiveTab('MyRoles')}
-							title="My Roles"
-							aria-label="Open My Roles Tab"
-							role="button"
-						>
+						<Style.Button onClick={() => setActiveTab('MyRoles')}>
 							<Icon
 								data={verified_user}
 								scale={40}
@@ -83,13 +89,7 @@ export function MyAccount({ action, onClose, open }: PortalActionProps) {
 					</Style.Wrapper>
 					<hr />
 					<Style.Wrapper>
-						<Style.Button
-							variant="ghost"
-							onClick={() => setActiveTab('PortalSettings')}
-							title="Portal Setting"
-							aria-label="Open Portal Setting Tab"
-							role="button"
-						>
+						<Style.Button onClick={() => setActiveTab('PortalSettings')}>
 							<Icon data={settings} scale={40} color={tokens.colors.text.static_icons__tertiary.hex} />
 							Portal Setting
 						</Style.Button>

client/packages/components/src/components/service-now/ServiceNox.tsx

@@ -0,0 +1,37 @@
+import { useMemo, useState } from 'react';
+import styled from 'styled-components';
+import ActiveIncidents from './components/ActiveIncidents';
+import { NewIncident } from './components/NewIncident';
+
+const Styles = {
+	Wrapper: styled.div`
+		padding-top: 1rem;
+		padding-bottom: 1rem;
+	`,
+};
+
+export const ServiceNow = () => {
+	const [activeTab, setTab] = useState<'ActiveIncident' | 'NewIncident'>('ActiveIncident');
+
+	const tabs = useMemo(
+		() => ({
+			ActiveIncident: (
+				<ActiveIncidents
+					openNewIncident={() => {
+						setTab('NewIncident');
+					}}
+				/>
+			),
+			NewIncident: (
+				<NewIncident
+					onClose={() => {
+						setTab('ActiveIncident');
+					}}
+				/>
+			),
+		}),
+		[]
+	);
+
+	return <Styles.Wrapper>{tabs[activeTab]}</Styles.Wrapper>;
+};