feat: onboard apps with context (#752)

Co-authored-by: Noggling <[email protected]>
equinor · Sep 24, 2024 · 97867dc · 97867dc
1 parent 400daca
commit 97867dc
Show file tree

Hide file tree

Showing 20 changed files with 762 additions and 514 deletions.
diff --git a/.changeset/pr-752-2076387967.md b/.changeset/pr-752-2076387967.md
@@ -0,0 +1,5 @@
+
+---
+"fusion-project-portal": patch
+--- 
+The portal administration now also allows onboarding applications with a specific context.
diff --git a/client/apps/portal-administration/src/components/Actions/ActivateSelectedButton.tsx b/client/apps/portal-administration/src/components/Actions/ActivateSelectedButton.tsx
@@ -1,18 +1,18 @@
 import { Button, Icon } from '@equinor/eds-core-react';
-import { AppManifestResponse, FormattedError, PortalApp } from '../../types';
+import { AppManifestResponse, FormattedError, PortalApp, PortalApplication } from '../../types';
 import { UseMutateAsyncFunction } from '@tanstack/react-query';
 import { Result } from '../../query/apps-queries';
 import { add_circle_outlined } from '@equinor/eds-icons';
 
 type ActivateSelectedButtonProps = {
-	selection: PortalApp[];
+	selection: PortalApplication[];
 	activateSelected: UseMutateAsyncFunction<
 		Result[],
 		FormattedError,
-		PortalApp[],
+		PortalApplication[],
 		{
-			prevApps: AppManifestResponse[];
-			newApps: AppManifestResponse[];
+			prevApps: PortalApplication[];
+			newApps: PortalApplication[];
 		}
 	>;
 };

diff --git a/...t/apps/portal-administration/src/components/Actions/ActivateSelectedWithContextButton.tsx b/...t/apps/portal-administration/src/components/Actions/ActivateSelectedWithContextButton.tsx
@@ -1,20 +1,20 @@
 import { Button, Icon } from '@equinor/eds-core-react';
-import { PortalApp } from '../../types';
+import { PortalApp, PortalApplication } from '../../types';
 
 import { add_circle_filled } from '@equinor/eds-icons';
 
 type ActivateSelectedWithContextButtonProps = {
-	selection: PortalApp[];
+	selection: PortalApplication[];
 	activateSelectedWithContext: VoidFunction;
 };
 
 export const ActivateSelectedWithContextButton = ({
 	selection,
 	activateSelectedWithContext,
 }: ActivateSelectedWithContextButtonProps) => {
-	const isActive = selection.some((a) => a.isActive);
+	const isActive = selection.some((a) => !a.isActive) && selection.length < 2;
 
-	if (isActive) {
+	if (!isActive) {
 		return null;
 	}
 

diff --git a/client/apps/portal-administration/src/components/Actions/EditSelectedButton.tsx b/client/apps/portal-administration/src/components/Actions/EditSelectedButton.tsx
@@ -1,29 +1,29 @@
 import { Button, Icon } from '@equinor/eds-core-react';
-import { PortalApp } from '../../types';
+import { PortalApplication } from '../../types';
 
-import { add_circle_outlined, edit } from '@equinor/eds-icons';
+import { edit } from '@equinor/eds-icons';
 
 type EditSelectedButtonProps = {
-	selection: PortalApp[];
+	selection: PortalApplication[];
 	editSelection: VoidFunction;
 };
 
 export const EditSelectedButton = ({ selection, editSelection }: EditSelectedButtonProps) => {
-	const isActive = selection.some((a) => !a.isActive);
+	const isActive = selection.length === 1 && selection[0].isContextual;
 
-	if (isActive) {
+	if (!isActive) {
 		return null;
 	}
 
 	return (
 		<Button
 			id="activate-selected"
-			variant="ghost"
+			variant="outlined"
 			onClick={() => {
 				editSelection();
 			}}
 		>
-			<Icon data={edit} size={16} /> Edit Selected
+			<Icon data={edit} size={16} /> Edit Context
 		</Button>
 	);
 };
diff --git a/client/apps/portal-administration/src/components/Actions/MakeGlobalAppsButton.tsx b/client/apps/portal-administration/src/components/Actions/MakeGlobalAppsButton.tsx
@@ -1,24 +1,24 @@
 import { Button, Icon } from '@equinor/eds-core-react';
-import { AppManifestResponse, FormattedError, PortalApp } from '../../types';
+import { FormattedError, PortalApplication } from '../../types';
 import { UseMutateAsyncFunction } from '@tanstack/react-query';
 import { Result } from '../../query/apps-queries';
 import { check_circle_outlined } from '@equinor/eds-icons';
 
 type MakeSelectionGlobalButtonProps = {
-	selection: PortalApp[];
+	selection: PortalApplication[];
 	makeSelectionGlobal: UseMutateAsyncFunction<
 		Result[],
 		FormattedError,
-		PortalApp[],
+		PortalApplication[],
 		{
-			prevApps: AppManifestResponse[];
-			newApps: AppManifestResponse[];
+			prevApps: PortalApplication[];
+			newApps: PortalApplication[];
 		}
 	>;
 };
 
 export const MakeSelectionGlobalButton = ({ selection, makeSelectionGlobal }: MakeSelectionGlobalButtonProps) => {
-	const isActive = selection.some((a) => a.isActive);
+	const isActive = selection.some((a) => a.isContextual);
 
 	if (!isActive) {
 		return null;

diff --git a/client/apps/portal-administration/src/components/Actions/RemoveAppsButton.tsx b/client/apps/portal-administration/src/components/Actions/RemoveAppsButton.tsx
@@ -1,18 +1,18 @@
 import { Button, Icon } from '@equinor/eds-core-react';
-import { AppManifestResponse, FormattedError, PortalApp } from '../../types';
+import { FormattedError, PortalApplication } from '../../types';
 import { UseMutateAsyncFunction } from '@tanstack/react-query';
 import { Result } from '../../query/apps-queries';
 import { remove_outlined } from '@equinor/eds-icons';
 
 type RemoveAppsButtonProps = {
-	selection: PortalApp[];
+	selection: PortalApplication[];
 	removeApps: UseMutateAsyncFunction<
 		Result[],
 		FormattedError,
-		PortalApp[],
+		PortalApplication[],
 		{
-			prevApps: AppManifestResponse[];
-			newApps: AppManifestResponse[];
+			prevApps: PortalApplication[];
+			newApps: PortalApplication[];
 		}
 	>;
 };

diff --git a/client/apps/portal-administration/src/components/AgStyle.tsx b/client/apps/portal-administration/src/components/AgStyle.tsx
@@ -40,6 +40,15 @@ export const AgStyles = {
 		border-radius: 50%;
 		margin-top: 0.5rem;
 	`,
+	ContextIndicator: styled.span<{ active?: string }>`
+		display: block;
+		height: 16px;
+		width: 16px;
+		background-color: ${({ active }) =>
+			active === 'true' ? tokens.colors.interactive.warning__resting.hex : 'none'};
+		border-radius: 50%;
+		margin-top: 0.5rem;
+	`,
 	Wrapper: styled.div`
 		.ag-theme-alpine-fusion {
 			--ag-borders: solid 0px !important;

diff --git a/client/apps/portal-administration/src/components/OnboardedContexts/AddContext.tsx b/client/apps/portal-administration/src/components/OnboardedContexts/AddContext.tsx
@@ -68,8 +68,8 @@ export const AddContext = () => {
 			<Style.Card>
 				<Style.RowHead onClick={() => setActive((s) => !s)}>
 					<Style.Row>
-						<Typography variant="h6">Add Context Type</Typography>
-						<InfoPopover title="Add Context Type">
+						<Typography variant="h6">Add Context</Typography>
+						<InfoPopover title="Add Context">
 							<Typography>
 								Expand the form to add new context type by pressing the chevron icon.
 							</Typography>
@@ -139,14 +139,12 @@ export const AddContext = () => {
 			{selectedContext && (
 				<Style.Card>
 					<Card.Header>
-						<Card.HeaderTitle>
-							<Typography variant="h4">{selectedContext.title}</Typography>
-						</Card.HeaderTitle>
+						<Typography variant="h6">{selectedContext.title}</Typography>
 					</Card.Header>
 					<Card.Content>
-						<strong>{selectedContext.type.id}</strong>
-						<p>{selectedContext.externalId}</p>
-						<p>{selectedContext.id}</p>
+						<Typography variant="overline">
+							{selectedContext.type.id} - {selectedContext.externalId}
+						</Typography>
 					</Card.Content>
 				</Style.Card>
 			)}

diff --git a/client/apps/portal-administration/src/components/Portal/ShowConfig.tsx b/client/apps/portal-administration/src/components/Portal/ShowConfig.tsx
@@ -1,11 +1,11 @@
-import React, { useEffect, useRef } from 'react';
 import styled from 'styled-components';
 import { useParams } from 'react-router-dom';
 import { useGetPortal } from '../../hooks/use-portal-query';
-import { useGetPortalApps } from '../../hooks/use-portal-apps';
+import { usePortalApps } from '../../hooks/use-portal-apps';
 import { Card } from '@equinor/eds-core-react';
 import { Message } from '../Message';
 import { Code } from '../../utils/syntaxHighlightJson';
+import { FC } from 'react';
 
 const Style = {
 	Wrapper: styled.div`
@@ -22,11 +22,11 @@ const Style = {
 	`,
 };
 
-export const ShowConfigPage: React.FC = () => {
+export const ShowConfigPage: FC = () => {
 	const { portalId } = useParams();
 
 	const { data } = useGetPortal(portalId);
-	const { data: apps } = useGetPortalApps(portalId);
+	const { data: apps } = usePortalApps(portalId);
 
 	const portal = { ...data };
 	if (portal) {

diff --git a/client/apps/portal-administration/src/components/PortalApps/ActionBar.tsx b/client/apps/portal-administration/src/components/PortalApps/ActionBar.tsx
@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { PortalApp } from '../../types';
+import { PortalApp, PortalApplication } from '../../types';
 import { Typography } from '@equinor/eds-core-react';
 import { useAddPortalApps, useRemovePortalApps } from '../../hooks/use-portal-apps';
 import { usePortalContext } from '../../context/PortalContext';
@@ -10,6 +10,8 @@ import { ActivateSelectedButton } from '../Actions/ActivateSelectedButton';
 import { RemoveAppsButton } from '../Actions/RemoveAppsButton';
 import { EditSelectedButton } from '../Actions/EditSelectedButton';
 import { ActivateSelectedWithContextButton } from '../Actions/ActivateSelectedWithContextButton';
+import { useQueryClient } from '@tanstack/react-query';
+import { useRemoveAppWithContexts } from '../../hooks/use-add-app-with-context';
 
 const Styles = {
 	Wrapper: styled.div`
@@ -37,38 +39,45 @@ const Styles = {
 	`,
 };
 
-export const ActionBar = ({ selection }: { selection: PortalApp[] }) => {
+export const ActionBar = ({ selection }: { selection: PortalApplication[] }) => {
 	const { activePortalId } = usePortalContext();
+	const queryClient = useQueryClient();
 
 	const { mutateAsync: activateSelected } = useAddPortalApps(activePortalId);
 	const { mutateAsync: removeSelected } = useRemovePortalApps(activePortalId);
+
 	const [isOpen, setIsOpen] = useState(false);
 
 	if (selection.length === 0) return null;
+
 	return (
 		<Styles.Wrapper>
-			<ContextAppSideSheet
-				onClose={() => {
-					setIsOpen(false);
-				}}
-				selection={selection}
-				isOpen={isOpen}
-			/>
+			{isOpen && (
+				<ContextAppSideSheet
+					onClose={() => {
+						setIsOpen(false);
+						queryClient.invalidateQueries({ queryKey: ['portal-onboarded-apps'] });
+					}}
+					app={selection[0]}
+					isOpen={isOpen}
+				/>
+			)}
+
 			<Styles.Content>
 				<Styles.Actions>
 					<Typography variant="overline">Portal Application Actions</Typography>
 					<Styles.Row>
 						<ActivateSelectedButton selection={selection} activateSelected={activateSelected} />
-						{/* <ActivateSelectedWithContextButton
+						<ActivateSelectedWithContextButton
 							selection={selection}
 							activateSelectedWithContext={() => setIsOpen(true)}
-						/> */}
-						{/* <EditSelectedButton
+						/>
+						<EditSelectedButton
 							editSelection={() => {
 								setIsOpen(true);
 							}}
 							selection={selection}
-						/> */}
+						/>
 						<MakeSelectionGlobalButton selection={selection} makeSelectionGlobal={activateSelected} />
 						<RemoveAppsButton selection={selection} removeApps={removeSelected} />
 					</Styles.Row>