@equinor/fusion-framework-dev-portal 1.0.0-next.0

package/src/ContextSelector/useContextResolver.ts

@@ -0,0 +1,287 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useFramework } from '@equinor/fusion-framework-react';
+import { useCurrentApp } from '@equinor/fusion-framework-react/app';
+import type { AppModule } from '@equinor/fusion-framework-module-app';
+import type { NavigationModule } from '@equinor/fusion-framework-module-navigation';
+import type {
+  ContextItem,
+  ContextModule,
+  IContextProvider,
+} from '@equinor/fusion-framework-module-context';
+import { useObservableState, useObservableSubscription } from '@equinor/fusion-observable/react';
+import '@equinor/fusion-framework-app';
+import { ChipElement } from '@equinor/fusion-wc-chip';
+ChipElement;
+
+import { EMPTY, catchError, lastValueFrom, map, of } from 'rxjs';
+
+import type {
+  ContextResult,
+  ContextResultItem,
+  ContextResolver,
+} from '@equinor/fusion-react-context-selector';
+import type { AppModulesInstance } from '@equinor/fusion-framework-app';
+import type { QueryClientError } from '@equinor/fusion-query/client';
+import type { FusionContextSearchError } from '@equinor/fusion-framework-module-context/errors.js';
+
+function capitalizeFirstLetter(string: string): string {
+  return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();
+}
+
+function convertGraphic(
+  graphic: ContextItem['graphic'],
+): Pick<ContextResultItem, 'graphic' | 'graphicType'> {
+  if (graphic === undefined) {
+    return {};
+  }
+
+  if (typeof graphic === 'string') {
+    return {
+      graphicType: graphic.startsWith('<')
+        ? 'inline-html'
+        : ('eds' as unknown as ContextResultItem['graphicType']),
+      graphic: graphic,
+    };
+  }
+
+  if (graphic.type === 'svg') {
+    return {
+      graphicType: 'inline-svg',
+      graphic: graphic.content,
+    };
+  }
+
+  return {
+    graphicType: 'inline-html',
+    graphic: graphic.content,
+  };
+}
+
+function convertMeta(meta: ContextItem['meta']): Pick<ContextResultItem, 'metaType' | 'meta'> {
+  if (meta === undefined) {
+    return {};
+  }
+
+  if (typeof meta === 'string') {
+    return {
+      metaType: meta.startsWith('<')
+        ? 'inline-html'
+        : ('eds' as unknown as ContextResultItem['metaType']),
+      meta: meta,
+    };
+  }
+
+  if (meta.type === 'svg') {
+    return {
+      metaType: 'inline-svg',
+      meta: meta.content,
+    };
+  }
+
+  return {
+    metaType: 'inline-html',
+    meta: meta.content,
+  };
+}
+
+/**
+ * Map context query result to ContextSelectorResult.
+ * Add any icons to selected types by using the 'graphic' property
+ * @param src context query result
+ * @returns src mapped to ContextResult type
+ */
+const mapper = (src: ContextItem<{ taskState?: string; state?: string }>[]): ContextResult => {
+  return src.map((i) => {
+    const baseResult = {
+      id: i.id,
+      title: i.title,
+      subTitle: i.subTitle ?? i.type.id,
+      ...convertGraphic(i.graphic),
+      ...convertMeta(i.meta),
+    };
+
+    // Displays the status of the EquinorTask if it is not 'active'
+    const isEquinorTaskInactive = !!(
+      i.value.taskState && i.value.taskState.toLowerCase() !== 'active'
+    );
+    if (i.type.id === 'EquinorTask' && isEquinorTaskInactive) {
+      baseResult.meta = `<fwc-chip disabled variant="outlined" value="${i.value.taskState}" />`;
+      baseResult.metaType = 'inline-html';
+    }
+
+    if (i.type.id === 'OrgChart') {
+      // Org charts should always have 'list' icon
+      baseResult.graphic = 'list';
+      baseResult.graphicType = 'eds' as unknown as ContextResultItem['graphicType'];
+
+      // Displays the org chart status if it is not 'active'
+      const isOrgChartInactive = !!(i.value.state && i.value.state.toLowerCase() !== 'active');
+      if (isOrgChartInactive) {
+        baseResult.meta = `<fwc-chip disabled variant="outlined" value="${capitalizeFirstLetter(i.value.state ?? '')}" />`;
+        baseResult.metaType = 'inline-html';
+      }
+    }
+
+    return baseResult;
+  });
+};
+
+/**
+ * Create a single ContextResultItem
+ * @param props pops for the item to merge with defaults
+ * @returns ContextResultItem
+ */
+const singleItem = (props: Partial<ContextResultItem>): ContextResultItem => {
+  return Object.assign({ id: 'no-such-item', title: 'Change me' }, props);
+};
+
+/**
+ * Hook for querying context and setting resolver for ContextSelector component
+ * See React Components storybook for info about ContextSelector component and its resolver
+ * @link https://equinor.github.io/fusion-react-components/?path=/docs/data-contextselector--component
+ * @return Array<ContextResolver, SetContextCallback>
+ */
+export const useContextResolver = (): {
+  resolver: ContextResolver | null;
+  provider: IContextProvider | null;
+  currentContext: ContextResult;
+} => {
+  /* Framework modules */
+  const framework = useFramework<[AppModule, NavigationModule]>();
+
+  const { currentApp } = useCurrentApp();
+
+  /** App module collection instance */
+  const instance$ = useMemo(() => currentApp?.instance$ || EMPTY, [currentApp]);
+
+  /* context provider state */
+  const [provider, setProvider] = useState<IContextProvider | null>(null);
+
+  /* Current context observable */
+  const { value: currentContext } = useObservableState(
+    useMemo(() => provider?.currentContext$ || EMPTY, [provider]),
+  );
+
+  const preselected: ContextResult = useMemo(() => {
+    return currentContext ? mapper([currentContext]) : [];
+  }, [currentContext]);
+
+  /** callback function when current app instance changes */
+  const onContextProviderChange = useCallback((modules: AppModulesInstance) => {
+    /** try to get the context module from the app module instance */
+    const contextProvider = (modules as AppModulesInstance<[ContextModule]>).context;
+    if (contextProvider) {
+      setProvider(contextProvider);
+    } else {
+      setProvider(null);
+    }
+  }, []);
+
+  /** clear the app provider */
+  const clearContextProvider = useCallback(() => {
+    setProvider(null);
+  }, []);
+
+  /** observe changes to app modules and  clear / set the context provider on change */
+  useObservableSubscription(instance$, onContextProviderChange, clearContextProvider);
+  useEffect(
+    () =>
+      framework.modules.event.addEventListener('onReactAppLoaded', (e) => {
+        console.debug('useContextResolver::onReactAppLoaded', 'using legacy register hack method');
+        return onContextProviderChange(e.detail.modules);
+      }),
+    [framework, onContextProviderChange],
+  );
+
+  const processError = useCallback((err: Error): ContextResult => {
+    if (err.name === 'QueryClientError') {
+      return processError((err as QueryClientError).cause as Error);
+    }
+
+    if (err.name === 'FusionContextSearchError') {
+      const error = err as FusionContextSearchError;
+      return [
+        singleItem({
+          id: error.name,
+          title: error.title,
+          subTitle: error.description,
+          graphic: 'error_outlined',
+          isDisabled: true,
+        }),
+      ];
+    }
+
+    return [
+      singleItem({
+        title: 'Unexpected error occurred',
+        subTitle: 'Please try again or report the issue in Services@Equinor',
+        graphic: 'error_outlined',
+        isDisabled: true,
+      }),
+    ];
+  }, []);
+
+  /**
+   * set resolver for ContextSelector
+   * @return ContextResolver
+   */
+  const minLength = 2;
+  const resolver = useMemo(
+    (): ContextResolver | null =>
+      provider && {
+        searchQuery: async (search: string): Promise<ContextResult> => {
+          if (search.length < minLength) {
+            return [
+              singleItem({
+                // TODO - make as enum if used for checks, or type
+                id: 'min-length',
+                title: `Type ${minLength - search.length} more chars to search`,
+                isDisabled: true,
+              }),
+            ];
+          }
+          try {
+            return lastValueFrom(
+              provider.queryContext(search).pipe(
+                map(mapper),
+                map((x) =>
+                  x.length
+                    ? x
+                    : [
+                        singleItem({
+                          // TODO - make as enum if used for checks, or type
+                          id: 'no-results',
+                          title: 'No results found',
+                          graphic: 'info_circle',
+                          isDisabled: true,
+                        }),
+                      ],
+                ),
+                /** handle failures */
+                catchError((err) => {
+                  console.error(
+                    'PORTAL::ContextResolver',
+                    `failed to resolve context for query ${search}`,
+                    err,
+                    err.cause,
+                  );
+
+                  return of(processError(err));
+                }),
+              ),
+            );
+            /** this should NEVER happen! */
+          } catch (e) {
+            const err = e as Error;
+            console.error('PORTAL::ContextResolver', `unhandled error for [${search}]`, e);
+            return processError(err);
+          }
+        },
+        initialResult: preselected,
+      },
+    [provider, preselected, processError],
+  );
+  return { resolver, provider, currentContext: preselected };
+};
+
+export default useContextResolver;

