@squiz/resource-browser 1.69.1 → 2.1.8-rc.0

package/src/SourceList/SourceList.tsx

@@ -1,163 +1,36 @@
-import React, { useEffect, useRef } from 'react';
-import { OverlayTriggerState } from 'react-stately';
-import { DOMAttributes, FocusableElement } from '@react-types/shared';
-import { SkeletonList, ResourceItem, ResourceState } from '@squiz/generic-browser-lib';
-import clsx from 'clsx';
+import React from 'react';
+import { Icon, IconOptions } from '@squiz/generic-browser-lib';
+import { ResourceBrowserSource } from '../types';
 
-import { Source, ScopedSource, Resource } from '../types';
-import { useCategorisedSources } from '../Hooks/useCategorisedSources';
-import { HistoryIcon } from '../Icons/HistoryIcon';
-import { RecentResourcesPaths } from '../Hooks/useRecentResourcesPaths';
-
-export interface SourceListProps {
-  sources: Source[];
-  selectedResource?: Resource | null;
-  previewModalState: OverlayTriggerState;
-  isLoading: boolean;
-  onSourceSelect: (node: ScopedSource, overlayProps: DOMAttributes<FocusableElement>) => void;
-  onSourceDrilldown: (source: ScopedSource) => void;
-  handleReload: () => void;
-  setSource: (source: ScopedSource | null, path?: Resource[]) => void;
-  recentSources: RecentResourcesPaths[];
-  error: Error | null;
+interface SourceListProps {
+    sources: ResourceBrowserSource[];
+    onSourceSelect(source: ResourceBrowserSource): void;
 }
 
-const SourceList = function ({
-  sources,
-  selectedResource,
-  previewModalState,
-  isLoading,
-  onSourceSelect,
-  onSourceDrilldown,
-  handleReload,
-  setSource,
-  recentSources,
-  error,
-}: SourceListProps) {
-  const categorisedSources = useCategorisedSources(sources);
-  const listRef = useRef<HTMLUListElement>(null);
-  const filteredRecentSources = recentSources.filter((item) => item.path?.length);
-
-  useEffect(() => {
-    if (listRef.current) {
-      listRef.current?.focus({
-        preventScroll: true,
-      });
-    }
-  }, []);
-
-  if (isLoading) {
+function SourceList({ sources, onSourceSelect }: SourceListProps) {
     return (
-      <div className="flex flex-col bg-gray-100 min-h-full" aria-label="loading Source list">
-        <SkeletonList itemCount={3} />
-        <SkeletonList itemCount={3} />
-      </div>
-    );
-  }
-
-  return (
-    <ul
-      ref={listRef}
-      tabIndex={-1}
-      aria-label={`Source list`}
-      className={clsx('flex flex-col bg-gray-100 min-h-full focus-visible:outline-0 px-7 py-4')}
-    >
-      {error && <ResourceState state="error" message={error.message} handleReload={handleReload} />}
-
-      {!error && filteredRecentSources.length > 0 && (
-        <li className={`flex flex-col text-sm font-semibold text-grey-800`}>
-          <div className="relative flex justify-center before:w-full before:h-px before:bg-gray-300 before:absolute before:top-2/4 before:z-0">
-            <span className="z-10 bg-gray-100 px-2.5 flex gap-1 items-center">
-              <HistoryIcon />
-              Recent locations
-            </span>
-          </div>
-          <ul aria-label={`recent location nodes`} className="flex flex-col">
-            {filteredRecentSources.map((item, index) => {
-              if (item.path) {
-                const lastResource = item.path[item.path.length - 1];
-                const [rootNode, ...path] = item.path;
-                return (
-                  <ResourceItem
-                    key={`${index}-${item.source?.id}-${lastResource?.id}`}
-                    item={{ source: item.source, resource: lastResource }}
-                    label={lastResource?.name || item.source?.name || ''}
-                    type={lastResource?.type?.code || 'folder'}
-                    previewModalState={previewModalState}
-                    onSelect={() => {
-                      setSource(
-                        {
-                          source: item.source as Source,
-                          resource: rootNode,
-                        },
-                        path,
-                      );
-                    }}
-                    className={clsx(
-                      index === 0 && 'rounded-t-lg mt-3',
-                      index === filteredRecentSources.length - 1 && 'rounded-b-lg',
-                    )}
-                    showChevron
-                  />
-                );
-              }
-            })}
-          </ul>
-        </li>
-      )}
-
-      {!error &&
-        categorisedSources.map(({ key, label, sources }, index) => {
-          return (
-            <li
-              key={key}
-              className={`flex flex-col text-sm font-semibold text-grey-800 ${
-                index > 0 || filteredRecentSources.length > 0 ? 'mt-3' : ''
-              }`}
-            >
-              <div className="relative flex justify-center before:w-full before:h-px before:bg-gray-300 before:absolute before:top-2/4 before:z-0">
-                <span className="z-10 bg-gray-100 px-2.5">{label}</span>
-              </div>
-              {sources.length > 0 && (
-                <ul aria-label={`${label} nodes`} className="flex flex-col">
-                  {sources.map(({ source, resource }) => {
-                    if (!resource || resource.childCount === 0) {
-                      return (
-                        <ResourceItem
-                          key={`${source.id}-${resource?.id}`}
-                          item={{ source, resource }}
-                          label={resource?.name || source.name}
-                          type={resource?.type.code || 'folder'}
-                          previewModalState={previewModalState}
-                          onSelect={onSourceDrilldown}
-                          className="mt-3 rounded-lg"
-                          showChevron
-                        />
-                      );
-                    }
+        <div className="overflow-y-scroll w-screen max-w-[400px] flex-1 grow-[3] border-r border-gray-300 bg-gray-100 pl-4.5 pr-4.5 pb-4.5 pt-3">
+            <div className="text-md font-semibold">Select an environment to use</div>
+            <ul tabIndex={-1} aria-label={`environment list`} className="flex flex-col bg-gray-100 min-h-full focus-visible:outline-0">
+                {sources.map((source, index) => {
                     return (
-                      <ResourceItem
-                        key={`${source.id}-${resource?.id}`}
-                        item={{ source, resource }}
-                        selected={resource?.id == selectedResource?.id && resource != null}
-                        label={resource?.name || source.name}
-                        type={resource?.type.code || 'folder'}
-                        childCount={resource?.childCount || undefined}
-                        previewModalState={previewModalState}
-                        onSelect={onSourceSelect}
-                        onDrillDown={onSourceDrilldown}
-                        className="mt-3 rounded-lg"
-                        showChevron
-                      />
+                        <li key={index} className="flex items-stretch relative">
+                            <button
+                                onClick={() => {
+                                    onSourceSelect(source);
+                                }}
+                                className="w-full p-1 mt-3 bg-white border-1 border-grey-200 min-h-[64px] rounded-lg flex items-center text-md font-semibold"
+                            >
+                                <Icon icon={source.type as IconOptions} className="ml-4" />
+                                <span className="line-clamp-2 text-left break-word ml-4">{source.name || source.id}</span>
+                                <Icon icon={'arrow-right' as IconOptions} className="absolute ml-1 right-4" />
+                            </button>
+                        </li>
                     );
-                  })}
-                </ul>
-              )}
-            </li>
-          );
-        })}
-    </ul>
-  );
-};
+                })}
+            </ul>
+        </div>
+    );
+}
 
 export default SourceList;

