chore: fixes for new landing page

.changeset/pr-582-1736263921.md

@@ -0,0 +1,9 @@
+
+---
+"fusion-project-portal": minor
+--- 
+The top-bat extensions settings are moved to portal settings.
+- Fix on the fullscreen button
+- Added production scope for data gateway apo used on cc-tab 
+- Fixing new menu, now closing when selecting application
+- Added no content message to my features tabs

client/packages/components/src/components/app-card/components/ListCard.tsx

@@ -51,7 +51,7 @@ export const Styled = {
 
 type ListCardProps = {
 	app: Partial<FusionAppManifest>;
-	onClick?: (app: Partial<FusionAppManifest>) => void;
+	onClick?: (app: Partial<FusionAppManifest>, e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
 	onFavorite?: (key: Partial<FusionAppManifest>) => void;
 	loading?: boolean;
 	dark?: boolean;
@@ -68,7 +68,7 @@ export const ListCard = ({ app, onClick, loading, pinButton, dark, onFavorite }:
 			<Styled.Item
 				to={app.isDisabled ? '#' : app.url || `/apps/${app.key}/`}
 				style={getAppCardColor(app)}
-				onClick={() => onClick && onClick(app)}
+				onClick={(e) => onClick && onClick(app, e)}
 			>
 				<Styled.Content $loading={loading}>
 					<AppIconContainer loading={loading} display="item" app={app} />

client/packages/components/src/components/app-group/AppGroup.tsx

@@ -1,7 +1,7 @@
-import { FusionAppGroup } from '@portal/types';
+import { FusionAppGroup, FusionAppManifest } from '@portal/types';
 import { useParams } from 'react-router-dom';
 
-import { AppManifest, ListCard } from '@portal/components';
+import { ListCard } from '@portal/components';
 
 import { css } from '@emotion/css';
 import { tokens } from '@equinor/eds-tokens';
@@ -60,11 +60,12 @@ export const Styles = {
 
 type AppGroupProps = {
 	group: FusionAppGroup;
-	onFavorite: (key: Partial<AppManifest>) => void;
+	onClick: (app: Partial<FusionAppManifest>, e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
+	onFavorite: (key: Partial<FusionAppManifest>) => void;
 	dark?: boolean;
 };
 
-export const AppGroup = ({ group, onFavorite, dark }: AppGroupProps) => {
+export const AppGroup = ({ group, onFavorite, dark, onClick }: AppGroupProps) => {
 	const { appKey } = useParams();
 	const isGroupActive = !!group.apps.find((a) => a.key === appKey);
 
@@ -81,9 +82,7 @@ export const AppGroup = ({ group, onFavorite, dark }: AppGroupProps) => {
 							app={app}
 							pinButton
 							dark={dark}
-							onClick={(a) => {
-								console.log(a);
-							}}
+							onClick={onClick}
 							onFavorite={onFavorite}
 						/>
 					))}

client/packages/components/src/components/my-features/FeatureTogglerApp.tsx

@@ -1,31 +1,44 @@
-import { useCurrentAppFeatures } from '@equinor/fusion-framework-react/feature-flag';
+import { IFeatureFlag, useCurrentAppFeatures } from '@equinor/fusion-framework-react/feature-flag';
 
 import { Typography, Switch } from '@equinor/eds-core-react';
 
 import { Styled } from './Styled';
+import { Message } from '@portal/ui';
 
 /**
  * JSX structure for Feature toggler tab for app features in the PersonSidesheet's Feature page.
  */
-export const FeatureTogglerApp = () => {
+export const FeatureTogglerApp = (props: { onClick: (feature: IFeatureFlag) => void }) => {
 	const { features, toggleFeature } = useCurrentAppFeatures();
 	return (
 		<Styled.SwitchList>
-			{features?.map((feature) => {
-				return (
-					<Styled.SwitchListItem key={`feat-${feature.key}`} onClick={() => toggleFeature(feature.key)}>
-						<Styled.SwitchLabel>
-							<Typography variant="body_short_bold">{feature.title ?? feature.key}</Typography>
-							{feature.description && (
-								<Typography variant="body_short_italic">{feature.description}</Typography>
-							)}
-						</Styled.SwitchLabel>
-						<Styled.Switch>
-							<Switch checked={feature.enabled} disabled={feature.readonly} />
-						</Styled.Switch>
-					</Styled.SwitchListItem>
-				);
-			})}
+			{features?.length > 0 ? (
+				features.map((feature) => {
+					return (
+						<Styled.SwitchListItem
+							key={`feat-${feature.key}`}
+							onClick={() => {
+								toggleFeature(feature.key);
+								props.onClick(feature);
+							}}
+						>
+							<Styled.SwitchLabel>
+								<Typography variant="body_short_bold">{feature.title ?? feature.key}</Typography>
+								{feature.description && (
+									<Typography variant="body_short_italic">{feature.description}</Typography>
+								)}
+							</Styled.SwitchLabel>
+							<Styled.Switch>
+								<Switch checked={feature.enabled} disabled={feature.readonly} />
+							</Styled.Switch>
+						</Styled.SwitchListItem>
+					);
+				})
+			) : (
+				<Styled.NoContent>
+					<Message type="NoContent" title="There is no app features for the current app" />
+				</Styled.NoContent>
+			)}
 		</Styled.SwitchList>
 	);
 };

client/packages/components/src/components/my-features/FeatureTogglerPortal.tsx

@@ -1,23 +1,37 @@
-import { useFrameworkFeatures } from '@equinor/fusion-framework-react/feature-flag';
+import { IFeatureFlag, useFrameworkFeatures } from '@equinor/fusion-framework-react/feature-flag';
 import { Typography, Switch } from '@equinor/eds-core-react';
 import { Styled } from './Styled';
+import { Message } from '@portal/ui';
 
 /**
  * Content for Feature toggler tab for portal features in the PersonSidesheet's Feature page.
  */
-export const FeatureTogglerPortal = () => {
+export const FeatureTogglerPortal = (props: { onClick: (feature: IFeatureFlag) => void }) => {
 	const { features, toggleFeature } = useFrameworkFeatures();
+
 	return (
 		<Styled.SwitchList>
-			{features?.map((feature) => (
-				<Styled.SwitchListItem key={`feat-${feature.key}`} onClick={() => toggleFeature(feature.key)}>
-					<Styled.SwitchLabel>
-						<Typography variant="body_short_bold">{feature.title ?? feature.key}</Typography>
-						<Typography variant="body_short_italic">{feature.description ?? ''}</Typography>
-					</Styled.SwitchLabel>
-					<Switch checked={feature.enabled} disabled={feature.readonly} />
-				</Styled.SwitchListItem>
-			))}
+			{features.length > 0 ? (
+				features.map((feature) => (
+					<Styled.SwitchListItem
+						key={`feat-${feature.key}`}
+						onClick={() => {
+							toggleFeature(feature.key);
+							props.onClick(feature);
+						}}
+					>
+						<Styled.SwitchLabel>
+							<Typography variant="body_short_bold">{feature.title ?? feature.key}</Typography>
+							<Typography variant="body_short_italic">{feature.description ?? ''}</Typography>
+						</Styled.SwitchLabel>
+						<Switch checked={feature.enabled} disabled={feature.readonly} />
+					</Styled.SwitchListItem>
+				))
+			) : (
+				<Styled.NoContent>
+					<Message type="NoContent" title="There are no portal features"></Message>
+				</Styled.NoContent>
+			)}
 		</Styled.SwitchList>
 	);
 };

client/packages/components/src/components/my-features/MyFeatures.tsx

@@ -7,6 +7,7 @@ import { tokens } from '@equinor/eds-tokens';
 import { useState } from 'react';
 import FeatureTogglerApp from './FeatureTogglerApp';
 import FeatureTogglerPortal from './FeatureTogglerPortal';
+import { useTelemetry } from '@equinor/portal-core';
 
 export const Style = {
 	Wrapper: styled.div`
@@ -54,6 +55,7 @@ export const Style = {
 
 export const MyFeatures = ({ onClick }: { onClick: VoidFunction }) => {
 	const [tab, setTab] = useState<number>(0);
+	const { dispatchEvent } = useTelemetry();
 
 	return (
 		<Style.Wrapper>
@@ -72,10 +74,38 @@ export const MyFeatures = ({ onClick }: { onClick: VoidFunction }) => {
 				</Tabs.List>
 				<Tabs.Panels>
 					<Tabs.Panel>
-						<FeatureTogglerPortal />
+						<FeatureTogglerPortal
+							onClick={(feature) => {
+								if (feature) {
+									dispatchEvent(
+										{
+											name: 'onPortalFeatureToggle',
+										},
+										{
+											key: feature.key,
+											title: feature.title,
+										}
+									);
+								}
+							}}
+						/>
 					</Tabs.Panel>
 					<Tabs.Panel>
-						<FeatureTogglerApp />
+						<FeatureTogglerApp
+							onClick={(feature) => {
+								if (feature) {
+									dispatchEvent(
+										{
+											name: 'onAppFeatureToggle',
+										},
+										{
+											key: feature.key,
+											title: feature.title,
+										}
+									);
+								}
+							}}
+						/>
 					</Tabs.Panel>
 				</Tabs.Panels>
 			</Tabs>

client/packages/components/src/components/my-features/Styled.tsx

@@ -1,29 +1,34 @@
 import styled from 'styled-components';
 export const Styled = {
-    SwitchList: styled.ul`
-        list-style: none;
-        padding-left: 0;
-    `,
-    SwitchListItem: styled.li`
-        display: flex;
-        flex-flow: row nowrap;
-        justify-content: space-between;
-        margin: 1em 0;
-        border-left: 3px solid var(--eds_interactive_primary__resting, rgba(0, 112, 121, 1));
-        cursor: pointer;
-    `,
-    SwitchLabel: styled.div`
-        display: flex;
-        flex-direction: column;
-        align-items: left;
-        justify-content: center;
-        width: 85%;
-        transform: scale(0.9);
-    `,
-    Switch: styled.div`
-        width: 15%;
-        display: flex;
-        justify-content: flex-end;
-        transform: scale(0.9);
-    `,
+	SwitchList: styled.ul`
+		list-style: none;
+		padding-left: 0;
+	`,
+	SwitchListItem: styled.li`
+		display: flex;
+		flex-flow: row nowrap;
+		justify-content: space-between;
+		margin: 1em 0;
+		border-left: 3px solid var(--eds_interactive_primary__resting, rgba(0, 112, 121, 1));
+		cursor: pointer;
+	`,
+	SwitchLabel: styled.div`
+		display: flex;
+		flex-direction: column;
+		align-items: left;
+		justify-content: center;
+		width: 85%;
+		transform: scale(0.9);
+	`,
+	Switch: styled.div`
+		width: 15%;
+		display: flex;
+		justify-content: flex-end;
+		transform: scale(0.9);
+	`,
+	NoContent: styled.div`
+		height: 35vh;
+		display: flex;
+		justify-content: center;
+	`,
 };

client/packages/components/src/components/portal-settings-tab/ActionItem.tsx

@@ -0,0 +1,38 @@
+import { Checkbox } from '@equinor/eds-core-react';
+
+import { PortalAction, useTopBarActions } from '@equinor/portal-core';
+import styled from 'styled-components';
+
+interface ActionItemProps {
+	action: PortalAction;
+	isFavorite: boolean;
+	showAsMenu?: boolean;
+}
+
+const Style = {
+	Wrapper: styled.div`
+		display: flex;
+	`,
+};
+
+export function ActionItem({ action, isFavorite }: ActionItemProps) {
+	const { toggleActionById } = useTopBarActions();
+
+	if (action.topParOnly || action.hidden) return null;
+
+	if (!action.dropDownOnly && action.icon) {
+		return (
+			<Style.Wrapper>
+				<Checkbox
+					checked={isFavorite}
+					label={action.name}
+					onChange={() => {
+						toggleActionById(action.actionId);
+					}}
+				/>
+			</Style.Wrapper>
+		);
+	}
+
+	return null;
+}