package/src/EquinorLoader.tsx

@@ -0,0 +1,24 @@
+import type React from 'react';
+import { StarProgress } from '@equinor/fusion-react-progress-indicator';
+
+export const EquinorLoader = ({
+  children,
+  text,
+}: React.PropsWithChildren<{ readonly text: string }>): JSX.Element => {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        width: '100vw',
+        height: '100vh',
+        overflow: 'hidden',
+      }}
+    >
+      <StarProgress text={text}>{children}</StarProgress>
+    </div>
+  );
+};
+
+export default EquinorLoader;

package/src/ErrorViewer.tsx

@@ -0,0 +1,17 @@
+import { Typography } from '@equinor/eds-core-react';
+
+export const ErrorViewer = ({ error }: { readonly error: Error }) => {
+  return (
+    <>
+      <div style={{ marginTop: 20, border: '1px solid' }}>
+        <Typography variant="h4" color="warning">
+          {error.message}
+        </Typography>
+        <section style={{ padding: 10 }}>{error.stack && <pre>{error.stack}</pre>}</section>
+      </div>
+      {error.cause && <ErrorViewer error={error.cause as Error} />}
+    </>
+  );
+};
+
+export default ErrorViewer;

package/src/FusionLogo.tsx

@@ -0,0 +1,58 @@
+import type { SVGProps } from 'react';
+
+type FusionLogoProps = Omit<SVGProps<SVGSVGElement>, 'viewBox'> & {
+  readonly scale?: number;
+};
+
+export const FusionLogo = ({ scale = 1, style }: FusionLogoProps) => (
+  <svg viewBox="0 0 50 35" style={{ height: '1em', ...style, transform: `scale(${scale})` }}>
+    <title>Fusion Logo</title>
+    <path
+      d="M0 2V23.1776L7.05405 16.1235V7.05405H16.1235L23.1776 0H2C0.895431 0 0 0.89543 0 2Z"
+      transform="translate(50 17.5) scale(0.92727 1.06779) rotate(135)"
+      fill="url(#paint0_linear)"
+    />
+    <path
+      d="M0 2V23.1776L7.05405 16.1235V7.05405H16.1235L23.1776 0H2C0.895431 0 0 0.89543 0 2Z"
+      transform="translate(0 17.5) scale(0.92727 1.06779) rotate(-45)"
+      fill="url(#paint1_linear)"
+    />
+    <path
+      d="M9.61965 36.6972L2.60087 29.6784L1.96135 22.3809L8.42623 22.9069L9.61965 36.6972Z"
+      transform="translate(33.8887 34.9863) scale(0.92727 -1.06779) rotate(45)"
+      fill="#990025"
+    />
+    <path
+      d="M7.05434 7.05434L0 0L1.21096 13.8183L7.68846 14.3818L7.05434 7.05434Z"
+      transform="translate(33.8887 34.9863) scale(0.92727 -1.06779) rotate(45)"
+      fill="#990025"
+    />
+    <path
+      d="M0 0L2.49398 29.5715L9.61965 36.6972L7.01878 7.01878L0 0Z"
+      transform="translate(33.8887 0.015625) scale(0.92727 1.06779) rotate(45)"
+      fill="#FF1243"
+    />
+    <defs>
+      <linearGradient
+        id="paint0_linear"
+        x2="1"
+        gradientUnits="userSpaceOnUse"
+        gradientTransform="matrix(-13.5478 9.01983 -12.9578 -13.5478 18.0677 6.77391)"
+      >
+        <stop offset="0.508287" stopColor="#DC002E" />
+        <stop offset="0.508387" stopColor="#FF1243" />
+      </linearGradient>
+      <linearGradient
+        id="paint1_linear"
+        x2="1"
+        gradientUnits="userSpaceOnUse"
+        gradientTransform="matrix(-13.5478 9.01983 -12.9578 -13.5478 18.0677 6.77391)"
+      >
+        <stop offset="0.508287" stopColor="#DC002E" />
+        <stop offset="0.508387" stopColor="#FF1243" />
+      </linearGradient>
+    </defs>
+  </svg>
+);
+
+export default FusionLogo;