package/src/__mocks__/MockModels.ts

@@ -1,31 +1,62 @@
-import { DeepPartial, Resource, ScopedSource, Source } from '../types';
+import { ResourceBrowserSource, ResourceBrowserResource, ResourceBrowserPlugin } from '../types';
 
-export const mockSource = (properties: DeepPartial<Source> = {}): Source => {
-  return {
-    id: '1',
-    name: 'Test source',
-    ...properties,
-    nodes: properties?.nodes?.map((node) => mockResource(node as Partial<Resource>)) || [],
-  };
+export type DeepPartial<T> = {
+    [P in keyof T]?: T[P] extends Array<infer U>
+        ? Array<DeepPartial<U>>
+        : T[P] extends ReadonlyArray<infer U>
+          ? ReadonlyArray<DeepPartial<U>>
+          : DeepPartial<T[P]>;
 };
 
-export const mockResource = (properties: Partial<Resource> = {}): Resource => {
-  return {
-    id: '1',
-    name: 'Test resource',
-    type: { code: 'folder', name: 'Folder' },
-    status: { code: 'live', name: 'Live' },
-    url: 'https://no-where.com',
-    urls: [],
-    childCount: 0,
-    lineages: [],
-    ...properties,
-  };
+export const mockSource = (properties: DeepPartial<ResourceBrowserSource> = {}): ResourceBrowserSource => {
+    return {
+        id: '1',
+        name: 'Test source',
+        type: 'dam',
+        ...properties,
+    };
 };
 
-export const mockScopedSource = (properties: DeepPartial<ScopedSource> = {}): ScopedSource => {
-  return {
-    source: mockSource(properties?.source),
-    resource: properties?.resource ? mockResource(properties?.resource as Partial<Resource>) : null,
-  };
+export const mockPlugin = (properties: DeepPartial<ResourceBrowserPlugin> = {}): ResourceBrowserPlugin => {
+    return {
+        type: 'dam',
+        // @ts-ignore
+        sourceBrowserComponent: jest.fn(),
+        // @ts-ignore
+        renderSelectedResource: jest.fn(),
+        // @ts-ignore
+        resolveResource: jest.fn(),
+        ...properties,
+    };
+};
+
+export const mockResource = (properties: Partial<ResourceBrowserResource> = {}): ResourceBrowserResource => {
+    return {
+        id: '1',
+        name: 'Resource 1',
+        url: '',
+        source: {
+            id: '1',
+            type: 'dam',
+        },
+        type: {
+            code: 'jpeg',
+            name: 'JPEG image',
+        },
+        squizImage: {
+            name: 'an-image-name',
+            imageVariations: {
+                original: {
+                    width: 1024,
+                    height: 900,
+                    url: 'an-image-url',
+                    mimeType: 'image/jpeg',
+                    byteSize: 1068,
+                    sha1Hash: '',
+                    aspectRatio: '',
+                },
+            },
+        },
+        ...properties,
+    };
 };

package/src/__mocks__/PluginExample.tsx

@@ -0,0 +1,98 @@
+import React from 'react';
+import {
+    ResourceBrowserPlugin,
+    ResourceBrowserUIProps,
+    ResourceBrowserResource,
+    ResourceBrowserSource,
+    ResourceBrowserSelectedState,
+    useResolveResourceResponse,
+} from '../types';
+
+// The plugin must conform to the Typescript interface ResourceBrowserPlugin
+export default (): ResourceBrowserPlugin => {
+    return {
+        /**
+         * The type of source this plugin handles. Plugins can only handle a single ResourceBrowserSource type, export multiple
+         * plugins from your package with different types if you have a single codebase that can handle more than one type.
+         *
+         * This value needs to match the ResourceBrowserSource.type field that is passed to the ResourceBrowser via OnRequestSources.
+         */
+        type: 'exampleType',
+
+        /**
+         * Enables a div in the header of the ResourceBrowser modal for a plugin to insert content using React Portals.
+         * DOM element is passed into the Functional Component created using the sourceBrowserComponent function.
+         */
+        headerPortal: false,
+
+        /**
+         * Provide a React Functional Component for browsing the ResourceBrowserSource type; this will be rendered within the
+         * ResourceBrowers modal window when the source type is selected or if a pre-existing resource is being changed.
+         *
+         * The input props should be of the type ResourceBrowserUIProps so the ResourceBrowser can provide the following information:
+         * @param source will contain the source information provided to the ResourceBrowser.
+         * @param headerPortal (optional) may contain a DOM element for insertion of content using React Portals.
+         * @param preselectedResource (optional) may contain a resource that is being changed to start open in your UI (optional).
+         * @param onSelected should be called when a selection has been made and the ResourceBrowser should be closed.
+         *
+         * @returns ReactElement
+         */
+        sourceBrowserComponent: () => {
+            // This should return a fucntion component, probably from another file.
+            return (props: ResourceBrowserUIProps) => {
+                return <></>;
+            };
+        },
+
+        /**
+         * Provide params to assist Resource Browser in rendering a preview of the selected resource to the end user.
+         *
+         * @param resource The resource which is to be rendered to the frontend UI
+         *
+         * @returns { showThumbnail } if true will render a preview thumbnail using the SquizImage data or the resource data.
+         * @returns { icon } if showThumbnail evaluates to false this will be rendered to the left side of the resource label.
+         * @returns { label } Label for the selected resource.
+         * @returns { description } Description lines to provide additional information about the selected resource.
+         */
+        renderSelectedResource: (resource: ResourceBrowserResource): Promise<ResourceBrowserSelectedState> => {
+            // ...Fetch information from source for resource here
+            return Promise.resolve({
+                showThumbnail: true, // If the resource is an image that can be previewed set this to true
+                icon: undefined, // (optionally) otherwise provide an icon for render
+                label: '', // Label or name of resource
+                description: [], // (optional) extra details on the resource e.g. size, mime type etc
+            });
+        },
+
+        /**
+         * Provide a function to resolve a partial resource reference into a full data structure. Hooks may be used within.
+         *
+         * @param resourceId The id of the resource to resolve, this may be null if no resource is currently selected
+         * @param source The source structure of the resource to resolve, this may be null before the source retrieval has completed
+         *
+         * @returns  { ResourceBrowserResource } Full data structure needed by the Resource Browser and its consumers.
+         *
+         */
+        useResolveResource: (resourceId: string | null, source: ResourceBrowserSource | null): useResolveResourceResponse => {
+            // ...Fetch information from source for resource here
+            return {
+                data:
+                    resourceId && source
+                        ? {
+                              id: resourceId,
+                              name: '',
+                              url: '',
+                              source: source,
+                              type: {
+                                  code: '',
+                                  name: '',
+                              },
+                              squizImage: undefined,
+                          }
+                        : null,
+                error: null,
+                isLoading: false,
+            };
+        },
+    };
+};

package/src/__mocks__/StorybookHelpers.tsx

@@ -0,0 +1,141 @@
+import React, { useState, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { Icon } from '@squiz/generic-browser-lib';
+
+import sampleSources from './sample-sources.json';
+import { ResourceBrowserPlugin, ResourceBrowserResource } from '../types';
+type CreateCallbacksProps = Partial<{
+    delay: number;
+    sourceIsLoading: boolean;
+    singleSource?: boolean;
+    error?: string;
+}>;
+
+export const createPlugins = (callbackWait: number, headerPortal = false): ResourceBrowserPlugin[] => {
+    const types = ['dam', 'matrix'];
+    return types.map((type): ResourceBrowserPlugin => {
+        return {
+            //@ts-ignore
+            type,
+            createHeaderPortal: headerPortal,
+            sourceBrowserComponent: () => {
+                return (props) => {
+                    return (
+                        <div className="h-screen lg:h-[calc(100vh-9rem)] w-screen max-w-[50rem]">
+                            <div>THIS IS A {type} PLUGIN</div>
+                            <button
+                                onClick={() => {
+                                    props.onSelected({
+                                        id: '1f7a25b4-380f-4540-9555-8be2dcab4019',
+                                        source: props.source,
+                                    } as ResourceBrowserResource);
+                                }}
+                            >
+                                Press to set resource
+                            </button>
+                            {headerPortal && props.headerPortal && createPortal(<div>HeadPortal</div>, props.headerPortal)}
+                        </div>
+                    );
+                };
+            },
+            renderSelectedResource: (resource) => {
+                return new Promise((resolve, reject) => {
+                    const fileSize = resource.squizImage?.imageVariations?.original?.byteSize;
+                    const fileWidth = resource.squizImage?.imageVariations?.original?.width;
+                    const fileHeight = resource.squizImage?.imageVariations?.original?.height;
+
+                    setTimeout(() => {
+                        resolve({
+                            showThumbnail: resource.squizImage ? true : false,
+                            icon: <Icon icon={resource.type.code} resourceSource="matrix" className="w-4 h-4" />,
+                            label: resource.name || resource.squizImage?.name || resource.id,
+                            description: [
+                                <dl
+                                    key="1"
+                                    className="col-start-2 col-end-2 flex flex-row gap-1 justify-self-start items-center font-normal text-sm"
+                                >
+                                    <div>
+                                        <dt className="hidden">Asset size</dt>
+                                        <dd className="text-gray-600">
+                                            {resource.squizImage && (
+                                                <>
+                                                    {fileSize} kB , {fileWidth} x {fileHeight}px
+                                                </>
+                                            )}
+                                        </dd>
+                                    </div>
+                                </dl>,
+                            ],
+                        });
+                    }, callbackWait);
+                });
+            },
+            useResolveResource: (unresolvedResource) => {
+                const [resource, setResource] = useState<ResourceBrowserResource | null>(null);
+                const [error, setError] = useState<Error | null>(null);
+                const [isLoading, setIsLoading] = useState<boolean>(false);
+
+                useEffect(() => {
+                    if (unresolvedResource !== null) {
+                        setTimeout(() => {
+                            setIsLoading(false);
+                            setResource({
+                                id: unresolvedResource.resource,
+                                name: 'An image from Bynder',
+                                url: 'https://cdn.mediavalet.com/aunsw/squiz/KfIjcjUJz0O6kWoInBys5A/XpBxg3Hj-0qOXFWnAAWvXQ/Large/RX-7.jpeg',
+                                source: unresolvedResource.source,
+                                type: {
+                                    code: 'jpeg',
+                                    name: 'JPEG image',
+                                },
+                                squizImage: {
+                                    name: 'An image from Bynder',
+                                    imageVariations: {
+                                        original: {
+                                            width: 1024,
+                                            height: 900,
+                                            url: 'https://cdn.mediavalet.com/aunsw/squiz/KfIjcjUJz0O6kWoInBys5A/XpBxg3Hj-0qOXFWnAAWvXQ/Large/RX-7.jpeg',
+                                            mimeType: 'image/jpeg',
+                                            byteSize: 1068,
+                                            sha1Hash: '',
+                                            aspectRatio: '',
+                                        },
+                                    },
+                                },
+                            });
+                        }, callbackWait);
+                    }
+                }, [unresolvedResource, setResource, setIsLoading]);
+
+                return {
+                    data: resource,
+                    error: error,
+                    isLoading: isLoading,
+                };
+            },
+        };
+    });
+};
+
+export const createResourceBrowserCallbacks = ({
+    delay = 500,
+    sourceIsLoading = false,
+    error,
+    singleSource = false,
+}: CreateCallbacksProps = {}) => {
+    return {
+        onRequestSources: () => {
+            return new Promise((resolve, reject) => {
+                if (!sourceIsLoading) {
+                    setTimeout(() => {
+                        if (error && Math.random() > 0.5) {
+                            reject(new Error(error));
+                        } else {
+                            resolve(singleSource ? [sampleSources[0]] : sampleSources);
+                        }
+                    }, delay);
+                }
+            });
+        },
+    };
+};

package/src/__mocks__/renderWithContext.tsx

@@ -1,23 +1,19 @@
 import React, { ReactElement, ReactNode } from 'react';
-import {
-  ResourceBrowserContextProps,
-  ResourceBrowserContextProvider,
-} from '../ResourceBrowserContext/ResourceBrowserContext';
+import { ResourceBrowserContextProps, ResourceBrowserContextProvider } from '../ResourceBrowserContext/ResourceBrowserContext';
 import { render } from '@testing-library/react';
 
 export const renderWithContext = (ui: ReactElement, context: Partial<ResourceBrowserContextProps> = {}) => {
-  return render(ui, {
-    wrapper: ({ children }: { children: ReactNode }): ReactElement => (
-      <ResourceBrowserContextProvider
-        value={{
-          onRequestSources: jest.fn(),
-          onRequestChildren: jest.fn(),
-          onRequestResource: jest.fn(),
-          ...context,
-        }}
-      >
-        {children}
-      </ResourceBrowserContextProvider>
-    ),
-  });
+    return render(ui, {
+        wrapper: ({ children }: { children: ReactNode }): ReactElement => (
+            <ResourceBrowserContextProvider
+                value={{
+                    onRequestSources: jest.fn(),
+                    plugins: [],
+                    ...context,
+                }}
+            >
+                {children}
+            </ResourceBrowserContextProvider>
+        ),
+    });
 };

package/src/__mocks__/sample-sources.json

@@ -0,0 +1,32 @@
+[
+    {
+        "name": "Bynder #1",
+        "id": "c90feac1-55f3-4e1f-9b56-c22829e3f510",
+        "type": "dam",
+        "group": "DAM"
+    },
+    {
+        "name": "Bynder #2",
+        "id": "6a238a04-b5bd-44d5-940f-e235b3b352ab",
+        "type": "dam",
+        "group": "DAM"
+    },
+    {
+        "name": "MediaValet",
+        "id": "747b81ac-adce-455e-ac5a-bce7ac738115",
+        "type": "dam",
+        "group": "DAM"
+    },
+    {
+        "name": "Matrix site #1",
+        "id": "123",
+        "type": "matrix",
+        "group": "Matrix DAM UAT system"
+    },
+    {
+        "name": "Matrix site #2",
+        "id": "321",
+        "type": "matrix",
+        "group": "Matrix DAM UAT system"
+    }
+]

package/src/index.scss

@@ -4,30 +4,40 @@
 @import 'tailwindcss/utilities';
 
 // Components
-@import './ResourceBreadcrumb/resource-breadcrumb';
 @import './ResourcePicker/resource-picker';
-@import './PreviewPanel/details/matrix-resource';
 @import '@squiz/generic-browser-lib/src/Spinner/spinner';
 @import '@squiz/generic-browser-lib/src/Skeleton/skeleton';
 
 *,
 button {
-  @apply antialiased;
-  letter-spacing: -0.02em;
+    @apply antialiased;
+    letter-spacing: -0.02em;
 }
 
 svg {
-  @apply text-gray-600;
+    @apply text-gray-600;
 }
 
 .p-4\.5 {
-  padding: 18px;
+    padding: 18px;
+}
+
+.pl-4\.5 {
+    padding-left: 18px;
+}
+
+.pr-4\.5 {
+    padding-right: 18px;
+}
+
+.pb-4\.5 {
+    padding-bottom: 18px;
 }
 
 // In tailwind there is no break-word as it is deprecated, but break-words which is slightly different does not work here, so I have added the suggested combination here
 // https://v1.tailwindcss.com/docs/word-break
 // https://github.com/tailwindlabs/tailwindcss/discussions/2213
 .break-word {
-  word-break: break-word;
-  overflow-wrap: anywhere;
+    word-break: break-word;
+    overflow-wrap: anywhere;
 }