feat(framework-cli): Update bookmark module to use provided provider

This commit updates the bookmark module to use the provided bookmark provider. The `BookmarkProvider` component now requires the provider as a parameter and shares the context of the provided provider to its child components. The deprecated hook has been removed, and the component has been updated to align with the changes in the modules.

BREAKING CHANGES: The `BookmarkProvider` now requires the provider as a parameter.

.changeset/metal-coats-burn.md

@@ -0,0 +1,20 @@
+---
+'@equinor/fusion-framework-cli': minor
+---
+
+Updated Bookmark Integration in Dev Portal
+
+-   **Refactored `BookMarkSideSheet.tsx`:**
+
+    -   Replaced `useHasBookmark` with `useCurrentAppModule<BookmarkModule>('bookmark')` for better module integration.
+    -   Updated button `disabled` state to use `bookmarkProvider?.hasBookmarkCreators`.
+
+-   **Updated `Header.tsx`:**
+
+    -   Added `useCurrentAppModule<BookmarkModule>('bookmark')` to manage bookmark module state.
+    -   Disabled bookmark button if `bookmarkProvider` is not available.
+    -   Passed `bookmarkProvider` to `BookmarkProvider` component.
+
+-   **Configuration Changes in `config.ts`:**
+    -   Switched import from `@equinor/fusion-framework-module-bookmark` to `@equinor/fusion-framework-react-module-bookmark`.
+    -   Added `builder.setFilter('application', true)` to bookmark configuration.

packages/cli/src/bin/dev-portal/BookMarkSideSheet.tsx

@@ -1,7 +1,8 @@
 import { Button, Icon } from '@equinor/eds-core-react';
 import { useFramework } from '@equinor/fusion-framework-react';
 import { Bookmark } from '@equinor/fusion-framework-react-components-bookmark';
-import { useHasBookmark } from '@equinor/fusion-framework-react-module-bookmark/portal';
+import { BookmarkModule } from '@equinor/fusion-framework-react-module-bookmark';
+import { useCurrentAppModule } from '@equinor/fusion-framework-react/app';
 import { SideSheet } from '@equinor/fusion-react-side-sheet';
 
 type BookmarkSideSheetProps = {
@@ -10,7 +11,7 @@ type BookmarkSideSheetProps = {
 };
 
 export const BookmarkSideSheet = ({ isOpen, onClose }: BookmarkSideSheetProps) => {
-    const hasBookmark = useHasBookmark();
+    const { module: bookmarkProvider } = useCurrentAppModule<BookmarkModule>('bookmark');
 
     const { event } = useFramework().modules;
 
@@ -21,7 +22,7 @@ export const BookmarkSideSheet = ({ isOpen, onClose }: BookmarkSideSheetProps) =
             <SideSheet.SubTitle subTitle={'Application bookmarks'} />
             <SideSheet.Actions>
                 <Button
-                    disabled={!hasBookmark}
+                    disabled={!bookmarkProvider?.hasBookmarkCreators}
                     variant="ghost"
                     onClick={() => {
                         onClose();

packages/cli/src/bin/dev-portal/Header.tsx

@@ -4,18 +4,22 @@ import { FusionLogo } from './FusionLogo';
 
 /* typescript reference for makeStyles */
 import '@material-ui/styles';
-import { BookmarkSideSheet } from './BookMarkSideSheet';
+
+import { styled } from 'styled-components';
+import { add, menu, tag } from '@equinor/eds-icons';
 import { Button, Icon, TopBar } from '@equinor/eds-core-react';
-import { BookmarkProvider } from '@equinor/fusion-framework-react-components-bookmark';
+Icon.add({ menu, add, tag });
+
 import { useCurrentUser } from '@equinor/fusion-framework-react/hooks';
-import { add, menu, tag } from '@equinor/eds-icons';
-import { styled } from 'styled-components';
+import { BookmarkModule } from '@equinor/fusion-framework-react-module-bookmark';
+import { BookmarkProvider } from '@equinor/fusion-framework-react-components-bookmark';
 
-import { PersonSideSheet } from './PersonSideSheet';
 import PersonAvatarElement from '@equinor/fusion-wc-person/avatar';
 PersonAvatarElement;
 
-Icon.add({ menu, add, tag });
+import { BookmarkSideSheet } from './BookMarkSideSheet';
+import { PersonSideSheet } from './PersonSideSheet';
+import { useCurrentAppModule } from '@equinor/fusion-framework-react/app';
 
 const Styled = {
     Title: styled.div`
@@ -38,6 +42,8 @@ export const Header = () => {
         setIsBookmarkOpen((s) => !s);
     }
 
+    const { module: bookmarkProvider } = useCurrentAppModule<BookmarkModule>('bookmark');
+
     return (
         <>
             <TopBar id="cli-top-bar" sticky={false} style={{ padding: '0 1em', height: 48 }}>
@@ -52,7 +58,16 @@ export const Header = () => {
                 </TopBar.CustomContent>
                 {/* since buttons are 40px but have 48px click bounds */}
                 <TopBar.Actions style={{ minWidth: 48, minHeight: 48 }}>
-                    <Button onClick={toggleBookmark} variant="ghost_icon">
+                    <Button
+                        onClick={toggleBookmark}
+                        variant="ghost_icon"
+                        disabled={!bookmarkProvider}
+                        title={
+                            bookmarkProvider
+                                ? 'Bookmarks'
+                                : 'Bookmarks not available, enable in app'
+                        }
+                    >
                         <Icon name="tag" />
                     </Button>
                     <Button
@@ -67,7 +82,7 @@ export const Header = () => {
                     </Button>
                 </TopBar.Actions>
             </TopBar>
-            <BookmarkProvider>
+            <BookmarkProvider provider={bookmarkProvider}>
                 <BookmarkSideSheet isOpen={isBookmarkOpen} onClose={toggleBookmark} />
             </BookmarkProvider>
             <PersonSideSheet

packages/cli/src/bin/dev-portal/config.ts

@@ -1,6 +1,6 @@
 import { enableAppModule } from '@equinor/fusion-framework-module-app';
 import { ConsoleLogger } from '@equinor/fusion-framework-module-msal/client';
-import { enableBookmark } from '@equinor/fusion-framework-module-bookmark';
+import { enableBookmark } from '@equinor/fusion-framework-react-module-bookmark';
 import { FrameworkConfigurator } from '@equinor/fusion-framework';
 import { enableNavigation } from '@equinor/fusion-framework-module-navigation';
 import { enableServices } from '@equinor/fusion-framework-module-services';
@@ -41,6 +41,8 @@ export const configure = async (config: FrameworkConfigurator) => {
             identifier: 'fusion-cli',
             name: 'Fusion CLI',
         });
+        builder.setFilter('application', true);
+        //builder.setLogLevel(4);
     });
 
     /* Adds demo portal features to cli */