package/src/Header.Actions.tsx

@@ -0,0 +1,35 @@
+import { tag } from '@equinor/eds-icons';
+import { Button, Icon, TopBar } from '@equinor/eds-core-react';
+
+import PersonAvatarElement from '@equinor/fusion-wc-person/avatar';
+PersonAvatarElement;
+
+import { useBookmarkComponentContext } from '@equinor/fusion-framework-react-components-bookmark';
+
+interface HeaderActionProps {
+  readonly userAzureId?: string;
+  readonly toggleBookmark: (open: (status: boolean) => boolean) => void;
+  readonly togglePerson: (open: (status: boolean) => boolean) => void;
+}
+
+export const HeaderActions = (props: HeaderActionProps) => {
+  const { toggleBookmark, togglePerson, userAzureId } = props;
+
+  const bookmarkContext = useBookmarkComponentContext();
+
+  return (
+    <TopBar.Actions style={{ minWidth: 48, minHeight: 48 }}>
+      <Button
+        onClick={() => toggleBookmark((x) => !x)}
+        variant="ghost_icon"
+        disabled={!bookmarkContext.provider}
+        title={bookmarkContext.provider ? 'Bookmarks' : 'Bookmarks not available, enable in app'}
+      >
+        <Icon data={tag} />
+      </Button>
+      <Button onClick={() => togglePerson((x) => !x)} variant="ghost_icon">
+        <fwc-person-avatar size="small" azureId={userAzureId} clickable={false} />
+      </Button>
+    </TopBar.Actions>
+  );
+};

