@equinor/fusion-framework-react-components-bookmark 2.0.2 → 2.0.3

package/dist/types/components/edit-bookmark/AppNameField.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Renders the bookmark's app name while making manifest resolution visible.
+ *
+ * @param props - The resolved display name and whether the manifest request is pending.
+ * @returns A read-only app name field with an accessible loading indicator when needed.
+ */
+export declare const AppNameField: ({ id, displayName, isLoading, }: {
+    readonly id: string;
+    readonly displayName?: string;
+    readonly isLoading: boolean;
+}) => import("react").JSX.Element;

package/dist/types/version.d.ts

@@ -1 +1 @@
-export declare const version = "2.0.2";
+export declare const version = "2.0.3";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/fusion-framework-react-components-bookmark",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "description": "",
   "main": "dist/esm/index.js",
   "exports": {
@@ -23,9 +23,9 @@
   },
   "dependencies": {
     "rxjs": "^7.8.1",
+    "@equinor/fusion-framework-react": "^8.0.1",
     "@equinor/fusion-framework-react-module-bookmark": "^6.0.1",
-    "@equinor/fusion-observable": "^9.1.1",
-    "@equinor/fusion-framework-react": "^8.0.1"
+    "@equinor/fusion-observable": "^9.1.1"
   },
   "devDependencies": {
     "@equinor/eds-core-react": "^2.3.7",
@@ -36,9 +36,10 @@
     "react": "^19.2.1",
     "styled-components": "^6.3.11",
     "typescript": "^7.0.2",
-    "@equinor/fusion-framework-module-bookmark": "^4.0.3",
+    "vitest": "^4.1.0",
+    "@equinor/fusion-framework-module-app": "^8.0.3",
     "@equinor/fusion-framework-module-event": "^6.0.1",
-    "@equinor/fusion-framework-module-app": "^8.0.3"
+    "@equinor/fusion-framework-module-bookmark": "^4.0.3"
   },
   "peerDependencies": {
     "@equinor/eds-core-react": "^2.0.0",
@@ -55,6 +56,7 @@
     }
   },
   "scripts": {
-    "build": "tsc -b"
+    "build": "tsc -b",
+    "test": "vitest --run"
   }
 }

package/src/__tests__/AppNameField.test.tsx

@@ -0,0 +1,39 @@
+import { isValidElement } from 'react';
+import { Input, Progress } from '@equinor/eds-core-react';
+import { describe, expect, it } from 'vitest';
+import { AppNameField } from '../components/edit-bookmark/AppNameField';
+
+describe('AppNameField', () => {
+  it('shows an accessible progress indicator while the manifest is loading', () => {
+    const field = AppNameField({ id: 'app', isLoading: true });
+    const loadingIndicator = field.props.rightAdornments;
+
+    expect(field.type).toBe(Input);
+    expect(field.props.id).toBe('app');
+    expect(field.props['aria-busy']).toBe(true);
+    expect(isValidElement(loadingIndicator)).toBe(true);
+
+    // Guard the element shape before inspecting progress-specific props.
+    if (!isValidElement(loadingIndicator)) {
+      throw new Error('Expected a valid loading indicator');
+    }
+
+    expect(loadingIndicator.type).toBe(Progress.Circular);
+    expect(loadingIndicator.props).toMatchObject({
+      'aria-label': 'Loading app name',
+      size: 16,
+    });
+  });
+
+  it('shows the resolved display name without a progress indicator', () => {
+    const field = AppNameField({
+      id: 'app',
+      displayName: 'My app',
+      isLoading: false,
+    });
+
+    expect(field.props.value).toBe('My app');
+    expect(field.props['aria-busy']).toBe(false);
+    expect(field.props.rightAdornments).toBeUndefined();
+  });
+});

package/src/components/edit-bookmark/AppNameField.tsx

@@ -0,0 +1,27 @@
+import { Input, Progress } from '@equinor/eds-core-react';
+
+/**
+ * Renders the bookmark's app name while making manifest resolution visible.
+ *
+ * @param props - The resolved display name and whether the manifest request is pending.
+ * @returns A read-only app name field with an accessible loading indicator when needed.
+ */
+export const AppNameField = ({
+  id,
+  displayName,
+  isLoading,
+}: {
+  readonly id: string;
+  readonly displayName?: string;
+  readonly isLoading: boolean;
+}) => (
+  <Input
+    id={id}
+    readOnly={true}
+    value={displayName ?? ''}
+    aria-busy={isLoading}
+    rightAdornments={
+      isLoading ? <Progress.Circular aria-label="Loading app name" size={16} /> : undefined
+    }
+  />
+);

package/src/components/edit-bookmark/EditBookmarkModal.tsx

@@ -12,6 +12,7 @@ import { Button, Checkbox, Dialog, Input, Label, Textarea } from '@equinor/eds-c
 import styled from 'styled-components';
 
 import { useBookmarkComponentContext } from '../BookmarkProvider';
+import { AppNameField } from './AppNameField';
 
 const Styled = {
   Dialog: styled(Dialog)`
@@ -60,6 +61,7 @@ export const EditBookmarkModal = ({
 
   const nameId = useId();
   const descriptionId = useId();
+  const appId = useId();
 
   const [updatePayload, setUpdatePayload] = useState(false);
 
@@ -81,12 +83,16 @@ export const EditBookmarkModal = ({
 
   // TODO(#5091): this should be on the bookmark object
   const appProvider = useFrameworkModule<AppModule>('app');
-  const { value: appName } = useObservableState(
+  const { value: appName, error: appNameError } = useObservableState(
     useMemo(
       () => (bookmark && appProvider ? appProvider.getAppManifest(bookmark.appKey) : of(undefined)),
       [appProvider, bookmark],
     ),
   );
+  // Only report a pending manifest request; missing providers and failed requests are not loading.
+  const isAppNameLoading = Boolean(
+    bookmark && appProvider && appName === undefined && appNameError === null,
+  );
 
   const updateBookmark = useCallback(
     async (updates: BookmarkUpdate) => {
@@ -145,9 +151,12 @@ export const EditBookmarkModal = ({
           />
         </div>
         <div>
-          <Label htmlFor="app" label="App" />
-          {/** TODO(#5092): show ghost while loading app name  */}
-          <Input readOnly={true} value={appName?.displayName || ''} />
+          <Label htmlFor={appId} label="App" />
+          <AppNameField
+            id={appId}
+            displayName={appName?.displayName}
+            isLoading={isAppNameLoading}
+          />
         </div>
 
         <Styled.CheckboxWrapper>

package/src/version.ts

@@ -1,2 +1,2 @@
 // Generated by genversion.
-export const version = '2.0.2';
+export const version = '2.0.3';

package/tsconfig.json

@@ -14,5 +14,5 @@
     }
   ],
   "include": ["src/**/*"],
-  "exclude": ["node_modules", "lib"]
+  "exclude": ["node_modules", "lib", "src/__tests__/**/*"]
 }

package/vitest.config.ts

@@ -0,0 +1,10 @@
+import { defineProject } from 'vitest/config';
+
+import { name, version } from './package.json';
+
+export default defineProject({
+  test: {
+    include: ['src/__tests__/**/*.{test,spec}.{ts,tsx}'],
+    name: `${name}@${version}`,
+  },
+});