Feat/env toggle

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/amplify-component-lib",
-  "version": "10.7.0",
+  "version": "10.8.0",
   "description": "Frontend Typescript components for the Amplify team",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -53,7 +53,7 @@
   },
   "devDependencies": {
     "@equinor/eds-icons": "^0.22.0",
-    "@equinor/subsurface-app-management": "5.1.0",
+    "@equinor/subsurface-app-management": "5.2.0",
     "@eslint/js": "^9.22.0",
     "@faker-js/faker": "^9.6.0",
     "@storybook/addon-coverage": "^2.0.0",
@@ -114,7 +114,7 @@
     "@equinor/eds-core-react": "0.44.0",
     "@equinor/eds-data-grid-react": "^0.7.5",
     "@equinor/eds-icons": "*",
-    "@equinor/subsurface-app-management": "^5.1.0",
+    "@equinor/subsurface-app-management": "^5.2.0",
     "@tanstack/react-query": "*",
     "@tanstack/react-router": "*",
     "@tiptap/core": "^3.1.0",

public/mockServiceWorker.js

@@ -7,7 +7,7 @@
  * - Please do NOT modify this file.
  */
 
-const PACKAGE_VERSION = '2.12.1'
+const PACKAGE_VERSION = '2.12.4'
 const INTEGRITY_CHECKSUM = '4db4a41e972cec1b64cc569c66952d82'
 const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
 const activeClientIds = new Set()

src/atoms/utils/environmentToggle.ts

@@ -0,0 +1,52 @@
+import { EnvironmentToggleFeatures } from '@equinor/subsurface-app-management';
+
+import { colors } from 'src/atoms';
+import { StatusVariant } from 'src/organisms/TopBar/Account/Account.types';
+
+export function formatFeatureName(activeFeature: EnvironmentToggleFeatures) {
+  return (
+    activeFeature.charAt(0).toUpperCase() +
+    activeFeature.slice(1).replaceAll('-', ' ')
+  );
+}
+
+type ColorConfig = {
+  border: string;
+  background: string;
+  chipBackground: string;
+  outline: string;
+};
+
+const VARIANT_COLORS: Record<StatusVariant, ColorConfig> = {
+  combined: {
+    border: colors.interactive.success__resting.rgba,
+    background: colors.interactive.warning__text.rgba,
+    chipBackground: colors.interactive.warning__resting.rgba,
+    outline: colors.interactive.success__resting.rgba,
+  },
+  environment: {
+    border: colors.interactive.success__resting.rgba,
+    background: colors.interactive.success__text.rgba,
+    chipBackground: colors.interactive.success__resting.rgba,
+    outline: colors.interactive.success__resting.rgba,
+  },
+  impersonate: {
+    border: colors.interactive.warning__resting.rgba,
+    background: colors.interactive.warning__text.rgba,
+    chipBackground: colors.interactive.warning__resting.rgba,
+    outline: colors.interactive.warning__resting.rgba,
+  },
+};
+
+const DEFAULT_COLORS: ColorConfig = {
+  border: colors.interactive.warning__resting.rgba,
+  background: colors.interactive.warning__text.rgba,
+  chipBackground: colors.interactive.warning__resting.rgba,
+  outline: colors.interactive.warning__resting.rgba,
+};
+
+export function getVariantColors(
+  variant: StatusVariant | undefined
+): ColorConfig {
+  return variant ? VARIANT_COLORS[variant] : DEFAULT_COLORS;
+}

src/organisms/TopBar/Account/Account.styles.ts

@@ -19,6 +19,14 @@ export const Container = styled.div`
   gap: ${spacings.small};
 `;
 
+export const EnvironmentToggleWrapper = styled.div`
+  padding: ${spacings.medium} ${spacings.medium} 0 ${spacings.medium};
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: ${spacings.small};
+`;
+
 export const TextContent = styled.div`
   display: flex;
   flex-direction: column;
@@ -27,8 +35,10 @@ export const TextContent = styled.div`
 
 export const ButtonWrapper = styled.div`
   display: grid;
+  grid-auto-flow: column;
   margin-top: ${spacings.x_large};
   justify-content: center;
+  gap: ${spacings.small};
 `;
 export const OpenImpersonationMenuButton = styled.button`
   display: grid;

src/organisms/TopBar/Account/Account.tsx

@@ -12,25 +12,34 @@ import {
 
 import { Icon, Typography } from '@equinor/eds-core-react';
 import { log_out } from '@equinor/eds-icons';
+import { ENVIRONMENT_TOGGLE_KEY } from '@equinor/subsurface-app-management';
 
 import { TopBarMenu } from '../TopBarMenu';
 import { useActiveImpersonationUser } from './ImpersonateMenu/hooks/useActiveImpersonationUser';
 import { useCanImpersonate } from './ImpersonateMenu/hooks/useCanImpersonate';
 import { useMappedRoles } from './ImpersonateMenu/hooks/useMappedRoles';
 import { useStopImpersonation } from './ImpersonateMenu/hooks/useStopImpersonation';
 import { ImpersonateMenu } from './ImpersonateMenu/ImpersonateMenu';
-import { ButtonWrapper, Container, TextContent } from './Account.styles';
+import {
+  ButtonWrapper,
+  Container,
+  EnvironmentToggleWrapper,
+  TextContent,
+} from './Account.styles';
 import { AccountAvatar } from './AccountAvatar';
 import { AccountButton } from './AccountButton';
 import { ActiveUserImpersonationButton } from './ActiveUserImpersonationButton';
 import { ImpersonateButton } from './ImpersonateButton';
-import { RoleChips } from './RoleChips';
 import { RoleList } from './RoleList';
+import { useLocalStorage } from 'src/atoms';
 import { EnvironmentType } from 'src/atoms/enums/Environment';
 import { Field } from 'src/atoms/types/Field';
 import { environment } from 'src/atoms/utils/auth_environment';
+import { SelectOptionRequired } from 'src/molecules';
 import { Button } from 'src/molecules/Button/Button';
+import { EnvironmentToggle } from 'src/organisms/TopBar/Account/EnvironmentToggle';
 import { impersonateUserDtoToFullName } from 'src/organisms/TopBar/Account/ImpersonateMenu/Impersonate.utils';
+import { StatusChips } from 'src/organisms/TopBar/Account/StatusChips';
 import { useAuth } from 'src/providers/AuthProvider/AuthProvider';
 
 export interface AccountProps {
@@ -43,6 +52,7 @@ export interface AccountProps {
   children?: ReactNode;
   availableFields?: Field[];
   availableWells?: string[];
+  enableEnvironmentToggle?: boolean;
 }
 
 export const Account: FC<AccountProps> = ({
@@ -52,6 +62,7 @@ export const Account: FC<AccountProps> = ({
   children,
   availableFields,
   availableWells,
+  enableEnvironmentToggle = false,
 }) => {
   const ACTIVE_ENVIRONMENT = environment.getEnvironmentName(
     import.meta.env.VITE_ENVIRONMENT_NAME
@@ -63,6 +74,10 @@ export const Account: FC<AccountProps> = ({
   const { account, roles, logout } = useAuth();
   const [isOpen, setIsOpen] = useState(false);
   const [openImpersonate, setOpenImpersonate] = useState(false);
+  const [environmentToggle, setEnvironmentToggle] = useLocalStorage<
+    SelectOptionRequired[]
+  >(ENVIRONMENT_TOGGLE_KEY, []);
+
   const buttonRef = useRef<HTMLButtonElement | null>(null);
   const { data: canImpersonate = true } = useCanImpersonate();
   const { data: activeImpersonationUser } = useActiveImpersonationUser();
@@ -116,7 +131,11 @@ export const Account: FC<AccountProps> = ({
       {customButton ? (
         customButton
       ) : (
-        <AccountButton ref={buttonRef} onClick={handleToggleMenu} />
+        <AccountButton
+          ref={buttonRef}
+          onClick={handleToggleMenu}
+          environmentToggle={environmentToggle}
+        />
       )}
       <TopBarMenu
         open={isOpen}
@@ -128,15 +147,19 @@ export const Account: FC<AccountProps> = ({
           {activeImpersonationUser && (
             <ActiveUserImpersonationButton onClick={handleOpenImpersonate} />
           )}
-          <AccountAvatar />
+          <AccountAvatar environmentToggle={environmentToggle} />
           <TextContent>
             <Typography variant="h6">{fullName}</Typography>
             <Typography>{username}</Typography>
           </TextContent>
+
+          {environmentToggle.length > 0 && (
+            <StatusChips statuses={environmentToggle} />
+          )}
           {activeRoles && !hideRoles && (
             <>
               {activeRoles.length <= 3 ? (
-                <RoleChips roles={activeRoles} />
+                <StatusChips statuses={activeRoles} />
               ) : (
                 <RoleList roles={activeRoles} />
               )}
@@ -152,6 +175,15 @@ export const Account: FC<AccountProps> = ({
               />
             )}
         </Container>
+        {enableEnvironmentToggle &&
+          ACTIVE_ENVIRONMENT !== EnvironmentType.PRODUCTION && (
+            <EnvironmentToggleWrapper>
+              <EnvironmentToggle
+                setEnvironmentToggle={setEnvironmentToggle}
+                environmentToggle={environmentToggle}
+              />
+            </EnvironmentToggleWrapper>
+          )}
         <ButtonWrapper>
           <Button variant="ghost" onClick={logout}>
             <Icon data={log_out} />

src/organisms/TopBar/Account/Account.types.ts

@@ -0,0 +1,4 @@
+export type StatusVariant = 'impersonate' | 'environment' | 'combined';
+export interface StatusVariantProps {
+  $variant?: StatusVariant;
+}

src/organisms/TopBar/Account/AccountAvatar.tsx

@@ -1,10 +1,14 @@
 import { FC } from 'react';
 
 import { useActiveImpersonationUser } from './ImpersonateMenu/hooks/useActiveImpersonationUser';
-import { colors, spacings } from 'src/atoms/style';
+import { spacings } from 'src/atoms/style';
+import { getVariantColors } from 'src/atoms/utils/environmentToggle';
+import { SelectOptionRequired } from 'src/molecules';
 import { Chip } from 'src/molecules/Chip/Chip';
 import { ProfileAvatar } from 'src/molecules/ProfileAvatar/ProfileAvatar';
-import { ImpersonateAvatar } from 'src/organisms/TopBar/Account/ImpersonateAvatar';
+import { StatusVariantProps } from 'src/organisms/TopBar/Account/Account.types';
+import { impersonateUserDtoToFullName } from 'src/organisms/TopBar/Account/ImpersonateMenu/Impersonate.utils';
+import { StatusAvatar } from 'src/organisms/TopBar/Account/StatusAvatar';
 import { useAuth } from 'src/providers/AuthProvider/AuthProvider';
 
 import styled from 'styled-components';
@@ -14,27 +18,73 @@ const Wrapper = styled.div`
   margin-bottom: ${spacings.small};
 `;
 
-const ImpersonateChip = styled(Chip)`
+const StatusChip = styled(Chip)<StatusVariantProps>`
   position: absolute;
   bottom: calc(${spacings.x_small} * -1);
   left: 50%;
   transform: translateX(-50%);
-  background: ${colors.interactive.warning__resting.rgba};
-  outline-color: ${colors.interactive.warning__resting.rgba};
+  white-space: nowrap;
+  background: ${({ $variant }) => getVariantColors($variant).chipBackground};
+  outline-color: ${({ $variant }) => getVariantColors($variant).outline};
 `;
 
-export const AccountAvatar: FC = () => {
+interface AccountAvatarProps {
+  environmentToggle?: SelectOptionRequired[];
+}
+
+export const AccountAvatar: FC<AccountAvatarProps> = ({
+  environmentToggle,
+}) => {
   const { account, photo } = useAuth();
   const { data: activeImpersonationUser } = useActiveImpersonationUser();
+  const fullName = activeImpersonationUser
+    ? impersonateUserDtoToFullName(activeImpersonationUser)
+    : account?.name;
+
+  const isActiveFeatureOnCurrentEnvironment =
+    environmentToggle != null && environmentToggle.length > 0;
+  const activeFeatureNames =
+    environmentToggle == null
+      ? ''
+      : environmentToggle.map((x) => x.label).join(', ');
+
+  const getAvatar = () => {
+    if (isActiveFeatureOnCurrentEnvironment && activeImpersonationUser) {
+      return (
+        <>
+          <StatusAvatar
+            size={64}
+            variant="combined"
+            name="Impersonate & Environment"
+          />
+          <StatusChip $variant="combined">Impersonate & Environment</StatusChip>
+        </>
+      );
+    }
+    if (isActiveFeatureOnCurrentEnvironment) {
+      return (
+        <>
+          <StatusAvatar
+            size={64}
+            variant="environment"
+            name={activeFeatureNames}
+          />
+          <StatusChip $variant="environment">Environment</StatusChip>
+        </>
+      );
+    }
+
+    if (activeImpersonationUser) {
+      return (
+        <>
+          <StatusAvatar size={64} variant="impersonate" name={fullName} />
+          <StatusChip $variant="impersonate">Impersonating</StatusChip>
+        </>
+      );
+    }
 
-  if (activeImpersonationUser) {
-    return (
-      <Wrapper>
-        <ImpersonateAvatar size={64} />
-        <ImpersonateChip>Impersonating</ImpersonateChip>
-      </Wrapper>
-    );
-  }
+    return <ProfileAvatar size={64} name={account?.name} url={photo} />;
+  };
 
-  return <ProfileAvatar size={64} name={account?.name} url={photo} />;
+  return <Wrapper>{getAvatar()}</Wrapper>;
 };