feat: add user information side sheet and project refactor

.changeset/beige-rats-admire.md

@@ -0,0 +1,7 @@
+---
+"fusion-project-portal": minor
+---
+
+
+Added `@portal/components` project for ui components utilising components and functionality form  `@portal/ui` and  `@portal/core`.
+

.changeset/cyan-snakes-flow.md

@@ -0,0 +1,5 @@
+---
+"fusion-project-portal": minor
+---
+
+Added `@portal/ui` project for ui components used in the portal.

.changeset/dry-beans-cheat.md

@@ -0,0 +1,7 @@
+---
+"fusion-project-portal": patch
+---
+
+
+Added `@portal/utils` project for utile funtions and moved old utils to new project. `@equinor/portal-utils` has now been deleted.
+

.changeset/nasty-jokes-wonder.md

@@ -0,0 +1,7 @@
+---
+"fusion-project-portal": minor
+---
+
+
+Added `@portal/core` project for core functionality. Added the new functionality, and is now ready for migration.
+

.changeset/pr-434-1588251794.md

@@ -0,0 +1,5 @@
+
+---
+"fusion-project-portal": minor
+--- 
+Adding user info side-sheet with contact details, riles and my allocations.

.changeset/pretty-onions-teach.md

@@ -0,0 +1,5 @@
+---
+"fusion-project-portal": minor
+---
+
+Added `@portal/types` porject for globale portal types.

client/package.json

@@ -16,7 +16,7 @@
   "private": true,
   "devDependencies": {
     "@hirez_io/observer-spy": "^2.2.0",
-    "@testing-library/jest-dom": "^5.17.0",
+    "@testing-library/jest-dom": "^6.1.4",
     "@testing-library/react": "^14.0.0",
     "@testing-library/react-hooks": "^8.0.1^",
     "@types/dompurify": "^3.0.2",
@@ -71,9 +71,11 @@
     "@equinor/fusion-framework-react": "^5.3.2",
     "@equinor/fusion-framework-react-app": "^4.1.9",
     "@equinor/fusion-framework-react-components-bookmark": "0.2.10",
+    "@equinor/fusion-framework-react-components-people-provider": "^1.1.2",
     "@equinor/fusion-framework-react-module-signalr": "^2.0.10",
     "@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-skeleton": "^0.2.14",
     "@equinor/fusion-react-styles": "^0.5.11",
@@ -96,4 +98,4 @@
   "workspaces": [
     "packages/**"
   ]
-}
+}

client/packages/components/README.md