package/src/Header.tsx

@@ -0,0 +1,89 @@
+import { useCallback, useState } from 'react';
+import { ContextSelector } from './ContextSelector';
+import { FusionLogo } from './FusionLogo';
+
+/* typescript reference for makeStyles */
+// import '@material-ui/styles';
+
+import styled from 'styled-components';
+import { add, menu, tag } from '@equinor/eds-icons';
+import { Icon, TopBar } from '@equinor/eds-core-react';
+Icon.add({ menu, add, tag });
+
+import { useCurrentUser } from '@equinor/fusion-framework-react/hooks';
+import { useCurrentApp, useCurrentAppModule } from '@equinor/fusion-framework-react/app';
+
+import type { BookmarkModule } from '@equinor/fusion-framework-react-module-bookmark';
+
+import { BookmarkProvider } from '@equinor/fusion-framework-react-components-bookmark';
+
+import PersonAvatarElement from '@equinor/fusion-wc-person/avatar';
+PersonAvatarElement;
+
+import { PersonSideSheet } from './PersonSideSheet';
+
+import { BookmarkSideSheet } from './BookMarkSideSheet';
+
+import { HeaderActions } from './Header.Actions';
+
+const Styled = {
+  Title: styled.div`
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+        font-size: 1rem;
+        font-weight: 500;
+    `,
+};
+
+export const Header = () => {
+  const currentUser = useCurrentUser();
+  const [isPersonSheetOpen, setIsPersonSheetOpen] = useState(false);
+
+  const [isBookmarkOpen, setIsBookmarkOpen] = useState(false);
+  const onBookmarkClose = useCallback(() => {
+    setIsBookmarkOpen(false);
+  }, []);
+
+  const { currentApp } = useCurrentApp();
+
+  const { module: bookmarkProvider } = useCurrentAppModule<BookmarkModule>('bookmark');
+
+  return (
+    <BookmarkProvider
+      provider={bookmarkProvider ?? undefined}
+      currentApp={
+        currentApp
+          ? { appKey: currentApp.appKey, name: currentApp.manifest?.displayName }
+          : undefined
+      }
+      currentUser={
+        currentUser ? { id: currentUser.localAccountId, name: currentUser.name } : undefined
+      }
+    >
+      <TopBar id="cli-top-bar" sticky={false} style={{ padding: '0 1em', height: 48 }}>
+        <TopBar.Header>
+          <Styled.Title>
+            <FusionLogo />
+            <span>Fusion Framework CLI</span>
+          </Styled.Title>
+        </TopBar.Header>
+        <HeaderActions
+          userAzureId={currentUser?.localAccountId}
+          toggleBookmark={setIsBookmarkOpen}
+          togglePerson={setIsPersonSheetOpen}
+        />
+        <TopBar.CustomContent>
+          <ContextSelector />
+        </TopBar.CustomContent>
+        {/* since buttons are 40px but have 48px click bounds */}
+      </TopBar>
+      <BookmarkSideSheet isOpen={isBookmarkOpen} onClose={onBookmarkClose} />
+      <PersonSideSheet
+        azureId={currentUser?.localAccountId}
+        isOpen={isPersonSheetOpen}
+        onClose={() => setIsPersonSheetOpen(!isPersonSheetOpen)}
+      />
+    </BookmarkProvider>
+  );
+};

