equinor/fusion-framework

Fusion Framework, built and maintained to Fusion Core

Fusion Framework

Fusion Framework is a modular and extensible framework designed to simplify the development of modern web applications. It provides a set of core modules and utilities that handle common concerns like authentication, HTTP communication, service discovery, and event handling. The framework is built with flexibility in mind, allowing developers to easily configure and extend its functionality to meet their application's needs.

🚀 Get Started

The best place to start is by reading through the documentation on the core concepts and architecture. The framework is modular, so you can pick and choose which parts to use.

If you're developing an application for the Fusion Portals, check out the Fusion Docs for specific requirements and setup.

👨🏻‍🍳 Cookbooks

The cookbooks directory contains sample applications demonstrating how to implement various features and patterns using the framework. These runnable examples cover topics like:

• Setting up a basic React application
• Integrating routing and navigation
• Managing application state
• Enabling authentication and authorization
• Consuming APIs and services
• Implementing feature flags
• And more!

The cookbooks are well-commented and can serve as a starting point or reference for your own applications.

👋 Contribute

The Fusion Framework is open-source, and we welcome contributions from the developer community. Whether you're fixing a bug, adding a new feature, improving the documentation, or creating a new cookbook, your contributions can help make the framework even better.

Check out the Contributing Guide for the process of opening issues, submitting pull requests, code style guidelines, and more.

We appreciate all contributions, no matter how big or small. Every bug fix, feature addition, documentation improvement, or new cookbook helps make the Fusion Framework better for everyone.

If you have any questions or need help getting started with contributing, don't hesitate to reach out to the maintainers or join the project's community channels.

fusion-framework's Issues

Create a package consuming framework context module

Fusion-Framework module-context should remember selected context on reload.

Fusion-Framework module-context should select context in URL

When you click a link to an app with context id in the URL, the context selector should select the context with provided context id.

Wrap fusion instance in proxy

Is your feature request related to a problem? Please describe.
To prevent any consumers from altering the fusion instance, wrapping it in a proxy could be a feasible solution.

Describe the solution you'd like
A clear and concise description of what you want to happen.

/**
 *  Wraps an object and all its children objects in a proxy 
 *  Handles arrays and objects
 */
function deepProxy<T extends Record<PropertyKey,any>>(obj: T){
    Object.keys(obj).filter(key => typeof obj[key] === "object").filter(key => obj[key] !== null).forEach(key => {
        obj[key as keyof T] = deepProxy(obj[key])
    })
    return new Proxy(obj, {set(){return false}})
}

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Create landingpage for cli

guess app key and generate url

Path parsing windows fusion cli

Describe the bug
When running fusion-framework-cli app dev the main entry must be in this format "main": "/src/main.tsx", but when running
fusion-framework-cli app build the main entry must be like this "main": "./src/main.tsx".

Im assuming this is working correctly on Linux/MacOS. But on Windows it is not working. A simple fix could be accepting a entrypoint as cli argument, with a fallback to package.json.

Environment

• OS - Windows
• Node Version - v18.15.0

Possible to bundle with production flag in fusion framework cli

I'm experiencing some pretty hefty bundlesizes would it be possible to add a flag to choose production mode?

fusion-framework/packages/cli/src/scripts/create-config.ts

Line 41 in dfa64e2

mode: 'development',

Create documentation for Fusion Api Module

** Package **
When the @equinor/fusion-framework-module-services is create, create documentation

Function for reading window.Fusion property

Is your feature request related to a problem? Please describe.
When reading the window.Fusion property I should/must ensure the properties im trying to access exists
e.g

if (!window?.Fusion) {
		throw new Error('No fusion framework found, required for fusion bookmarks module to work');
	}
	const fusion = window.Fusion;
	if (!fusion.modules.serviceDiscovery) {
		throw new Error('Service discovery module not configured, required for fusion bookmarks module to work');
	}

	const client = await fusion.modules.serviceDiscovery.createClient('bookmarks');
	return client;