@@ -0,0 +1,7 @@
+# portal-ui
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test portal-ui` to execute the unit tests via [Jest](https://jestjs.io).

client/packages/components/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "portal-components",
+  "version": "1.0.0",
+  "license": "MIT",
+  "scripts": {
+    "build": "tsc"
+  }
+}

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

@@ -0,0 +1,100 @@
+import { useCurrentUser } from '@portal/core';
+import { getAccountTypeColor } from '@portal/ui';
+
+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 { ProfileManagerCard } from './components/ProfileManager';
+import { briefcase, settings, verified_user } from '@equinor/eds-icons';
+import styled from 'styled-components';
+import { tokens } from '@equinor/eds-tokens';
+import { useMemo, useState } from 'react';
+import { MyRolesTab } from '../my-roles-tab/MyRolesTab';
+import { MyAllocationTab } from '../my-allocations-tab/MyAllocationTab';
+import { PortalSettingsTab } from '../portal-settings-tab/PortalSettingsTab';
+import { PortalActionProps } from '@equinor/portal-core';
+import { PresenceIndicator } from '../presence-indicator';
+
+const Style = {
+	Wrapper: styled.div`
+		padding: 1rem 0rem;
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+	`,
+	Button: styled(Button)`
+		width: 100%;
+		display: flex;
+		padding: 1rem;
+		height: auto;
+	`,
+};
+
+type Tabs = {
+	Profile: JSX.Element;
+	MyRoles: JSX.Element;
+	MyAllocations: JSX.Element;
+	PortalSettings: JSX.Element;
+};
+
+export function MyAccount({ action, onClose, open }: PortalActionProps) {
+	const { data: user, isLoading } = useCurrentUser();
+
+	const [activeTab, setActiveTab] = useState<keyof Tabs>('Profile');
+
+	const tabs: Tabs = useMemo(() => {
+		return {
+			Profile: (
+				<>
+					<PresenceIndicator />
+					<hr />
+					<ProfileContactDetails user={user} isLoading={isLoading} />
+					<hr />
+					<ProfileManagerCard user={user} />
+					<hr />
+					<Style.Wrapper>
+						<Style.Button variant="ghost" 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')}>
+							<Icon
+								data={verified_user}
+								scale={40}
+								color={tokens.colors.text.static_icons__tertiary.hex}
+							/>
+							My Roles
+						</Style.Button>
+					</Style.Wrapper>
+					<hr />
+					<Style.Wrapper>
+						<Style.Button variant="ghost" onClick={() => setActiveTab('PortalSettings')}>
+							<Icon data={settings} scale={40} color={tokens.colors.text.static_icons__tertiary.hex} />
+							Portal Setting
+						</Style.Button>
+					</Style.Wrapper>
+				</>
+			),
+			MyRoles: <MyRolesTab onClick={() => setActiveTab('Profile')} user={user} />,
+			MyAllocations: <MyAllocationTab onClick={() => setActiveTab('Profile')} positions={user?.positions} />,
+			PortalSettings: <PortalSettingsTab onClick={() => setActiveTab('Profile')} user={user} />,
+		};
+	}, [user, setActiveTab]);
+
+	return (
+		<SideSheet isOpen={open} onClose={onClose} isDismissable={true} minWidth={action.minWidth}>
+			<SideSheet.Indicator color={getAccountTypeColor(user?.accountType)} />
+			<SideSheet.Title title={action.name} />
+			<SideSheet.SubTitle subTitle={user?.accountType || ''} />
+			<SideSheet.Content>
+				{/* <InfoMessage>This functionality is not yet implemented.</InfoMessage> */}
+				<ProfileCardHeader user={user} />
+				<hr />
+				{tabs[activeTab]}
+			</SideSheet.Content>
+		</SideSheet>
+	);
+}

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

@@ -0,0 +1,46 @@
+import styled from 'styled-components';
+import { Typography } from '@equinor/eds-core-react';
+import { getDepartment, getJobTitle, useUserPhoto } from '@portal/core';
+import { PersonDetails } from '@portal/types';
+import { Avatar, Skeleton, getAccountTypeColor } from '@portal/ui';
+
+const Style = {
+	InfoWrapper: styled.div`
+		display: flex;
+		align-items: center;
+		gap: 1rem;
+		padding: 1rem;
+	`,
+};
+
+export const ProfileCardHeader = ({ user }: { user?: PersonDetails }) => {
+	const { data: url } = useUserPhoto(user?.azureUniqueId);
+	if (!user) {
+		return (
+			<Style.InfoWrapper>
+				<Skeleton variant="circle" size="medium" />
+
+				<div>
+					<Skeleton width="200px" />
+					<div style={{ paddingTop: '0.5rem', gap: '0.2rem', display: 'flex', flexDirection: 'column' }}>
+						<Skeleton width={60} />
+						<Skeleton width={60} />
+					</div>
+				</div>
+			</Style.InfoWrapper>
+		);
+	}
+
+	return (
+		<Style.InfoWrapper>
+			<Avatar url={url} borderColor={getAccountTypeColor(user.accountType)} width={60} height={60} />
+			<div>
+				<Typography variant="h6">{user?.name}</Typography>
+				<div>
+					<Typography>{getJobTitle(user)}</Typography>
+					<Typography>{getDepartment(user)}</Typography>
+				</div>
+			</div>
+		</Style.InfoWrapper>
+	);
+};

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

@@ -0,0 +1,67 @@
+import styled from 'styled-components';
+import { Icon, Typography } from '@equinor/eds-core-react';
+
+import { ProfileListItem } from './ProfileListItem';
+import { TeamsIcon, DelveIcon, Skeleton } from '@portal/ui';
+
+import { PersonDetails } from '@portal/types';
+
+const Style = {
+	InfoWrapper: styled.div`
+		display: flex;
+		flex-direction: column;
+		padding: 1rem, 0rem;
+	`,
+};
+
+export const ProfileContactDetails = ({ user, isLoading }: { user?: PersonDetails; isLoading: boolean }) => {
+	return (
+		<Style.InfoWrapper>
+			<Typography>Contact Details</Typography>
+			{user?.mail ? (
+				<ProfileListItem
+					icon={<Icon name="email" style={{ fontSize: '16px' }} />}
+					href={`mailto:${user.mail}`}
+					toCopy={user.mail}
+					text={user.mail}
+					title="Email address"
+				/>
+			) : (
+				isLoading && <Skeleton width={60} style={{ margin: '1rem 0' }} />
+			)}
+			{user?.mobilePhone ? (
+				<ProfileListItem
+					icon={<Icon name="iphone" style={{ fontSize: '16px' }} />}
+					href={`callto:${user.mobilePhone}`}
+					toCopy={user.mobilePhone}
+					text={user.mobilePhone}
+					title="Phone number"
+				/>
+			) : (
+				isLoading && <Skeleton width={60} style={{ margin: '1rem 0' }} />
+			)}
+			{user?.mail ? (
+				<ProfileListItem
+					icon={<TeamsIcon />}
+					href={`msteams:/l/chat/0/0?users=${user.mail}`}
+					toCopy={`msteams:/l/chat/0/0?users=${user.mail}`}
+					text="Start a chat in Teams"
+					title={`${user.name} Teams`}
+				/>
+			) : (
+				isLoading && <Skeleton width={60} style={{ margin: '1rem 0' }} />
+			)}
+			{user?.azureUniqueId ? (
+				<ProfileListItem
+					icon={<DelveIcon />}
+					href={`https://eur.delve.office.com/?u=${user.azureUniqueId}&v=work`}
+					toCopy={`https://eur.delve.office.com/?u=${user.azureUniqueId}&v=work`}
+					text="Go to Delve account"
+					title={`${user.name} Delve account`}
+				/>
+			) : (
+				isLoading && <Skeleton width={60} style={{ margin: '1rem 0' }} />
+			)}
+		</Style.InfoWrapper>
+	);
+};