package/src/PersonSideSheet/index.tsx

@@ -0,0 +1,54 @@
+import { useCallback, useMemo, useState } from 'react';
+import { SideSheet } from '@equinor/fusion-react-side-sheet';
+import PersonListItem from '@equinor/fusion-wc-person/list-item';
+PersonListItem;
+
+import { Divider } from '@equinor/eds-core-react';
+
+import { LandingSheetContent, FeatureSheetContent } from './sheets';
+
+type PersonSideSheetProps = {
+  readonly azureId?: string;
+  readonly isOpen: boolean;
+  onClose(): void;
+};
+
+/**
+ * Add Sidesheet with settings for the current user.
+ * @param PersonSideSheetProps
+ */
+export const PersonSideSheet = ({ azureId, isOpen, onClose }: PersonSideSheetProps) => {
+  const [currentSheet, setCurrentSheet] = useState<string>('landing');
+
+  const Component = useMemo(() => {
+    switch (currentSheet) {
+      case 'features':
+        return FeatureSheetContent;
+      default:
+        return LandingSheetContent;
+    }
+  }, [currentSheet]);
+
+  const navigateCallback = useCallback((sheet: string) => {
+    setCurrentSheet(sheet ?? 'landing');
+  }, []);
+
+  return (
+    <SideSheet isOpen={isOpen} onClose={onClose} isDismissable={true}>
+      <SideSheet.Title title="User settings" />
+      <SideSheet.SubTitle subTitle={'Settings for your user in Fusion portal'} />
+      <SideSheet.Actions />
+      <SideSheet.Content>
+        <section style={{ paddingLeft: '0.5em' }}>
+          <div>
+            <fwc-person-list-item azureId={azureId} />
+          </div>
+          <Divider />
+          <Component azureId={azureId} sheet={currentSheet} navigate={navigateCallback} />
+        </section>
+      </SideSheet.Content>
+    </SideSheet>
+  );
+};
+
+export default PersonSideSheet;

