@equinor/roma-framework 3.0.1 → 5.0.0-beta.0

package/roma-framework.mjs

@@ -1,11 +1,3 @@
-var __typeError = (msg) => {
-  throw TypeError(msg);
-};
-var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
-var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
-var _config, _connections, _builderCallbacks, _endpoints, _manifests;
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useFramework, FrameworkProvider } from "@equinor/fusion-framework-react";
 import { configureModules } from "@equinor/fusion-framework-app";
@@ -13,25 +5,25 @@ import * as React from "react";
 import { useState, useEffect, lazy, useRef, createContext, useContext, useMemo } from "react";
 import { ModuleProvider } from "@equinor/fusion-framework-react-module";
 import styled, { StyleSheetManager, keyframes } from "styled-components";
-import { EdsProvider, StarProgress, Typography, Card, Button, TopBar, SideSheet, Menu, Tooltip, Icon } from "@equinor/eds-core-react";
-import { E as EmptyError, o as operate, c as createOperatorSubscriber, i as innerFrom, a as identity, b as isFunction, I as IntlProvider, d as invariant, j as joinPaths, g as getPathContributingMatches, r as resolveTo, w as warning, s as stripBasename, e as createPath, B as BehaviorSubject, f as firstValueFrom, h as getDefaultExportFromCjs, k as of, l as from } from "./router-DDzmmkip.mjs";
+import { EdsProvider, StarProgress, Typography, Card, Button, TopBar, Chip, SideSheet, Menu, Tooltip, Icon, List } from "@equinor/eds-core-react";
+import { E as EmptyError, o as operate, c as createOperatorSubscriber, i as innerFrom, a as identity, b as isFunction, I as IntlProvider, d as invariant, j as joinPaths, g as getResolveToMatches, r as resolveTo, w as warning, s as stripBasename, e as createPath, m as matchPath, B as BehaviorSubject, f as firstValueFrom, h as getDefaultExportFromCjs, k as of, l as from } from "./router-lZjM0_Ti.mjs";
 import { QueryClient, QueryClientProvider, useQueryClient, useQuery, useMutation } from "@tanstack/react-query";
 import { useCurrentApp, useApps as useApps$1 } from "@equinor/fusion-framework-react/app";
 import { App } from "@equinor/fusion-framework-module-app/app";
+import { tokens } from "@equinor/eds-tokens";
+import "react-dom";
 import { comment_more, accessible, account_circle, help_outline } from "@equinor/eds-icons";
 import { enableAppModule } from "@equinor/fusion-framework-module-app";
 import { enableContext } from "@equinor/fusion-framework-module-context";
 import { enableNavigation } from "@equinor/fusion-framework-module-navigation";
 import { ModuleConfigBuilder } from "@equinor/fusion-framework-module";
 import { enableServiceDiscovery } from "@equinor/fusion-framework-module-service-discovery";