Describe the solution you'd like
Proposed solution: Function on window object called something like window.getFusionInstance(). Which implementes the above checks. Could possibly return an object with further functions that ensures the module you're dotting into also exists. Either by using Proxy class or by getting modules using functions

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
const fusion = window.getFusion();
//Could throw error saying service discovery is not configured/included
fusion.getModule("service_discovery");

[CLI] - Set margin to 0px in dev portal

Messes with the total height and scrollbars..

Remove the requirement of leading `/` in `main` attribute in `package.json`

Describe the bug
When running @equinor/fusion-framework-cli app dev, the CLI fails of not main file is prefixed with /

Environment

• OS (windows, mac, linux): any
• Node Version: any

To Reproduce
Steps to reproduce the behavior

Expected behavior
A clear and concise description of what you expected to happen.

Stacktrace
If applicable, add stacktrace to help explain your problem.

Additional context
Add any other context about the problem here.

[context] Be able to clear the context

It would be nice to have a function for clearing the context besides the setCurrentContext function.

Bookmarks sidesheet loading when data is fetched

This is not the only thing missing, as for now there is no loading information provided to the component but it should be fixable, but one more thing if the user have no bookmarks for the given subsystem the user should be presented witt a message

manybe:

No bookmarks created, click on add bookmark to create your fist bookmark
updates to this has to be done in https://github.com/equinor/fusion-framework

Global style hides SVGs

Describe the bug
A global style tag hides certain SVGs.

Environment
In production (fusion.equinor.com).
It does not happen when one builds locally.

To Reproduce
Deploy app...

Expected behavior
SVG should render.

Additional context
GIF of whats happening. Seem like there is a SVG style tag that is set globally that screws things up.

[module-context]: allow `null` as initial context

the current filter for initial app, is only checking if there is a value, context can be undefined|null|object

fusion-framework/packages/modules/context/src/module.ts

Line 39 in 1f6b4d5

filter((item): item is ContextItem => !!item),

create a CONTRIBUTE.md

When a router trigger a push navigation to the framework, this event should not propegate, but change to `REPLACE` action

fixes https://github.com/equinor/fusion-core-apps/issues/183

Update the framework app module to load config before setup

Feat: Add applcation events

  Add more events:

• add event for manifest loaded
• add event for javascript modules loaded
• add event for config loaded
• add event when application disposed
• add event for application starting | finishing init

Originally posted by @odinr in #488 (comment)

Create a module for Bookmark

Core framework implementation enabling bookmark in project portal #671

Bokmark context handling
Bookmark Navigation
Enable Bookmark in Application
Bookmark Creation , Update and Delete
Cookbook Basic Bookmark
Cookbook Advanced Bookmark
Documentation
Review

Add react router to cli portal

• Add react-router to cli portal
• Provide basename to render function (AppLoader) app/${APP_KEY}
• Create cookbook for using router in app

update ag-grid

bump ag grid version

Remove <StrictMode> from cookbooks

Create documentation for using module for api services

** Package **
@equinor/fusion-framework-module-services

** Feature **
Provide name of feature (concept or function) which need documentation or improved explanation.
what is missing?:

• TypeHinting for IDE
• Documentation of functionality
• Explanation of concept
• Missing code example
• Outdated documentation

Add person provider to cli portal

Peer dependency warnings for fusion-framework-react-app

Describe the bug
When installing @equinor/fusion-framework-react-app I get several peerDeps warnings. These are not installed in "cookbooks" example projects that I expect should be up-to-date and correct.

To Reproduce
Steps to reproduce the behavior:

1. Install @equinor/fusion-framework-react-app

Expected behavior
Either fix peerDeps for the package or update cookbooks to clearly show what needs to be installed for a react app.

Screenshots

Desktop (please complete the following information):