package/src/PersonSideSheet/sheets/FeatureSheetContent.tsx

@@ -0,0 +1,48 @@
+import { useState } from 'react';
+import { FeatureTogglerApp } from './FeatureTogglerApp';
+import { FeatureTogglerPortal } from './FeatureTogglerPortal';
+
+import { Divider, Icon, Button, Tabs } from '@equinor/eds-core-react';
+import { arrow_back, category } from '@equinor/eds-icons';
+Icon.add({ arrow_back, category });
+
+import type { SheetContentProps } from './types';
+
+/**
+ * JSX structure for the content of the PersonSidesheet's Features page.
+ * @param SheetContentProps
+ */
+export const FeatureSheetContent = ({ navigate }: SheetContentProps) => {
+  const [tab, setTab] = useState<number>(0);
+
+  return (
+    <section>
+      <div>
+        <div>
+          <Button variant="ghost" onClick={() => navigate()}>
+            <Icon name="arrow_back" />
+            <Icon name="category" />
+            My Features
+          </Button>
+        </div>
+      </div>
+      <Divider />
+      <div>
+        <Tabs activeTab={tab} onChange={(index) => setTab(index)}>
+          <Tabs.List>
+            <Tabs.Tab>App features</Tabs.Tab>
+            <Tabs.Tab>Portal features</Tabs.Tab>
+          </Tabs.List>
+          <Tabs.Panels>
+            <Tabs.Panel>
+              <FeatureTogglerApp />
+            </Tabs.Panel>
+            <Tabs.Panel>
+              <FeatureTogglerPortal />
+            </Tabs.Panel>
+          </Tabs.Panels>
+        </Tabs>
+      </div>
+    </section>
+  );
+};

package/src/PersonSideSheet/sheets/FeatureTogglerApp.tsx

@@ -0,0 +1,36 @@
+import { useCurrentAppFeatures } from '@equinor/fusion-framework-react/feature-flag';
+
+import { Typography, Switch } from '@equinor/eds-core-react';
+
+import { Styled } from './Styled';
+
+/**
+ * JSX structure for Feature toggler tab for app features in the PersonSidesheet's Feature page.
+ */
+export const FeatureTogglerApp = () => {
+  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>
+        );
+      })}
+    </Styled.SwitchList>
+  );
+};
+
+export default FeatureTogglerApp;

package/src/PersonSideSheet/sheets/FeatureTogglerPortal.tsx

@@ -0,0 +1,30 @@
+import { useFrameworkFeatures } from '@equinor/fusion-framework-react/feature-flag';
+
+import { Typography, Switch } from '@equinor/eds-core-react';
+
+import { Styled } from './Styled';
+
+/**
+ * Content for Feature toggler tab for portal features in the PersonSidesheet's Feature page.
+ */
+export const FeatureTogglerPortal = () => {
+  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>
+      ))}
+    </Styled.SwitchList>
+  );
+};
+
+export default FeatureTogglerPortal;