-import { tokens } from "@equinor/eds-tokens";
 import { useHttpClient } from "@equinor/fusion-framework-react-module-http";
 const createExtraScopePlugin = (scope) => {
   const plugin = (element, index, childEls) => {
     if (element.type === "rule") {
       element.props = element.props.map((value) => {
-        var _a;
-        if (((_a = element.parent) == null ? void 0 : _a.type) === "@keyframes") {
+        if (element.parent?.type === "@keyframes") {
           return value;
         }
         const containerMatch = `div[id^='eds-']`;
@@ -335,7 +327,6 @@ function AppLoader({
     return appModule;
   }
   useEffect(() => {
-    var _a;
     setError(null);
     if (!app) {
       dispatchEvent("onAppInitializeFailed", { detail: "App not found" });
@@ -344,13 +335,13 @@ function AppLoader({
     }
     setLoading(true);
     const el = document.createElement("div");
-    (_a = ref.current) == null ? void 0 : _a.appendChild(el);
+    ref.current?.appendChild(el);
     const appModule = renderApplication(el);
     setLoading(false);
     const currentRef = ref.current;
     return () => {
       try {
-        currentRef == null ? void 0 : currentRef.removeChild(el);
+        currentRef?.removeChild(el);
       } catch {
       }
       appModule.dispose();
@@ -368,16 +359,6 @@ function AppLoader({
     error && /* @__PURE__ */ jsx(ErrorViewer, { error })
   ] });
 }
-/**
- * React Router v6.15.0
- *
- * Copyright (c) Remix Software Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE.md file in the root directory of this source tree.
- *
- * @license MIT
- */
 function _extends$1() {
   _extends$1 = Object.assign ? Object.assign.bind() : function(target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -490,6 +471,7 @@ function useNavigateUnstable() {
   let dataRouterContext = React.useContext(DataRouterContext);
   let {
     basename,
+    future,
     navigator: navigator2
   } = React.useContext(NavigationContext);
   let {
@@ -498,7 +480,7 @@ function useNavigateUnstable() {
   let {
     pathname: locationPathname
   } = useLocation();
-  let routePathnamesJson = JSON.stringify(getPathContributingMatches(matches).map((match) => match.pathnameBase));
+  let routePathnamesJson = JSON.stringify(getResolveToMatches(matches, future.v7_relativeSplatPath));
   let activeRef = React.useRef(false);
   useIsomorphicLayoutEffect(() => {
     activeRef.current = true;
@@ -532,22 +514,25 @@ function useResolvedPath(to, _temp2) {
   let {
     relative
   } = _temp2 === void 0 ? {} : _temp2;
+  let {
+    future
+  } = React.useContext(NavigationContext);
   let {
     matches
   } = React.useContext(RouteContext);
   let {
     pathname: locationPathname
   } = useLocation();
-  let routePathnamesJson = JSON.stringify(getPathContributingMatches(matches).map((match) => match.pathnameBase));
+  let routePathnamesJson = JSON.stringify(getResolveToMatches(matches, future.v7_relativeSplatPath));
   return React.useMemo(() => resolveTo(to, JSON.parse(routePathnamesJson), locationPathname, relative === "path"), [to, routePathnamesJson, locationPathname, relative]);
 }
-var DataRouterHook$1 = /* @__PURE__ */ function(DataRouterHook2) {
+var DataRouterHook$1 = /* @__PURE__ */ (function(DataRouterHook2) {
   DataRouterHook2["UseBlocker"] = "useBlocker";
   DataRouterHook2["UseRevalidator"] = "useRevalidator";
   DataRouterHook2["UseNavigateStable"] = "useNavigate";
   return DataRouterHook2;
-}(DataRouterHook$1 || {});
-var DataRouterStateHook$1 = /* @__PURE__ */ function(DataRouterStateHook2) {
+})(DataRouterHook$1 || {});
+var DataRouterStateHook$1 = /* @__PURE__ */ (function(DataRouterStateHook2) {
   DataRouterStateHook2["UseBlocker"] = "useBlocker";
   DataRouterStateHook2["UseLoaderData"] = "useLoaderData";
   DataRouterStateHook2["UseActionData"] = "useActionData";
@@ -559,9 +544,9 @@ var DataRouterStateHook$1 = /* @__PURE__ */ function(DataRouterStateHook2) {
   DataRouterStateHook2["UseNavigateStable"] = "useNavigate";
   DataRouterStateHook2["UseRouteId"] = "useRouteId";
   return DataRouterStateHook2;
-}(DataRouterStateHook$1 || {});
+})(DataRouterStateHook$1 || {});
 function getDataRouterConsoleError$1(hookName) {
-  return hookName + " must be used within a data router.  See https://reactrouter.com/routers/picking-a-router.";
+  return hookName + " must be used within a data router.  See https://reactrouter.com/v6/routers/picking-a-router.";
 }
 function useDataRouterContext$1(hookName) {
   let ctx = React.useContext(DataRouterContext);
@@ -609,16 +594,6 @@ function useNavigateStable() {
 }
 new Promise(() => {
 });
-/**
- * React Router DOM v6.15.0
- *
- * Copyright (c) Remix Software Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE.md file in the root directory of this source tree.
- *
- * @license MIT
- */
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function(target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -747,11 +722,26 @@ function getFormSubmissionInfo(target, basename) {
     body
   };
 }
-const _excluded = ["onClick", "relative", "reloadDocument", "replace", "state", "target", "to", "preventScrollReset"], _excluded2 = ["aria-current", "caseSensitive", "className", "end", "style", "to", "children"], _excluded3 = ["reloadDocument", "replace", "state", "method", "action", "onSubmit", "submit", "relative", "preventScrollReset"];
+const _excluded = ["onClick", "relative", "reloadDocument", "replace", "state", "target", "to", "preventScrollReset", "viewTransition"], _excluded2 = ["aria-current", "caseSensitive", "className", "end", "style", "to", "viewTransition", "children"], _excluded3 = ["fetcherKey", "navigate", "reloadDocument", "replace", "state", "method", "action", "onSubmit", "relative", "preventScrollReset", "viewTransition"];
+const REACT_ROUTER_VERSION = "6";
+try {
+  window.__reactRouterVersion = REACT_ROUTER_VERSION;
+} catch (e) {
+}
+const ViewTransitionContext = /* @__PURE__ */ React.createContext({
+  isTransitioning: false
+});
+if (process.env.NODE_ENV !== "production") {
+  ViewTransitionContext.displayName = "ViewTransition";
+}
+const FetchersContext = /* @__PURE__ */ React.createContext(/* @__PURE__ */ new Map());
+if (process.env.NODE_ENV !== "production") {
+  FetchersContext.displayName = "Fetchers";
+}
 if (process.env.NODE_ENV !== "production") ;
 const isBrowser = typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined";
 const ABSOLUTE_URL_REGEX = /^(?:[a-z][a-z0-9+.-]*:|\/\/)/i;
-const Link = /* @__PURE__ */ React.forwardRef(function LinkWithRef(_ref4, ref) {
+const Link = /* @__PURE__ */ React.forwardRef(function LinkWithRef(_ref7, ref) {
   let {
     onClick,
     relative,
@@ -760,8 +750,9 @@ const Link = /* @__PURE__ */ React.forwardRef(function LinkWithRef(_ref4, ref) {
     state,
     target,
     to,
-    preventScrollReset
-  } = _ref4, rest = _objectWithoutPropertiesLoose(_ref4, _excluded);
+    preventScrollReset,
+    viewTransition
+  } = _ref7, rest = _objectWithoutPropertiesLoose(_ref7, _excluded);
   let {
     basename
   } = React.useContext(NavigationContext);
@@ -792,7 +783,8 @@ const Link = /* @__PURE__ */ React.forwardRef(function LinkWithRef(_ref4, ref) {
     state,
     target,
     preventScrollReset,
-    relative
+    relative,
+    viewTransition
   });
   function handleClick(event) {
     if (onClick) onClick(event);
@@ -813,7 +805,7 @@ const Link = /* @__PURE__ */ React.forwardRef(function LinkWithRef(_ref4, ref) {
 if (process.env.NODE_ENV !== "production") {
   Link.displayName = "Link";
 }
-const NavLink = /* @__PURE__ */ React.forwardRef(function NavLinkWithRef(_ref5, ref) {
+const NavLink = /* @__PURE__ */ React.forwardRef(function NavLinkWithRef(_ref8, ref) {
   let {
     "aria-current": ariaCurrentProp = "page",
     caseSensitive = false,
@@ -821,16 +813,21 @@ const NavLink = /* @__PURE__ */ React.forwardRef(function NavLinkWithRef(_ref5,
     end = false,
     style: styleProp,
     to,
+    viewTransition,
     children
-  } = _ref5, rest = _objectWithoutPropertiesLoose(_ref5, _excluded2);
+  } = _ref8, rest = _objectWithoutPropertiesLoose(_ref8, _excluded2);
   let path = useResolvedPath(to, {
     relative: rest.relative
   });
   let location = useLocation();
   let routerState = React.useContext(DataRouterStateContext);
   let {
-    navigator: navigator2
+    navigator: navigator2,
+    basename
   } = React.useContext(NavigationContext);
+  let isTransitioning = routerState != null && // Conditional usage is OK here because the usage of a data router is static
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useViewTransitionState(path) && viewTransition === true;
   let toPathname = navigator2.encodeLocation ? navigator2.encodeLocation(path).pathname : path.pathname;
   let locationPathname = location.pathname;
   let nextLocationPathname = routerState && routerState.navigation && routerState.navigation.location ? routerState.navigation.location.pathname : null;
@@ -839,62 +836,56 @@ const NavLink = /* @__PURE__ */ React.forwardRef(function NavLinkWithRef(_ref5,
     nextLocationPathname = nextLocationPathname ? nextLocationPathname.toLowerCase() : null;
     toPathname = toPathname.toLowerCase();
   }
-  let isActive = locationPathname === toPathname || !end && locationPathname.startsWith(toPathname) && locationPathname.charAt(toPathname.length) === "/";
+  if (nextLocationPathname && basename) {
+    nextLocationPathname = stripBasename(nextLocationPathname, basename) || nextLocationPathname;
+  }
+  const endSlashPosition = toPathname !== "/" && toPathname.endsWith("/") ? toPathname.length - 1 : toPathname.length;
+  let isActive = locationPathname === toPathname || !end && locationPathname.startsWith(toPathname) && locationPathname.charAt(endSlashPosition) === "/";
   let isPending = nextLocationPathname != null && (nextLocationPathname === toPathname || !end && nextLocationPathname.startsWith(toPathname) && nextLocationPathname.charAt(toPathname.length) === "/");
+  let renderProps = {
+    isActive,
+    isPending,
+    isTransitioning
+  };
   let ariaCurrent = isActive ? ariaCurrentProp : void 0;
   let className;
   if (typeof classNameProp === "function") {
-    className = classNameProp({
-      isActive,
-      isPending
-    });
+    className = classNameProp(renderProps);
   } else {
-    className = [classNameProp, isActive ? "active" : null, isPending ? "pending" : null].filter(Boolean).join(" ");
+    className = [classNameProp, isActive ? "active" : null, isPending ? "pending" : null, isTransitioning ? "transitioning" : null].filter(Boolean).join(" ");
   }
-  let style = typeof styleProp === "function" ? styleProp({
-    isActive,
-    isPending
-  }) : styleProp;
+  let style = typeof styleProp === "function" ? styleProp(renderProps) : styleProp;
   return /* @__PURE__ */ React.createElement(Link, _extends({}, rest, {
     "aria-current": ariaCurrent,
     className,
     ref,
     style,
-    to
-  }), typeof children === "function" ? children({
-    isActive,
-    isPending
-  }) : children);
+    to,
+    viewTransition
+  }), typeof children === "function" ? children(renderProps) : children);
 });
 if (process.env.NODE_ENV !== "production") {
   NavLink.displayName = "NavLink";
 }
-const Form = /* @__PURE__ */ React.forwardRef((props, ref) => {
-  let submit = useSubmit();
-  return /* @__PURE__ */ React.createElement(FormImpl, _extends({}, props, {
-    submit,
-    ref
-  }));
-});
-if (process.env.NODE_ENV !== "production") {
-  Form.displayName = "Form";
-}
-const FormImpl = /* @__PURE__ */ React.forwardRef((_ref6, forwardedRef) => {
+const Form = /* @__PURE__ */ React.forwardRef((_ref9, forwardedRef) => {
   let {
+    fetcherKey,
+    navigate,
     reloadDocument,
     replace,
     state,
     method = defaultMethod,
     action,
     onSubmit,
-    submit,
     relative,
-    preventScrollReset
-  } = _ref6, props = _objectWithoutPropertiesLoose(_ref6, _excluded3);
-  let formMethod = method.toLowerCase() === "get" ? "get" : "post";
+    preventScrollReset,
+    viewTransition
+  } = _ref9, props = _objectWithoutPropertiesLoose(_ref9, _excluded3);
+  let submit = useSubmit();
   let formAction = useFormAction(action, {
     relative
   });
+  let formMethod = method.toLowerCase() === "get" ? "get" : "post";
   let submitHandler = (event) => {
     onSubmit && onSubmit(event);
     if (event.defaultPrevented) return;
@@ -902,11 +893,14 @@ const FormImpl = /* @__PURE__ */ React.forwardRef((_ref6, forwardedRef) => {
     let submitter = event.nativeEvent.submitter;
     let submitMethod = (submitter == null ? void 0 : submitter.getAttribute("formmethod")) || method;
     submit(submitter || event.currentTarget, {
+      fetcherKey,
       method: submitMethod,
+      navigate,
       replace,
       state,
       relative,
-      preventScrollReset
+      preventScrollReset,
+      viewTransition
     });
   };
   return /* @__PURE__ */ React.createElement("form", _extends({
@@ -917,7 +911,7 @@ const FormImpl = /* @__PURE__ */ React.forwardRef((_ref6, forwardedRef) => {
   }, props));
 });
 if (process.env.NODE_ENV !== "production") {
-  FormImpl.displayName = "FormImpl";
+  Form.displayName = "Form";
 }
 if (process.env.NODE_ENV !== "production") ;
 var DataRouterHook;
@@ -926,14 +920,16 @@ var DataRouterHook;
   DataRouterHook2["UseSubmit"] = "useSubmit";
   DataRouterHook2["UseSubmitFetcher"] = "useSubmitFetcher";
   DataRouterHook2["UseFetcher"] = "useFetcher";
+  DataRouterHook2["useViewTransitionState"] = "useViewTransitionState";
 })(DataRouterHook || (DataRouterHook = {}));
 var DataRouterStateHook;
 (function(DataRouterStateHook2) {
+  DataRouterStateHook2["UseFetcher"] = "useFetcher";
   DataRouterStateHook2["UseFetchers"] = "useFetchers";
   DataRouterStateHook2["UseScrollRestoration"] = "useScrollRestoration";
 })(DataRouterStateHook || (DataRouterStateHook = {}));
 function getDataRouterConsoleError(hookName) {
-  return hookName + " must be used within a data router.  See https://reactrouter.com/routers/picking-a-router.";
+  return hookName + " must be used within a data router.  See https://reactrouter.com/v6/routers/picking-a-router.";
 }
 function useDataRouterContext(hookName) {
   let ctx = React.useContext(DataRouterContext);
@@ -946,7 +942,8 @@ function useLinkClickHandler(to, _temp) {
     replace: replaceProp,
     state,
     preventScrollReset,
-    relative
+    relative,
+    viewTransition
   } = _temp === void 0 ? {} : _temp;
   let navigate = useNavigate();
   let location = useLocation();
@@ -961,16 +958,19 @@ function useLinkClickHandler(to, _temp) {
         replace,
         state,
         preventScrollReset,
-        relative
+        relative,
+        viewTransition
       });
     }
-  }, [location, navigate, path, replaceProp, state, target, to, preventScrollReset, relative]);
+  }, [location, navigate, path, replaceProp, state, target, to, preventScrollReset, relative, viewTransition]);
 }
 function validateClientSideSubmission() {
   if (typeof document === "undefined") {
     throw new Error("You are calling submit during the server render. Try calling submit within a `useEffect` or callback instead.");
   }
 }
+let fetcherId = 0;
+let getUniqueFetcherId = () => "__" + String(++fetcherId) + "__";
 function useSubmit() {
   let {
     router
@@ -991,16 +991,30 @@ function useSubmit() {
       formData,
       body
     } = getFormSubmissionInfo(target, basename);
-    router.navigate(options.action || action, {
-      preventScrollReset: options.preventScrollReset,
-      formData,
-      body,
-      formMethod: options.method || method,
-      formEncType: options.encType || encType,
-      replace: options.replace,
-      state: options.state,
-      fromRouteId: currentRouteId
-    });
+    if (options.navigate === false) {
+      let key = options.fetcherKey || getUniqueFetcherId();
+      router.fetch(key, currentRouteId, options.action || action, {
+        preventScrollReset: options.preventScrollReset,
+        formData,
+        body,
+        formMethod: options.method || method,
+        formEncType: options.encType || encType,
+        flushSync: options.flushSync
+      });
+    } else {
+      router.navigate(options.action || action, {
+        preventScrollReset: options.preventScrollReset,
+        formData,
+        body,
+        formMethod: options.method || method,
+        formEncType: options.encType || encType,
+        replace: options.replace,
+        state: options.state,
+        fromRouteId: currentRouteId,
+        flushSync: options.flushSync,
+        viewTransition: options.viewTransition
+      });
+    }
   }, [router, basename, currentRouteId]);
 }
 function useFormAction(action, _temp2) {
@@ -1019,10 +1033,14 @@ function useFormAction(action, _temp2) {
   let location = useLocation();
   if (action == null) {
     path.search = location.search;
-    if (match.route.index) {
-      let params = new URLSearchParams(path.search);
+    let params = new URLSearchParams(path.search);
+    let indexValues = params.getAll("index");
+    let hasNakedIndexParam = indexValues.some((v) => v === "");
+    if (hasNakedIndexParam) {
       params.delete("index");
-      path.search = params.toString() ? "?" + params.toString() : "";
+      indexValues.filter((v) => v).forEach((v) => params.append("index", v));
+      let qs = params.toString();
+      path.search = qs ? "?" + qs : "";
     }
   }
   if ((!action || action === ".") && match.route.index) {
@@ -1033,6 +1051,25 @@ function useFormAction(action, _temp2) {
   }
   return createPath(path);
 }
+function useViewTransitionState(to, opts) {
+  if (opts === void 0) {
+    opts = {};
+  }
+  let vtContext = React.useContext(ViewTransitionContext);
+  !(vtContext != null) ? process.env.NODE_ENV !== "production" ? invariant(false, "`useViewTransitionState` must be used within `react-router-dom`'s `RouterProvider`.  Did you accidentally import `RouterProvider` from `react-router`?") : invariant(false) : void 0;
+  let {
+    basename
+  } = useDataRouterContext(DataRouterHook.useViewTransitionState);
+  let path = useResolvedPath(to, {
+    relative: opts.relative
+  });
+  if (!vtContext.isTransitioning) {
+    return false;
+  }
+  let currentPath = stripBasename(vtContext.currentLocation.pathname, basename) || vtContext.currentLocation.pathname;
+  let nextPath = stripBasename(vtContext.nextLocation.pathname, basename) || vtContext.nextLocation.pathname;
+  return matchPath(path.pathname, nextPath) != null || matchPath(path.pathname, currentPath) != null;
+}
 const AppContext = createContext({
   isLoading: false,
   apps: void 0
@@ -1089,7 +1126,7 @@ const AppViewer = () => {
   const { appKey } = useParams();
   const { apps } = useApps({ includeHidden: true });
   const app = useMemo(() => {
-    return apps == null ? void 0 : apps.find((app2) => app2.appKey === appKey);
+    return apps?.find((app2) => app2.appKey === appKey);
   }, [appKey, apps]);
   if (!apps) {
     return /* @__PURE__ */ jsx(EquinorLoader, { text: "Loading apps..." });
@@ -1138,6 +1175,12 @@ const Styled = {
     margin-left: 1.5rem;
   `
 };
+const EnvChip = styled(Chip)`
+  background-color: ${tokens.colors.interactive.primary__resting.rgba};
+  color: ${tokens.colors.text.static_icons__primary_white.hex};
+  margin-left: 16px;
+  padding: 0 32px;
+`;
 const StyledSideSheet = styled(SideSheet)`
   position: fixed;
   right: 0;
@@ -1189,17 +1232,16 @@ const HeaderMenu = ({ menuState }) => {
   const { event } = useFramework().modules;
   const { auth } = useFramework().modules;
   const user = useMemo(() => {
-    return auth.defaultAccount;
+    return auth.account;
   }, [auth]);
   const roles = useMemo(() => {
-    var _a;
-    return ((_a = user == null ? void 0 : user.idTokenClaims) == null ? void 0 : _a.roles) ?? ["No access role"];
+    return user?.idTokenClaims?.roles ?? ["No access role"];
   }, [user]);
   const getFeedbackAreaFromTags = (currentApp2, applications2) => {
     const manifest = applications2.find(
-      (app) => app.appKey === (currentApp2 == null ? void 0 : currentApp2.appKey)
+      (app) => app.appKey === currentApp2?.appKey
     );
-    const tags = (manifest == null ? void 0 : manifest.keywords) ?? [];
+    const tags = manifest?.keywords ?? [];
     if (tags.includes("trading")) return "10543";
     if (tags.includes("liquids-operations")) return "10511";
     return "10540";
@@ -1310,6 +1352,16 @@ const HeaderMenu = ({ menuState }) => {
     ) })
   ] });
 };
+const getEnvironment = async () => {
+  const request = await fetch("/_discovery/environments/current");
+  const environment = await request.json();
+  const isProd = environment.type === "Production";
+  return {
+    name: environment.type,
+    environmentName: environment.environmentName,
+    isProd
+  };
+};
 const Header = () => {
   const [a11yOpen, setA11yOpen] = useState(false);
   const [userMenuOpen, setUserMenuOpen] = useState(false);
@@ -1323,15 +1375,31 @@ const Header = () => {
     activityLogOpen,
     setActivityLogOpen
   };
+  const [env, setEnv] = useState(null);
+  useEffect(() => {
+    getEnvironment().then((info) => {
+      setEnv(info);
+    });
+  }, []);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(TopBarFadeIn, { id: "cli-top-bar", children: [
-      /* @__PURE__ */ jsx(TopBar.Header, { children: /* @__PURE__ */ jsxs(Styled.Title, { children: [
-        /* @__PURE__ */ jsx(Icon, { color: "#eb0037", data: logoIcon, viewBox: "0 0 42 48" }),
-        /* @__PURE__ */ jsx("span", { children: "Roma" })
-      ] }) }),
-      /* @__PURE__ */ jsx(TopBar.CustomContent, {}),
-      /* @__PURE__ */ jsx(TopBar.Actions, { children: /* @__PURE__ */ jsx(HeaderMenu, { menuState: headerMenuState }) })
-    ] }),
+    /* @__PURE__ */ jsxs(
+      TopBarFadeIn,
+      {
+        id: "cli-top-bar",
+        style: !env?.isProd ? {
+          backgroundColor: tokens.colors.interactive.warning__highlight.rgba
+        } : void 0,
+        children: [
+          /* @__PURE__ */ jsx(TopBar.Header, { children: /* @__PURE__ */ jsxs(Styled.Title, { children: [
+            /* @__PURE__ */ jsx(Icon, { color: "#eb0037", data: logoIcon, viewBox: "0 0 42 48" }),
+            /* @__PURE__ */ jsx("span", { children: "Roma" }),
+            env && !env?.isProd && /* @__PURE__ */ jsx(EnvChip, { children: env?.environmentName?.split(" ")[0].toUpperCase() })
+          ] }) }),
+          /* @__PURE__ */ jsx(TopBar.CustomContent, {}),
+          /* @__PURE__ */ jsx(TopBar.Actions, { children: /* @__PURE__ */ jsx(HeaderMenu, { menuState: headerMenuState }) })
+        ]
+      }
+    ),
     /* @__PURE__ */ jsx(SideSheets, { apps: allApps, menuState: headerMenuState })
   ] });
 };
@@ -1670,50 +1738,46 @@ class Connection {
   }
 }
 class SseModuleProvider {
+  #config;
+  #connections = {};
   constructor(config) {
-    __privateAdd(this, _config);
-    __privateAdd(this, _connections, {});
-    __privateSet(this, _config, config);
+    this.#config = config;
   }
   connect(name) {
-    if (!(name in __privateGet(this, _connections))) {
-      __privateGet(this, _connections)[name] = new Connection();
-      const options = __privateGet(this, _config).endpoints[name];
+    if (!(name in this.#connections)) {
+      this.#connections[name] = new Connection();
+      const options = this.#config.endpoints[name];
       this.createConnection(name, options);
     }
-    return __privateGet(this, _connections)[name];
+    return this.#connections[name];
   }
   createConnection(name, options) {
-    const config = __privateGet(this, _connections)[name];
+    const config = this.#connections[name];
     setupEventSource(options, config.messageList, config.abort).catch(
       (err) => console.error(`Failed to set up connection for ${name}:`, err)
     );
   }
 }
-_config = new WeakMap();
-_connections = new WeakMap();
 class SseModuleConfigBuilder extends ModuleConfigBuilder {
   addEndpoint(name, config) {
     this._config.addEndpoint(name, config);
   }
 }
 class SseConfigurator {
-  constructor() {
-    __privateAdd(this, _builderCallbacks, []);
-    __privateAdd(this, _endpoints, {});
-  }
+  #builderCallbacks = [];
+  #endpoints = {};
   /**
    * register SSE endpoint configuration.
    */
   addEndpoint(name, config) {
-    __privateGet(this, _endpoints)[name] = config;
+    this.#endpoints[name] = config;
   }
   /**
    * add callback for building config on when configurator is creating config.
    * {@link SseConfigurator.createConfig}
    */
   onCreateConfig(cb) {
-    __privateGet(this, _builderCallbacks).push(cb);
+    this.#builderCallbacks.push(cb);
   }
   /**
    * normally executed in `init` phase of module, which creates configuration to the module provider.
@@ -1721,20 +1785,18 @@ class SseConfigurator {
    * await all registered hub configurations.
    */
   async createConfig(init) {
-    for (const cb of __privateGet(this, _builderCallbacks)) {
+    for (const cb of this.#builderCallbacks) {
       const builder = new SseModuleConfigBuilder(
         init,
         this
       );
       await Promise.resolve(cb(builder));
     }
-    return { endpoints: __privateGet(this, _endpoints) };
+    return { endpoints: this.#endpoints };
   }
 }
-_builderCallbacks = new WeakMap();
-_endpoints = new WeakMap();
 const moduleKey = "sse";
-const module = {
+const module$1 = {
   name: moduleKey,
   configure: () => new SseConfigurator(),
   initialize: async (init) => {
@@ -1756,7 +1818,9 @@ const configureFromFramework = async (args, builder) => {
     options: {
       accessTokenFactory: async () => {
         const token = await authProvider.acquireAccessToken({
-          scopes: service.defaultScopes
+          request: {
+            scopes: service.scopes ?? service.defaultScopes
+          }
         });
         if (!token) {
           throw Error("failed to acquire access token");
@@ -1770,7 +1834,7 @@ const configureFromFramework = async (args, builder) => {
 function enableSse(configurator, name, optionsOrCallback) {
   {
     configurator.addConfig({
-      module,
+      module: module$1,
       configure: (sseConfigurator) => {
         sseConfigurator.onCreateConfig(
           (builder) => configureFromFramework({ name }, builder)
@@ -3890,16 +3954,17 @@ const rootSchema = create$3({
   })
 });
 class CustomAppClient {
-  constructor(client) {
-    __privateAdd(this, _manifests, []);
+  constructor(client, graphClient) {
     this.client = client;
+    this.graphClient = graphClient;
   }
+  #manifests = [];
   // eslint-disable-next-line no-empty-pattern
   getAppConfig({}) {
     return of({});
   }
   getAppManifest({ appKey }) {
-    const manifest = __privateGet(this, _manifests).find(
+    const manifest = this.#manifests.find(
       (manifest2) => manifest2.appKey === appKey
     );
     if (!manifest)
@@ -3911,7 +3976,75 @@ class CustomAppClient {
   getAppManifests() {
     return this.client.fetch$(`/api/apps`).pipe(
       switchMap(
-        (r) => from(r.json())
+        (r) => from(r.json()).pipe(
+          catchError(() => {
+            let message = "Error fetching app manifests: ";
+            if (r.status === 403 || r.status === 401) {
+              message = /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx(Typography, { children: "You are not authorized to view this page." }),
+                /* @__PURE__ */ jsx("br", {}),
+                " ",
+                /* @__PURE__ */ jsx(Typography, { variant: "body_short", children: "Please apply for the relevant roles in Access IT:" }),
+                /* @__PURE__ */ jsx("br", {}),
+                /* @__PURE__ */ jsxs(List, { children: [
+                  /* @__PURE__ */ jsx(List.Item, { children: /* @__PURE__ */ jsx(
+                    Tooltip,
+                    {
+                      title: "Will also grant access to Roma Workbench",
+                      children: /* @__PURE__ */ jsx(
+                        Typography,
+                        {
+                          variant: "body_short_link",
+                          as: "a",
+                          href: "https://accessit.equinor.com/Search/Search?term=COMMERCIAL+OPERATOR+LIQUIDS+ACCESS+CONTROL",
+                          children: "Cargo Operations - Commercial Operator"
+                        }
+                      )
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx(List.Item, { children: /* @__PURE__ */ jsx(
+                    Tooltip,
+                    {
+                      title: "Apply for the access & sales office relevant for your role",
+                      children: /* @__PURE__ */ jsx(
+                        Typography,
+                        {
+                          variant: "body_short_link",
+                          as: "a",
+                          href: "https://accessit.equinor.com/Search/Search?term=LIQUIDS+ACCESS+CONTROL",
+                          children: "Trading systems"
+                        }
+                      )
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx(List.Item, { children: /* @__PURE__ */ jsx(
+                    Tooltip,
+                    {
+                      title: "Autogranted via cargo / trading roles",
+                      children: /* @__PURE__ */ jsx(
+                        Typography,
+                        {
+                          variant: "body_short_link",
+                          as: "a",
+                          href: "https://accessit.equinor.com/Search/Search?term=User+%28TOPS+ROMA%29",
+                          children: "Roma Workbench - TOPS ROMA User"
+                        }
+                      )
+                    }
+                  ) })
+                ] })
+              ] });
+            } else {
+              message = `${message} ${r.statusText}`;
+            }
+            window.Fusion.modules.event.dispatchEvent("workbenchInitError", {
+              detail: {
+                message
+              }
+            });
+            return of([]);
+          })
+        )
       ),
       map(
         (v) => v.map((vv) => {
@@ -3925,6 +4058,7 @@ class CustomAppClient {
           return {
             ...vv,
             entry: pathname,
+            config: vv.config ?? { groups: null, admins: null, roles: null },
             keywords: vv.keywords ?? vv.tags,
             appKey: vv.appKey ?? vv.key,
             name: vv.displayName ?? vv.name,
@@ -3940,7 +4074,18 @@ class CustomAppClient {
           };
         })
       ),
-      tap((v) => __privateSet(this, _manifests, v)),
+      switchMap((apps) => {
+        return this.graphClient.fetch(`v1.0/me/memberOf?$select=id`).then((r) => r.json()).then((res) => {
+          const list = res.value.map(
+            (v) => v.id
+          );
+          return apps.map((app) => ({
+            ...app,
+            hasAccess: (app.config?.groups ?? []).length === 0 || app.config?.groups.some((g) => list.includes(g))
+          }));
+        });
+      }),
+      tap((v) => this.#manifests = v),
       catchError((err) => {
         console.error("Error fetching app manifests", err);
         return of([]);
@@ -3955,8 +4100,12 @@ class CustomAppClient {
     console.log("updateAppSettings");
     return of({});
   }
+  [Symbol.dispose]() {
+  }
+  getAppBuild(args) {
+    return of({});
+  }
 }
-_manifests = new WeakMap();
 class ServiceDiscoveryClient {
   constructor() {
     this.cacheTime = 0;
@@ -3983,14 +4132,18 @@ class ServiceDiscoveryClient {
   }
 }
 const configure = async (config) => {
-  var _a;
   const request = await fetch("/_discovery/environments/current");
   const environment = await request.json();
   const services = environment.services;
   if (!services) {
     throw new Error(`ServiceDiscoveryMissingError: No services found`);
   }
-  const portalService = (_a = environment.services) == null ? void 0 : _a.find((v) => v.key === "portal");
+  const portalService = environment.services?.find(
+    (v) => v.key === "portal"
+  );
+  const graphService = environment.services?.find(
+    (v) => v.key === "graph"
+  );
   if (!portalService || !environment.frontendClientId) {
     const error = [];
     if (!portalService) error.push(`Missing service: "portal"`);
@@ -3998,12 +4151,13 @@ const configure = async (config) => {
     throw new Error(`Missing environment information:
 ${error.join("\n")}`);
   }
-  config.logger.level = 2;
   config.configureMsal(
     {
-      tenantId: "3aa4a235-b6e2-48d5-9195-7fcf05b459b0",
-      clientId: environment.frontendClientId,
-      redirectUri: "/authentication/login-callback"
+      auth: {
+        tenantId: "3aa4a235-b6e2-48d5-9195-7fcf05b459b0",
+        clientId: environment.frontendClientId,
+        redirectUri: "/authentication/login-callback"
+      }
     },
     true
   );
@@ -4015,8 +4169,15 @@ ${error.join("\n")}`);
     builder.setAssetUri(`/`);
     builder.setClient(async (client) => {
       const http = await client.requireInstance("http");
-      const httpClient = http.createClient(portalService);
-      return new CustomAppClient(httpClient);
+      const httpClient = http.createClient({
+        ...portalService,
+        baseUri: portalService.uri ?? portalService.baseUri
+      });
+      const graphHttpClient = http.createClient({
+        ...graphService,
+        baseUri: graphService?.uri ?? graphService?.baseUri
+      });
+      return new CustomAppClient(httpClient, graphHttpClient);
     });
   });
   enableNavigation(config);
@@ -4146,7 +4307,7 @@ const getGetSettingByUserAndIdQueryKey = (userId, id) => {
 };
 const useGetSettingByUserAndIdQueryOptions = (userId, id, options) => {
   const { query: queryOptions } = options ?? {};
-  const queryKey = (queryOptions == null ? void 0 : queryOptions.queryKey) ?? getGetSettingByUserAndIdQueryKey(userId, id);
+  const queryKey = queryOptions?.queryKey ?? getGetSettingByUserAndIdQueryKey(userId, id);
   const getSettingByUserAndId = useGetSettingByUserAndIdHook();
   const queryFn = ({ signal }) => getSettingByUserAndId(userId, id, signal);
   return {
@@ -4227,7 +4388,7 @@ const getGetPublicSettingByUserAndIdQueryKey = (appShortName, id) => {
 };
 const useGetPublicSettingByUserAndIdQueryOptions = (appShortName, id, options) => {
   const { query: queryOptions } = options ?? {};
-  const queryKey = (queryOptions == null ? void 0 : queryOptions.queryKey) ?? getGetPublicSettingByUserAndIdQueryKey(appShortName, id);
+  const queryKey = queryOptions?.queryKey ?? getGetPublicSettingByUserAndIdQueryKey(appShortName, id);
   const getPublicSettingByUserAndId = useGetPublicSettingByUserAndIdHook();
   const queryFn = ({ signal }) => getPublicSettingByUserAndId(appShortName, id, signal);
   return {
@@ -4308,7 +4469,7 @@ const getGetSettingsByUserIdQueryKey = (userId) => {
 };
 const useGetSettingsByUserIdQueryOptions = (userId, options) => {
   const { query: queryOptions } = options ?? {};
-  const queryKey = (queryOptions == null ? void 0 : queryOptions.queryKey) ?? getGetSettingsByUserIdQueryKey(userId);
+  const queryKey = queryOptions?.queryKey ?? getGetSettingsByUserIdQueryKey(userId);
   const getSettingsByUserId = useGetSettingsByUserIdHook();
   const queryFn = ({ signal }) => getSettingsByUserId(userId, signal);
   return {
@@ -4363,7 +4524,7 @@ const getGetSettingsByAppShortNameQueryKey = (appShortName) => {
 };
 const useGetSettingsByAppShortNameQueryOptions = (appShortName, options) => {
   const { query: queryOptions } = options ?? {};
-  const queryKey = (queryOptions == null ? void 0 : queryOptions.queryKey) ?? getGetSettingsByAppShortNameQueryKey(appShortName);
+  const queryKey = queryOptions?.queryKey ?? getGetSettingsByAppShortNameQueryKey(appShortName);
   const getSettingsByAppShortName = useGetSettingsByAppShortNameHook();
   const queryFn = ({ signal }) => getSettingsByAppShortName(appShortName, signal);
   return {
@@ -4443,7 +4604,7 @@ const getGetAllAppsQueryKey = () => {
 };
 const useGetAllAppsQueryOptions = (options) => {
   const { query: queryOptions } = options ?? {};
-  const queryKey = (queryOptions == null ? void 0 : queryOptions.queryKey) ?? getGetAllAppsQueryKey();
+  const queryKey = queryOptions?.queryKey ?? getGetAllAppsQueryKey();
   const getAllApps = useGetAllAppsHook();
   const queryFn = ({ signal }) => getAllApps(signal);
   return { queryKey, queryFn, ...queryOptions };
@@ -4489,7 +4650,7 @@ const getGetAppByKeyQueryKey = (key) => {
 };
 const useGetAppByKeyQueryOptions = (key, options) => {
   const { query: queryOptions } = options ?? {};
-  const queryKey = (queryOptions == null ? void 0 : queryOptions.queryKey) ?? getGetAppByKeyQueryKey(key);
+  const queryKey = queryOptions?.queryKey ?? getGetAppByKeyQueryKey(key);
   const getAppByKey = useGetAppByKeyHook();
   const queryFn = ({ signal }) => getAppByKey(key, signal);
   return {
@@ -4535,7 +4696,7 @@ const getGetAllServicesQueryKey = () => {
 };
 const useGetAllServicesQueryOptions = (options) => {
   const { query: queryOptions } = options ?? {};
-  const queryKey = (queryOptions == null ? void 0 : queryOptions.queryKey) ?? getGetAllServicesQueryKey();
+  const queryKey = queryOptions?.queryKey ?? getGetAllServicesQueryKey();
   const getAllServices = useGetAllServicesHook();
   const queryFn = ({ signal }) => getAllServices(signal);
   return { queryKey, queryFn, ...queryOptions };
@@ -4585,7 +4746,7 @@ const getGetServiceByKeyQueryKey = (key) => {
 };
 const useGetServiceByKeyQueryOptions = (key, options) => {
   const { query: queryOptions } = options ?? {};
-  const queryKey = (queryOptions == null ? void 0 : queryOptions.queryKey) ?? getGetServiceByKeyQueryKey(key);
+  const queryKey = queryOptions?.queryKey ?? getGetServiceByKeyQueryKey(key);
   const getServiceByKey = useGetServiceByKeyHook();
   const queryFn = ({ signal }) => getServiceByKey(key, signal);
   return {
@@ -4638,7 +4799,7 @@ const getGetAllCategoriesQueryKey = () => {
 };
 const useGetAllCategoriesQueryOptions = (options) => {
   const { query: queryOptions } = options ?? {};
-  const queryKey = (queryOptions == null ? void 0 : queryOptions.queryKey) ?? getGetAllCategoriesQueryKey();
+  const queryKey = queryOptions?.queryKey ?? getGetAllCategoriesQueryKey();
   const getAllCategories = useGetAllCategoriesHook();
   const queryFn = ({ signal }) => getAllCategories(signal);
   return { queryKey, queryFn, ...queryOptions };
@@ -4688,7 +4849,7 @@ const getGetCategoryByIdQueryKey = (id) => {
 };
 const useGetCategoryByIdQueryOptions = (id, options) => {
   const { query: queryOptions } = options ?? {};
-  const queryKey = (queryOptions == null ? void 0 : queryOptions.queryKey) ?? getGetCategoryByIdQueryKey(id);
+  const queryKey = queryOptions?.queryKey ?? getGetCategoryByIdQueryKey(id);
   const getCategoryById = useGetCategoryByIdHook();
   const queryFn = ({ signal }) => getCategoryById(id, signal);
   return {
@@ -4741,7 +4902,7 @@ const getStreamEventsQueryKey = () => {
 };
 const useStreamEventsQueryOptions = (options) => {
   const { query: queryOptions } = options ?? {};
-  const queryKey = (queryOptions == null ? void 0 : queryOptions.queryKey) ?? getStreamEventsQueryKey();
+  const queryKey = queryOptions?.queryKey ?? getStreamEventsQueryKey();
   const streamEvents = useStreamEventsHook();
   const queryFn = ({ signal }) => streamEvents(signal);
   return { queryKey, queryFn, ...queryOptions };
@@ -4767,7 +4928,7 @@ const getGetCurrentEnvironmentQueryKey = () => {
 };
 const useGetCurrentEnvironmentQueryOptions = (options) => {
   const { query: queryOptions } = options ?? {};
-  const queryKey = (queryOptions == null ? void 0 : queryOptions.queryKey) ?? getGetCurrentEnvironmentQueryKey();
+  const queryKey = queryOptions?.queryKey ?? getGetCurrentEnvironmentQueryKey();
   const getCurrentEnvironment = useGetCurrentEnvironmentHook();
   const queryFn = ({ signal }) => getCurrentEnvironment(signal);
   return { queryKey, queryFn, ...queryOptions };
@@ -4796,7 +4957,7 @@ const getGetRomaConfigurationByIdQueryKey = (id) => {
 };
 const useGetRomaConfigurationByIdQueryOptions = (id, options) => {
   const { query: queryOptions } = options ?? {};
-  const queryKey = (queryOptions == null ? void 0 : queryOptions.queryKey) ?? getGetRomaConfigurationByIdQueryKey(id);
+  const queryKey = queryOptions?.queryKey ?? getGetRomaConfigurationByIdQueryKey(id);
   const getRomaConfigurationById = useGetRomaConfigurationByIdHook();
   const queryFn = ({ signal }) => getRomaConfigurationById(id, signal);
   return {
@@ -4873,7 +5034,7 @@ const getGetAllRomaConfigurationQueryKey = () => {
 };
 const useGetAllRomaConfigurationQueryOptions = (options) => {
   const { query: queryOptions } = options ?? {};
-  const queryKey = (queryOptions == null ? void 0 : queryOptions.queryKey) ?? getGetAllRomaConfigurationQueryKey();
+  const queryKey = queryOptions?.queryKey ?? getGetAllRomaConfigurationQueryKey();
   const getAllRomaConfiguration = useGetAllRomaConfigurationHook();
   const queryFn = ({ signal }) => getAllRomaConfiguration(signal);
   return { queryKey, queryFn, ...queryOptions };
@@ -4923,7 +5084,7 @@ const getGetAllRomaConfigurationTypesQueryKey = () => {
 };
 const useGetAllRomaConfigurationTypesQueryOptions = (options) => {
   const { query: queryOptions } = options ?? {};
-  const queryKey = (queryOptions == null ? void 0 : queryOptions.queryKey) ?? getGetAllRomaConfigurationTypesQueryKey();
+  const queryKey = queryOptions?.queryKey ?? getGetAllRomaConfigurationTypesQueryKey();
   const getAllRomaConfigurationTypes = useGetAllRomaConfigurationTypesHook();
   const queryFn = ({ signal }) => getAllRomaConfigurationTypes(signal);
   return { queryKey, queryFn, ...queryOptions };
@@ -4949,7 +5110,7 @@ const getGetAllRomaConfigurationByTypeQueryKey = (type) => {
 };
 const useGetAllRomaConfigurationByTypeQueryOptions = (type, options) => {
   const { query: queryOptions } = options ?? {};
-  const queryKey = (queryOptions == null ? void 0 : queryOptions.queryKey) ?? getGetAllRomaConfigurationByTypeQueryKey(type);
+  const queryKey = queryOptions?.queryKey ?? getGetAllRomaConfigurationByTypeQueryKey(type);
   const getAllRomaConfigurationByType = useGetAllRomaConfigurationByTypeHook();
   const queryFn = ({ signal }) => getAllRomaConfigurationByType(type, signal);
   return {
@@ -5008,7 +5169,7 @@ const getListFeedbacksByCurrentUserQueryKey = (params) => {
 };
 const useListFeedbacksByCurrentUserQueryOptions = (params, options) => {
   const { query: queryOptions } = options ?? {};
-  const queryKey = (queryOptions == null ? void 0 : queryOptions.queryKey) ?? getListFeedbacksByCurrentUserQueryKey(params);
+  const queryKey = queryOptions?.queryKey ?? getListFeedbacksByCurrentUserQueryKey(params);
   const listFeedbacksByCurrentUser = useListFeedbacksByCurrentUserHook();
   const queryFn = ({ signal }) => listFeedbacksByCurrentUser(params, signal);
   return { queryKey, queryFn, ...queryOptions };
@@ -5055,6 +5216,70 @@ const useFindGroupMembers = (groupId, query) => {
     queryFn: () => findGroupMembers(client, groupId, query)
   });
 };
+const findGroup$1 = async (client, query) => {
+  const headers = {
+    ConsistencyLevel: "eventual"
+    // Required to search by name
+  };
+  const params = new URLSearchParams();
+  params.set("$count", "true");
+  params.set("$orderby", "displayName");
+  params.set("$select", "displayName,id");
+  if (query) {
+    params.set("$search", `"displayName:${query}"`);
+  }
+  const req = await client.fetch(`v1.0/groups?${params.toString()}`, {
+    headers
+  });
+  if (req.status === 504) {
+    throw new Error(`Application took to long to respond`);
+  }
+  const res = await req.json();
+  if (req.status >= 400) {
+    throw new Error(res.error.message);
+  } else {
+    return res;
+  }
+};
+const useFindGroup = (query) => {
+  const client = useHttpClient("graph");
+  return useQuery({
+    queryKey: ["graph", "group", "members", query],
+    queryFn: () => findGroup$1(client, query),
+    enabled: query.length > 2
+  });
+};
+const findGroup = async (client, ids) => {
+  const headers = {
+    ConsistencyLevel: "eventual"
+    // Required to search by name
+  };
+  const params = new URLSearchParams();
+  params.set("$count", "true");
+  params.set("$orderby", "displayName");
+  params.set("$select", "displayName,id");
+  params.set("$filter", `id in ('${ids.join("', '")}')`);
+  const req = await client.fetch(`v1.0/groups?${params.toString()}`, {
+    headers
+  });
+  if (req.status === 504) {
+    throw new Error(`Application took to long to respond`);
+  }
+  const res = await req.json();
+  if (req.status >= 400) {
+    throw new Error(res.error.message);
+  } else {
+    return res;
+  }
+};
+const useFindGroupById = (ids) => {
+  const client = useHttpClient("graph");
+  return useQuery({
+    queryKey: ["graph", "group", "members", ids],
+    queryFn: () => findGroup(client, ids),
+    enabled: ids.length > 0
+  });
+};
 const findUsersByMail = async (client, email, fields) => {
   const headers = {
     ConsistencyLevel: "eventual"
@@ -5095,6 +5320,97 @@ const useFindUsersByShortname = (shortnames, fields = ["displayName", "mail", "g
   const emails = (shortnames ?? []).map((name) => `${name}@equinor.com`);
   return useFindUsersByMail(emails, fields);
 };
+const searchUser = async (client, query) => {
+  const headers = {
+    ConsistencyLevel: "eventual"
+    // Required to search by name
+  };
+  const params = new URLSearchParams();
+  params.set("$orderby", "displayName");
+  if (query) {
+    params.set("$search", `"displayName:${query}" OR "mail:${query}"`);
+  }
+  const req = await client.fetch(`/v1.0/users?${params.toString()}`, {
+    headers
+  });
+  if (req.status === 504) {
+    throw new Error(`Application took to long to respond`);
+  }
+  const res = await req.json();
+  if (req.status >= 400) {
+    throw new Error(res.error.message);
+  } else {
+    return res;
+  }
+};
+const searchServicePrincipal = async (client, query) => {
+  const headers = {
+    ConsistencyLevel: "eventual"
+    // Required to search by name
+  };
+  const params = new URLSearchParams();
+  params.set("$orderby", "displayName");
+  params.set("$select", "id,appId,displayName");
+  if (query) {
+    params.set("$search", `"displayName:${query}"`);
+  }
+  const req = await client.fetch(
+    `/v1.0/servicePrincipals?${params.toString()}`,
+    {
+      headers
+    }
+  );
+  if (req.status === 504) {
+    throw new Error(`Application took to long to respond`);
+  }
+  const res = await req.json();
+  if (req.status >= 400) {
+    throw new Error(res.error.message);
+  } else {
+    return res;
+  }
+};
+const useFindUser = (query) => {
+  const client = useHttpClient("graph");
+  return useQuery({
+    queryKey: ["graph", "group", "members", query],
+    queryFn: async () => {
+      const users = await searchUser(client, query);
+      const servicePrincipals = await searchServicePrincipal(client, query);
+      return {
+        value: [...users.value ?? [], ...servicePrincipals.value ?? []]
+      };
+    },
+    select: (data) => data ? data.value : [],
+    enabled: query.length > 2
+  });
+};
+const findUserById = async (client, id, fields) => {
+  const headers = {
+    ConsistencyLevel: "eventual"
+    // Required to search by name
+  };
+  const req = await client.fetch(`v1.0/users/${id}`, {
+    headers
+  });
+  if (req.status === 504) {
+    throw new Error(`Application took to long to respond`);
+  }
+  const res = await req.json();
+  if (req.status >= 400) {
+    throw new Error(res.error.message);
+  } else {
+    return res;
+  }
+};
+const useFindUserById = (id, fields = ["displayName", "mail", "givenName"]) => {
+  const client = useHttpClient("graph");
+  return useQuery({
+    queryKey: ["graph", "user", "id", id],
+    queryFn: () => findUserById(client, id),
+    enabled: !!id
+  });
+};
 const checkRomaApi = (queryKey) => {
   const first = (queryKey ?? []).at(0);
   if (typeof first === "string") {
@@ -5110,10 +5426,7 @@ function createIDBPersister(idbValidKey = "reactQuery") {
         clientState: {
           ...persistedClient.clientState,
           queries: persistedClient.clientState.queries.filter(
-            (query) => {
-              var _a;
-              return query.queryKey.includes("persist") || checkRomaApi(query.queryKey) || ((_a = query.meta) == null ? void 0 : _a.persist);
-            }
+            (query) => query.queryKey.includes("persist") || checkRomaApi(query.queryKey) || query.meta?.persist
           )
         }
       };
@@ -5163,15 +5476,17 @@ function useGetApiRoles(api, defaultEmptyArray = true) {
   useEffect(() => {
     serviceDiscovery.resolveService(api).then(async (s) => {
       const jwt = await auth.acquireAccessToken({
-        scopes: s.defaultScopes
+        request: {
+          scopes: s.scopes ?? s.defaultScopes
+        }
       });
       if (!jwt) {
         throw new Error(`No jwt found for ${api}`);
       }
       const token = parseJwt(jwt);
-      if (((roles == null ? void 0 : roles.length) ?? 0) === 0) setRoles((token == null ? void 0 : token.roles) ?? []);
+      if ((roles?.length ?? 0) === 0) setRoles(token?.roles ?? []);
     });
-  }, [api, auth, serviceDiscovery, roles == null ? void 0 : roles.length]);
+  }, [api, auth, serviceDiscovery, roles?.length]);
   if (defaultEmptyArray) return roles ?? [];
   return roles;
 }
@@ -5370,8 +5685,8 @@ const useManageWatchList = (system) => {
     }
   });
   const framework = useFramework();
-  const user = framework.modules.auth.defaultAccount;
-  const userId = (user == null ? void 0 : user.username.split("@")[0].toLowerCase()) ?? "MISSINGUSER";
+  const user = framework.modules.auth.account;
+  const userId = user?.username.split("@")[0].toLowerCase() ?? "MISSINGUSER";
   const queryClient = useQueryClient();
   const updateMutator = useUpdateByUserIdAndId();
   const createMutator = useCreateSettingByUserId();
@@ -5464,6 +5779,7 @@ export {
   StyleProvider,
   configure,
   createIDBPersister,
+  findUserById,
   findUsersByMail,
   getGetAllAppsQueryKey,
   getGetAllCategoriesQueryKey,
@@ -5526,7 +5842,11 @@ export {
   useDeleteServiceByKey,
   useDeleteServiceByKeyHook,
   useDeleteServiceByKeyMutationOptions,
+  useFindGroup,
+  useFindGroupById,
   useFindGroupMembers,
+  useFindUser,
+  useFindUserById,
   useFindUsersByMail,
   useFindUsersByShortname,
   useGetAllApps,