• OS: WSL
• Node Version (compiler): 16.18.0
• fusion-framework-react-app version: 2.0.19
• pnpm: 7.16.1

[Module-http] json$ method failing if response has no body.

Describe the bug
Performing a fetch call using http client and method json$, if the response contains an empty body the jsonSelector throws an error saying failed to parse response. Typically, this would happen when performing DELETE api calls (default response code 204).

From my understanding; when using module-services i.e bookmarks. You would instantiate a hook where you pass the method.

const {get, patch, post, delete} = useBookmarksService("json$");
get(); // OK
patch(); // OK
post(); // OK
//res.code 204, body: null
delete(); // uh-oh something went wrong

Expected behavior
As far as I know, the only reason for response.json to fail is if the response body is nonexistent or gibberish. So, return undefined instead of throwing.

Create functionality for fetching context item from context API

Update documentation to use VuePress v2

[module-ag-grid] add documentation

when using Ag-Gid in apps, the apps need to use the module import of packages.

when using ag-grid as package, the license key registration will fail!

explain how app ag-grid modules need to have same version as the @ag-grid-enterprise/core in framework!

Expose module version number

use semver to allow testing against version of modules

Typed props missing in createFrameworkProvider

When creating a framework provider the type seems wrong, and gives the following error.
Type '{ children: Element; }' has no properties in common with type 'IntrinsicAttributes'.ts(2559)

I purpose this change to fix the issue. for now ill cast it my self but should be fixed

export const createFrameworkProvider = <TModules extends Array<AnyModule> = []>(
    configurator: FusionConfigurator<TModules>,
    modules?: TModules
): React.LazyExoticComponent<React.FunctionComponent<{ children?: React.ReactNode }>> =>
    lazy(async () => {
        const framework = await initFusion(configurator, modules);
        return {
            default: ({ children }: { children?: React.ReactNode }) => (
                <FrameworkProvider value={framework}>{children}</FrameworkProvider>
            ),
        };
    });

Wrong filepath when starting dev server

Describe the bug
When running 'fusion-framework-cli app dev' on windows, resolveRelativePath in packages/cli/src/scripts/serve.ts resolves the filepath with two "C:/".
In my case it resolved the file path as 'C:\C:\Git\fusion-app-resource-allocation\node_modules@equinor\fusion-framework-cli\bin\dev-portal\index.html'

Environment

• OS (windows, mac, linux)
  Windows
• Node Version
  16.14.1

To Reproduce
Run 'fusion-framework-cli app dev' on windows.

Expected behavior
Expected filepath to be resolved correctly

Stacktrace

fusion-framework-cli app dev

✔ Configuration loaded
✔ Configured dev-server
[HPM] Proxy created: /_discovery/environments/current -> https://pro-s-portal-ci.azurewebsites.net
[HPM] Proxy created: /api/apps//config -> https://pro-s-portal-ci.azurewebsites.net
[HPM] Proxy created: /api/apps/ -> https://pro-s-portal-ci.azurewebsites.net
✔ dev server started
🔗 http://localhost:3000/apps/personnel-allocation
node:fs:585
handleErrorFromBinding(ctx);
^

