Merge branch 'main' into dependabot/github_actions/actions/checkout-4

.github/actions/pnpm-setup/action.yaml

@@ -6,12 +6,12 @@ runs:
   steps:
     - uses: pnpm/action-setup@v2.2.4
       with:
-        version: 8.0.0
+        version: 9.0.5
 
     - name: Setup Node.js environment
       uses: actions/setup-node@v4
       with:
-        node-version: 18
+        node-version: 20
         cache: 'pnpm'
 
     - name: Install dependencies

.github/helpers/package.json

@@ -6,8 +6,8 @@
   "dependencies": {
     "@actions/core": "^1.10.1",
     "@actions/github": "^6.0.0",
-    "commander": "^11.1.0",
+    "commander": "^12.0.0",
     "markdown-table": "^3.0.3",
-    "tsx": "^4.6.2"
+    "tsx": "^4.7.1"
   }
 }

.gitignore

@@ -52,3 +52,5 @@ testem.log
 Thumbs.db
 
 .turbo
+
+*.tsbuildinfo

Contribution.md → CONTRIBUTING.md

@@ -1,4 +1,4 @@
-# Contributions
+# Contributing
 
 ## Table of content
 

README.md

@@ -5,6 +5,8 @@
 [![GitHub issues by-label](https://img.shields.io/github/issues/equinor/fusion-workspace/bug?label=%F0%9F%90%9B%20bug%20issues&color=red)](https://github.com/equinor/fusion-workspace/issues?q=is%3Aissue+is%3Aopen+label%3Abug)
 [![GitHub issues](https://img.shields.io/github/issues/equinor/fusion-workspace)](https://github.com/equinor/fusion-workspace/issues)
 [![GitHub pull requests](https://img.shields.io/github/issues-pr-raw/equinor/fusion-workspace)](https://github.com/equinor/fusion-workspace/pulls)
+![SCM Compliance](https://scm-compliance-api.radix.equinor.com/repos/equinor/fusion-workspace/badge)
+![Known Vulnerabilities](https://snyk.io/test/github/equinor/fusion-workspace/badge.svg)
 
 > Fusion Workspace is a library built with a controller-based structure in mind. Core functionality tab navigation, data handling, and allowing you to register controllers that react around page change / config change and data changes.
 
@@ -28,3 +30,7 @@ To run a test app go to apps/test-app and run `pnpm dev`. If you make changes to
 ## Publishing packages
 
 The repository is configured with CI/CD and automatic deployment, to trigger a release update the version in `package.json` of the package you want to release and merge into main.
+
+## Updating package dependencies
+
+To update all package dependencies, use the command `pnpm run bump-deps` to open the interactive pnpm package update prompt in the terminal.

apps/test-app/package.json

@@ -23,7 +23,7 @@
     "@equinor/workspace-fusion": "workspace:^",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-error-boundary": "^3.1.4"
+    "react-error-boundary": "^4.0.13"
   },
   "peerDependencies": {
     "react-dom": ">= 16.8.0",

apps/test-app/src/index.tsx

@@ -99,7 +99,7 @@ function getFilterMetaData(num_filters: number = 2): any[] {
 }
 
 function getKPIData(num_kpis = 5) {
-  const kpiData = [];
+  const kpiData: { title: string; value: number }[] = [];
 
   for (let i = 0; i < num_kpis; i++) {
     const kpiNameLen = getRandomInt(1, 15);
@@ -135,7 +135,7 @@ export function App() {
         excelExport: async (filterState) =>
           new Promise((res, rej) =>
             setTimeout(() => {
-              res();
+              res(undefined);
             }, 2000)
           ),
       }}

documentation/package.json

@@ -11,23 +11,24 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@algolia/client-search": "^4.13.1",
-    "@astrojs/mdx": "^0.16.0",
-    "@astrojs/preact": "^2.0.2",
-    "@astrojs/react": "^2.0.2",
-    "@docsearch/css": "^3.3.3",
-    "@docsearch/react": "^3.3.3",
-    "@equinor/workspace-fusion": "0.15.0",
-    "@types/node": "^18.0.0",
-    "astro": "^2.0.8",
-    "preact": "^10.12.0",
+    "@algolia/client-search": "^4.23.2",
+    "@astrojs/mdx": "^2.2.3",
+    "@astrojs/preact": "^3.1.2",
+    "@astrojs/react": "^3.1.0",
+    "@docsearch/css": "^3.6.0",
+    "@docsearch/react": "^3.6.0",
+    "@equinor/workspace-fusion": "workspace:*",
+    "@types/node": "^20.12.2",
+    "astro": "^4.5.13",
+    "preact": "^10.20.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
     "react-mermaid3": "^1.0.1",
-    "styled-components": "^5.3.6"
+    "styled-components": "^6.1.8"
   },
   "devDependencies": {
+    "@types/html-escaper": "^3.0.2",
     "@types/react": "^18.0.27",
     "@types/react-dom": "^18.0.10",
     "html-escaper": "^3.0.3",

documentation/src/components/RightSidebar/TableOfContents.tsx

@@ -2,14 +2,15 @@ import type { MarkdownHeading } from 'astro';
 import type { FunctionalComponent } from 'preact';
 import { unescape } from 'html-escaper';
 import { useState, useEffect, useRef } from 'preact/hooks';
+import type { MouseEventHandler } from 'react';
 
 type ItemOffsets = {
   id: string;
   topOffset: number;
 };
 
 const TableOfContents: FunctionalComponent<{ headings: MarkdownHeading[] }> = ({ headings = [] }) => {
-  const toc = useRef<HTMLUListElement>();
+  const toc = useRef<HTMLUListElement>(null);
   const onThisPageID = 'on-this-page-heading';
   const itemOffsets = useRef<ItemOffsets[]>([]);
   const [currentID, setCurrentID] = useState('overview');
@@ -60,8 +61,10 @@ const TableOfContents: FunctionalComponent<{ headings: MarkdownHeading[] }> = ({
     return () => headingsObserver.disconnect();
   }, [toc.current]);
 
-  const onLinkClick = (e) => {
-    setCurrentID(e.target.getAttribute('href').replace('#', ''));
+  const onLinkClick: MouseEventHandler<HTMLAnchorElement> = (e) => {
+    const element = e.target as HTMLAnchorElement;
+    const href = element.getAttribute('href')?.replace('#', '');
+    if (href) setCurrentID(href);
   };
 
   return (

package.json

@@ -5,18 +5,19 @@
   "type": "module",
   "scripts": {
     "preinstall": "npx only-allow pnpm",
-    "first-time-setup": "npm i -g pnpm@8.0.0 turbo && pnpm i",
+    "first-time-setup": "npm i -g pnpm@9.0.5 turbo && pnpm i",
     "build": "turbo run build",
     "test": "turbo run test",
     "documentation": "pnpx astro dev --root ./documentation",
     "shipit": "turbo run build && pnpm -r publish",
     "pr-shipit": "turbo run build && pnpm --filter ...[origin/main] pr-release",
-    "dev": "turbo run dev --filter ./apps/**"
+    "dev": "turbo run dev --filter ./apps/**",
+    "bump-deps": "pnpm up --latest --prod --recursive --interactive"
   },
   "private": true,
-  "packageManager": "pnpm@8.0.0",
+  "packageManager": "pnpm@9.0.5",
   "dependencies": {
-    "tslib": "^2.3.0"
+    "tslib": "^2.6.2"
   },
   "devDependencies": {
     "@changesets/cli": "^2.26.1",
@@ -28,5 +29,8 @@
     "turbo": "^1.9.3",
     "typescript": "~5.0.2",
     "typescript-plugin-styled-components": "^2.0.0"
+  },
+  "engines": {
+    "node": "20"
   }
 }

packages/ag-grid/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/workspace-ag-grid",
-  "version": "2.0.5",
+  "version": "3.0.0",
   "type": "module",
   "private": false,
   "sideEffects": false,
@@ -32,25 +32,25 @@
     }
   },
   "dependencies": {
-    "@ag-grid-community/client-side-row-model": "30.2.1",
-    "@ag-grid-community/core": "30.2.1",
-    "@ag-grid-community/react": "30.2.1",
-    "@ag-grid-enterprise/column-tool-panel": "30.2.1",
-    "@ag-grid-enterprise/excel-export": "30.2.1",
-    "@ag-grid-enterprise/filter-tool-panel": "30.2.1",
-    "@ag-grid-enterprise/master-detail": "30.2.1",
-    "@ag-grid-enterprise/menu": "30.2.1",
-    "@ag-grid-enterprise/multi-filter": "30.2.1",
-    "@ag-grid-enterprise/range-selection": "30.2.1",
-    "@ag-grid-enterprise/rich-select": "30.2.1",
-    "@ag-grid-enterprise/row-grouping": "30.2.1",
-    "@ag-grid-enterprise/server-side-row-model": "30.2.1",
-    "@ag-grid-enterprise/set-filter": "30.2.1",
-    "@ag-grid-enterprise/side-bar": "30.2.1",
-    "@ag-grid-enterprise/status-bar": "30.2.1",
+    "@ag-grid-community/client-side-row-model": "31.2.0",
+    "@ag-grid-community/core": "31.2.0",
+    "@ag-grid-community/react": "31.2.0",
+    "@ag-grid-enterprise/column-tool-panel": "31.2.0",
+    "@ag-grid-enterprise/excel-export": "31.2.0",
+    "@ag-grid-enterprise/filter-tool-panel": "31.2.0",
+    "@ag-grid-enterprise/master-detail": "31.2.0",
+    "@ag-grid-enterprise/menu": "31.2.0",
+    "@ag-grid-enterprise/multi-filter": "31.2.0",
+    "@ag-grid-enterprise/range-selection": "31.2.0",
+    "@ag-grid-enterprise/rich-select": "31.2.0",
+    "@ag-grid-enterprise/row-grouping": "31.2.0",
+    "@ag-grid-enterprise/server-side-row-model": "31.2.0",
+    "@ag-grid-enterprise/set-filter": "31.2.0",
+    "@ag-grid-enterprise/side-bar": "31.2.0",
+    "@ag-grid-enterprise/status-bar": "31.2.0",
+    "@equinor/eds-tokens": "^0.9.0",
     "@equinor/fusion-react-ag-grid-styles": "^30.2.0",
-    "@equinor/fusion-react-styles": "^0.6.0",
-    "@equinor/eds-tokens": "^0.9.0"
+    "@equinor/fusion-react-styles": "^0.6.2"
   },
   "peerDependencies": {
     "@ag-grid-enterprise/core": "30.2.1",

packages/filter/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/workspace-filter",
-  "version": "3.0.10",
+  "version": "4.0.0",
   "type": "module",
   "sideEffects": false,
   "license": "MIT",
@@ -29,11 +29,11 @@
     "@equinor/eds-core-react": "^0.28.0",
     "@equinor/eds-icons": "^0.18.0",
     "@equinor/eds-tokens": "^0.9.0",
-    "@tanstack/react-query": "^4.28.0",
-    "react-error-boundary": "^3.1.4",
+    "@tanstack/react-query": "^5.28.9",
+    "react-error-boundary": "^4.0.13",
     "react-sortablejs": "^6.1.4",
     "react-virtual": "^2.10.4",
-    "sortablejs": "^1.15.0"
+    "sortablejs": "^1.15.2"
   },
   "peerDependencies": {
     "react": ">= 16.8.0",

packages/filter/src/lib/context/filterContext.tsx

@@ -70,15 +70,11 @@ export const FilterContextWrapper = ({
   const [uncheckedValues, setUncheckedValues] = useState<FilterStateGroup[]>(initialState?.uncheckedValues ?? []);
   const [filterState, setFilterState] = useState<FilterState>(initialState?.filterState ?? { groups: [], search: '' });
 
-  const query = useQuery(
-    ['filter-meta', JSON.stringify(filterState)],
-    ({ signal }): Promise<FilterGroup[]> => dataSource.getFilterMeta(filterState, signal),
-    {
-      suspense: false,
-      useErrorBoundary: false,
-      keepPreviousData: true,
-    }
-  );
+  const query = useQuery({
+    queryKey: ['filter-meta', JSON.stringify(filterState)],
+    queryFn: ({ signal }): Promise<FilterGroup[]> => dataSource.getFilterMeta(filterState, signal),
+    throwOnError: false,
+  });
 
   const setFilterStateHandler = (groups: FilterStateGroup[]) =>
     setFilterState((s) => {

packages/garden/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/workspace-garden",
-  "version": "7.0.1",
+  "version": "8.0.0",
   "type": "module",
   "sideEffects": false,
   "license": "MIT",
@@ -29,9 +29,9 @@
     "@equinor/eds-core-react": "0.28.0",
     "@equinor/eds-icons": "^0.18.0",
     "@equinor/eds-tokens": "0.9.0",
-    "@tanstack/react-query": "^4.28.0",
-    "@tanstack/react-query-devtools": "^4.28.0",
-    "react-error-boundary": "^3.1.4",
+    "@tanstack/react-query": "^5.28.9",
+    "@tanstack/react-query-devtools": "^5.28.10",
+    "react-error-boundary": "^4.0.13",
     "react-virtual": "^2.10.4"
   },
   "peerDependencies": {

packages/garden/src/lib/components/GardenItemContainer/GardenItemContainer.tsx

@@ -83,7 +83,7 @@ export const GardenItemContainer = <TData extends Record<PropertyKey, unknown>,
 
   const expand = useExpand();
 
-  const isColumnExpanded = !!expand.expandedColumns.find((s) => s === virtualColumn.index);
+  const isColumnExpanded = expand.expandedColumns.includes(virtualColumn.index);
 
   const {
     groupingService: { groupingKeys, timeInterval, dateVariant },

packages/garden/src/lib/context/gardenContext.tsx

@@ -1,12 +1,12 @@
 import { PropsWithChildren, createContext, useCallback, useEffect, useState } from 'react';
 import { GardenMeta, GetIdentifier } from '../types';
-import { UseQueryResult, useQuery } from '@tanstack/react-query';
+import { UseSuspenseQueryResult, useSuspenseQuery } from '@tanstack/react-query';
 import { GardenDataSource } from '../components';
 
-type GardenState = {
+export type GardenState = {
   selectionService: SelectionService;
   groupingService: GroupingService;
-  gardenMetaQuery: UseQueryResult<GardenMeta, unknown>;
+  gardenMetaQuery: ThisType<UseSuspenseQueryResult<GardenMeta, unknown>>;
 };
 
 type GroupingService = {
@@ -34,23 +34,19 @@ export const GardenContextProvider = <T, TContext = undefined>(
     context: TContext | undefined;
   }>
 ) => {
-  const gardenMetaQuery = useQuery(
-    ['garden', ...props.initialGrouping, props.timeInterval, props.dateVariant, props.context],
-    {
-      refetchOnWindowFocus: false,
-      suspense: true,
-      useErrorBoundary: true,
-      keepPreviousData: false,
-      cacheTime: Infinity,
-      staleTime: Infinity,
-      queryFn: ({ signal }) =>
-        props.dataSource.getGardenMeta(
-          { groupingKeys: props.initialGrouping, timeInterval: props.timeInterval, dateVariant: props.dateVariant },
-          props.context as TContext,
-          signal ?? new AbortSignal()
-        ),
-    }
-  );
+  const gardenMetaQuery = useSuspenseQuery({
+    queryKey: ['garden', ...props.initialGrouping, props.timeInterval, props.dateVariant, props.context],
+    queryFn: ({ signal }) => {
+      return props.dataSource.getGardenMeta(
+        { groupingKeys: props.initialGrouping, timeInterval: props.timeInterval, dateVariant: props.dateVariant },
+        props.context as TContext,
+        signal ?? new AbortSignal()
+      );
+    },
+    refetchOnWindowFocus: false,
+    gcTime: Infinity,
+    staleTime: Infinity,
+  });
 
   const selectionService = useSelectionService(props.getIdentifier, props.selected);
   const groupingService = useGroupingService(props.initialGrouping, props.timeInterval, props.dateVariant);

packages/garden/src/lib/hooks/useBlockCache.ts

@@ -24,7 +24,7 @@ export function useBlockCache<T, TContext = undefined>({
     groupingService: { groupingKeys, timeInterval, dateVariant },
   } = useGarden();
 
-  const blockCache = useQueries({
+  const blockCache: UseBlockCacheArgs<T, TContext> = useQueries({
     queries: blocks.map((block) => ({
       /** Unique identifier for blocks, add state here to invalidate query onChange */
       queryKey: [...groupingKeys, timeInterval, dateVariant, `x${block.x}`, `y${block.y}`, context, ...hash],

packages/garden/src/lib/hooks/useGarden.ts

@@ -1,7 +1,7 @@
 import { useContext } from 'react';
-import { GardenContext } from '../context/gardenContext';
+import { GardenContext, GardenState } from '../context/gardenContext';
 
-export function useGarden() {
+export function useGarden(): GardenState {
   const context = useContext(GardenContext);
   if (!context) {
     throw new Error('Garden context called outside the provider');