Error: ENOENT: no such file or directory, open 'C:\C:\Git\fusion-app-resource-allocation\node_modules@equinor\fusion-framework-cli\bin\dev-portal\index.html'
at Object.openSync (node:fs:585:3)
at readFileSync (node:fs:453:35)
at file:///C:/Git/fusion-app-resource-allocation/node_modules/@equinor/fusion-framework-cli/bin/serve.js:90:25
at Generator.next ()
at file:///C:/Git/fusion-app-resource-allocation/node_modules/@equinor/fusion-framework-cli/bin/serve.js:7:71
at new Promise ()
at __awaiter (file:///C:/Git/fusion-app-resource-allocation/node_modules/@equinor/fusion-framework-cli/bin/serve.js:3:12)
at file:///C:/Git/fusion-app-resource-allocation/node_modules/@equinor/fusion-framework-cli/bin/serve.js:89:32
at Layer.handle [as handle_request] (C:\Git\fusion-app-resource-allocation\node_modules\express\lib\router\layer.js:95:5)
at trim_prefix (C:\Git\fusion-app-resource-allocation\node_modules\express\lib\router\index.js:328:13) {
errno: -4058,
syscall: 'open',
code: 'ENOENT',
path: 'C:\C:\Git\fusion-app-resource-allocation\node_modules\@equinor\fusion-framework-cli\bin\dev-portal\index.html'
}

Allow for partial bookmark object when using patch

when patching bookmark the function should be able to reserve a partial og the bookmark that is being updated.

Star progress indicator cover full page

Star progress indicator is covering almost full page in firefox.

Add function for getting person from services, (me or be other azureID)

Create a module for person services

Create functionality for querying context API

update context selector in CLI

looks like the resolve prop changed?

Disconnect bookmark api client from service module

packages/modules/bookmark/src/client/bookmarkClient.ts

the api client should only use function from config.
by default the configurator wires up the link to services module.

Create a interface for the Api Client that will be consumed in the bookmark client

Create a module for consuming fusion api

Dynamic subsystem on bookmark

Is your feature request related to a problem? Please describe.
To day sub system is only set on status and the subsystem is set to the same as name. this can be used to give a better name for apps sins the bookmark component when showing apps uses a clean up app key to display the app name.

Describe the solution you'd like
When creating a bookmark the subsystem field should be set with the application name.

Describe alternatives you've considered
An alternaternative is to leave as is.

Create a module for person services

Service Discovery Documentation

** Package **
Service Discovery

** Feature **
Provide name of feature (concept or function) which need documentation or improved explanation.
what is missing?:

• TypeHinting for IDE
• Documentation of functionality
• Explanation of concept
• Missing code example
• Outdated documentation
• Add description to what endpoints that are included in the service dicovery for fusion, and maybe add alle endpoint that we use in fusion into service discovery.

Add context provider and selector to the cli portal

• add component for providing context in cli portal
• add context selector to cli portal header
• connect context provider to fusion framework in portal
• create cookbok for using context

useModuleCurrentContext returns undefined currentContext

Describe the bug
On first render of a React component useModuleCurrentContext will return an undefined currentContext, even though its parent component has a conditional render checking if currentContext is undefined or not. See code below:

import { useModuleCurrentContext } from '@equinor/fusion-framework-react-module-context';
const MyApp = () => {
  const { currentContext } = useModuleCurrentContext();

  return (
    <StrictMode>
        <div>
          {currentContext?.id ? (
            <WorkspaceWrapper />
          ) : (
            <div>
              <h2>Choose a valid context</h2>
            </div>
          )}
        </div>
    </StrictMode>
  );
};

export const WorkspaceWrapper = () => {
  // moduleContext.currentContext will be undefined on first render even though parent component is conditionally rendering this
// component!!!
  const moduleContext = useModuleCurrentContext();

  return (
    ......
  );
};

Environment

• OS: WSL
• Node Version: 16.18.0

To Reproduce
See code example above

Expected behavior
When parent component is checking if currentContext from the hook is undefined or not, I expect the child components using the same hook to not return an undefined value.

Additional context

Feat: Add favorites to bookmark Api Client

extend api client with bookmark favorite functionality

Context selector is showing when there are no context module in application

Describe the bug
When developing application with the CLI the context selector should not show when context is not enabled for the application

Create a header for the cli portal

• create a container for portal header
• add fusion icon
• style title

Enable check of render env on legacy apps

ref equinor/fusion-pitstop-app

Read application manifest when running CLI

• when creating vite-config in the CLI, import configuration from application (app.config.js)
• when running dev server, the output should point to http://localhost:PORT/app/APP_KEY
• when building the application, the cli should load manifest and supplement (version, appkey)