@orangelogic/orange-dam-content-browser-sdk 2.1.53 → 2.1.54

package/src/store/assets/assets.api.ts

@@ -0,0 +1,167 @@
+import { v4 as uuidv4 } from 'uuid';
+
+import { SortOrder } from '@/types/assets';
+import { Asset, MediaType, Proxy } from '@/types/search';
+import { AppBaseQuery } from '@/utils/api';
+import { hasElements, uniqueArray } from '@/utils/array';
+import { createApi } from '@reduxjs/toolkit/query/react';
+
+const Parameters = {
+  ExtensionsThatSupportTransformationUsingATS: 'ExtensionsThatSupportTransformationUsingATS',
+  EnableATSInGetLink: 'EnableATSInGetLink',
+  CollectionSubtypeCriteria: 'CollectionSubtypeCriteria',
+  SupportDocTypes: 'SupportDocTypes',
+  RepresentativeSupportedDocSubType: 'RepresentativeSupportedDocSubType',
+  ExtensionAuto: 'ExtensionAuto',
+};
+
+type GetAvailableProxiesRequest = {
+  assetImages?: Asset[];
+  docTypes?: string[];
+  useSession?: string;
+};
+
+export type GetAvailableProxiesResponse = {
+  previewUrl: string;
+  proxies: Proxy[];
+};
+
+type GetAvailableExtensionsResponse = Record<MediaType, { displayName: string; value: string }[]>;
+
+/**
+ * get query parameter for AvailableProxies_4ea_v2 API
+ * @param {GetAvailableProxiesRequest} 
+ * @returns {string[][]}
+ */
+const getAvailableProxiesAPIParams = ({ assetImages, docTypes, useSession }: GetAvailableProxiesRequest): string[][] => {
+  let result = [];
+  if (!hasElements(assetImages)) {
+    docTypes = hasElements(docTypes) ? docTypes : Object.values(MediaType);
+
+    result = uniqueArray(docTypes as string[]).map(docType => ['DocTypes', docType]);
+  } else {
+    const assetDocTypes = uniqueArray(assetImages as Asset[], (asset) => asset.docType)
+      .map(asset => ['DocTypes', asset.docType]);
+
+    result = (assetImages as Asset[]).map(asset => ['RecordID', asset.id]).concat(assetDocTypes);
+  }
+
+  if (useSession) {
+    result.push(['UseSession', useSession]);
+  }
+
+  return result;
+};
+
+// Define a service using a base URL and expected endpoints
+export const assetsApi = createApi({
+  reducerPath: 'assetsApi',
+  baseQuery: AppBaseQuery,
+  tagTypes: ['AvailableExtensions', 'AvailableProxies', 'Parameters', 'SortOrders'],
+  endpoints: (builder) => ({
+    getAvailableExtensions: builder.query<GetAvailableExtensionsResponse, void>({
+      query: () => ({
+        url: '/webapi/extensibility/integrations/gab/assetbrowser/getavailableextensionsfortransformation_419v_v1',
+      }),
+      transformResponse: (response: { extensions: GetAvailableExtensionsResponse }) => {
+        return response.extensions;
+      },
+      providesTags: ['AvailableExtensions'],
+      serializeQueryArgs: () => {
+        return 'getAvailableExtensions';
+      },
+    }),
+    getAvailableProxies: builder.query<GetAvailableProxiesResponse, GetAvailableProxiesRequest>({
+      query: (request) => ({
+        url: '/webapi/extensibility/integrations/contentBrowserSDK/AvailableProxies_4ea_v3?',
+        params: getAvailableProxiesAPIParams(request),
+      }),
+      transformResponse: (response: { proxies: Proxy[]; previewUrl: string }) => {
+        const { previewUrl, proxies } = response;
+        return {
+          previewUrl,
+          proxies: proxies.map((proxy) => {
+            return {
+              ...proxy,
+              id: uuidv4(),
+            };
+          }),
+        };
+      },
+      serializeQueryArgs: ({ queryArgs }) => getAvailableProxiesAPIParams(queryArgs),
+      providesTags: (_result, _error, _args) => ['AvailableProxies'],
+    }),
+    getParameters: builder.query<{
+      ATSEnabled: boolean;
+      autoExtension: string;
+      collectionPath: string;
+      supportedExtensions: string[];
+      supportedRepresentativeSubtypes: string[];
+      supportedDocTypes: string[];
+    }, {
+      useSession?: string;
+    }>({
+      query: ({ useSession }) => {
+        const params = [];
+
+        if (useSession) {
+          params.push(['UseSession', useSession]);
+        }
+
+        return {
+          url: '/webapi/configuration/parameters/getparameters_412Z_v1',
+          params,
+        };
+      },
+      transformResponse: (response: Record<string, string>) => {
+        return {
+          ATSEnabled: response[Parameters.EnableATSInGetLink].toLowerCase() === 'true',
+          collectionPath: response[Parameters.CollectionSubtypeCriteria]?.toLowerCase() ?? '',
+          supportedDocTypes: response[Parameters.SupportDocTypes]?.split(/\r?\n/) ?? [],
+          supportedExtensions: response[Parameters.ExtensionsThatSupportTransformationUsingATS]?.split('\n') ?? [],
+          supportedRepresentativeSubtypes: response[Parameters.RepresentativeSupportedDocSubType]?.split('\r\n') ?? [],
+          autoExtension: response[Parameters.ExtensionAuto]?.toLowerCase() ?? '.auto',
+        };
+      },
+      providesTags: ['Parameters'],
+    }),
+    getSortOrders: builder.query<Record<string, SortOrder[]>, {
+      useSession?: string;
+    }>({
+      query: ({ useSession }) => ({
+        url: '/webapi/extensibility/integrations/contentBrowserSDK/sortorders_4147',
+        params: useSession ? [['UseSession', useSession]] : [],
+      }),
+      providesTags: ['SortOrders'],
+      transformResponse: (response: { sortOrders: SortOrder[] }) => {
+        const value = response.sortOrders.reduce((acc, item) => {
+          const id = (item.sortDirectionGroupKey || item.name).trim().toLowerCase();
+          
+          acc[id] = [...(acc[id] ?? []), item];
+    
+          return acc;
+        }, {} as Record<string, SortOrder[]>);
+
+        Object.keys(value).forEach((key) => {
+          const sortOrder = value[key];
+          if (sortOrder.length === 1) {
+            sortOrder[0].sortDirection = 'Mono';
+          }
+        });
+
+        return value;
+      },
+    }),
+  }),
+});
+
+// < { proxies: { [key: string]: string } }, void>
+
+// Export hooks for usage in functional components, which are
+// auto-generated based on the defined endpoints
+export const {
+  useGetAvailableExtensionsQuery,
+  useGetAvailableProxiesQuery,
+  useGetParametersQuery,
+  useGetSortOrdersQuery,
+} = assetsApi;

package/src/store/assets/assets.service.ts

@@ -0,0 +1,223 @@
+import { store } from '@/store';
+import { CortexErrorResponse } from '@/types/common';
+import { Asset, GetAssetLinkResponse } from '@/types/search';
+import { cortexFetch } from '@/utils/api';
+
+import { assetsApi } from './assets.api';
+import { TrackingParameter, Transformation, TransformationAction } from '@/types/assets';
+
+export const getAssetLinks = async (
+  {
+    assets,
+    extraFields,
+    permanentLink,
+    proxyPreference,
+    transformations,
+    parameters,
+    extension,
+    useSession,
+  }: {
+    assets: Asset[];
+    extraFields?: string;
+    permanentLink?: string;
+    proxyPreference?: string;
+    transformations?: Transformation[];
+    parameters?: TrackingParameter[];
+    maxWidth?: number;
+    maxHeight?: number;
+    extension?: string;
+    useSession?: string;
+  },
+): Promise<GetAssetLinkResponse[]> => {
+  let baseUrl = '/webapi/extensibility/integrations/contentBrowserSDK/GetAssetLink_4by?';
+  if (useSession) {
+    baseUrl += `UseSession=${useSession}&`;
+  }
+  if (extraFields) {
+    baseUrl += `ExtraFields=${extraFields}&`;
+  }
+  if (permanentLink) {
+    baseUrl += `GenerateAssetUrl=${false}&`;
+  }
+  baseUrl += 'RecordId=';
+
+  const getAssetLinkErrors: { [key: string]: Asset[] } = {};
+  const failToImportAssets: string[] = [];
+  const isOnlyOneAssetSelected = assets.length === 1;
+  // Loop through all selected assets to replace Image url by IIIF urls
+  const result = (await Promise.all(assets.map(async (asset) => {
+    let url = baseUrl + asset.id;
+    if (proxyPreference) {
+      url += `&Proxy=${proxyPreference}`;
+    }
+    const response  = await cortexFetch(url, { method: 'GET' });
+    let responseData: GetAssetLinkResponse | CortexErrorResponse | null = null;
+    responseData = await response.json();
+
+    if (!response.ok || !responseData) {
+      // We will give more details error message if only one asset was imported
+      if (isOnlyOneAssetSelected && responseData) {
+        const errorResponseData = responseData as CortexErrorResponse;
+        if (!getAssetLinkErrors[errorResponseData.ErrorCode]) {
+          getAssetLinkErrors[errorResponseData.ErrorCode] = [asset];
+        } else {
+          getAssetLinkErrors[errorResponseData.ErrorCode].push(asset);
+        }
+      } else {
+        failToImportAssets.push(asset.name);
+      }
+      return {
+        imageUrl: asset.imageUrl,
+      } as GetAssetLinkResponse;
+    }
+
+    let imageUrl = permanentLink || (responseData as GetAssetLinkResponse).imageUrl;
+
+    if (transformations && transformations.length > 0) {
+      imageUrl += '/t/';
+    }
+
+    transformations?.forEach(({ key, value }) => {
+      if (key === TransformationAction.Resize) {
+        const validTransformations = [
+          ...[
+            {
+              key: 're_w_',
+              value: value.width,
+            },
+            {
+              key: 're_h_',
+              value: value.height,
+            },
+          ]
+            .filter((item) => item.value !== undefined)
+            .map((item) => ({
+              key: item.key,
+              value: Math.round(Number(item.value)),
+            })),
+          {
+            key: 're_rm_',
+            value: 'stretch',
+          },
+        ];
+  
+        validTransformations.forEach(({ key: vKey, value: vValue }, index) => {
+          imageUrl += `${vKey}${vValue}${index < validTransformations.length - 1 ? ',' : ''}`;
+        });
+
+        imageUrl += '/';
+      }
+  
+      if (key === TransformationAction.Crop) {
+        const validTransformations = [
+          ...[
+            {
+              key: 'c_w_',
+              value: value.width,
+            },
+            {
+              key: 'c_h_',
+              value: value.height,
+            },
+            {
+              key: 'c_x_',
+              value: value.x,
+            },
+            {
+              key: 'c_y_',
+              value: value.y,
+            },
+          ]
+            .filter((item) => item.value !== undefined)
+            .map((item) => ({
+              key: item.key,
+              value: Math.round(Number(item.value)),
+            })),
+          {
+            key: 'c_whu_',
+            value: 'pixel',
+          },
+        ];
+  
+        validTransformations.forEach(({ key: vKey, value: vValue }, index) => {
+          imageUrl += `${vKey}${vValue}${index < validTransformations.length - 1 ? ',' : ''}`;
+        });
+
+        imageUrl += '/';
+      }
+  
+      if (key === TransformationAction.Rotate) {
+        const validTransformations = [{
+          key: 'r_a_',
+          value: value.rotation,
+        }].filter(item => item.value !== undefined).map(item => ({ key: item.key, value: Math.round(Number(item.value)) }));
+  
+        validTransformations.forEach(({ key: vKey, value: vValue }, index) => {
+          imageUrl += `${vKey}${vValue}${index < validTransformations.length - 1 ? ',' : ''}`;
+        });
+
+        imageUrl += '/';
+      }
+    });
+
+    if (transformations && transformations.length > 0) {
+      imageUrl += `${asset.identifier}`;
+    }
+
+    if (!permanentLink) {
+      imageUrl += `${extension ?? asset.extension}`;
+    }
+
+    const queryParams: string[] = [];
+
+    if (parameters && parameters.length > 0) {
+      parameters.forEach(({ key, value }) => {
+        queryParams.push(`${encodeURIComponent(key.trim())}=${encodeURIComponent(value.trim())}`);
+      });
+    }
+
+    if (useSession) {
+      queryParams.push(`UseSession=${useSession}`);
+    }
+
+    if (queryParams.length > 0) {
+      imageUrl += `?${queryParams.join('&')}`;
+    }
+    
+    (responseData as GetAssetLinkResponse).imageUrl = imageUrl;
+    return responseData as GetAssetLinkResponse;
+  })));
+
+  if (failToImportAssets.length > 0) {
+    Object.entries(getAssetLinkErrors).reduce((acc, [errorCode, assetsWithError]) => {
+      const namesOfAssetWithError = assetsWithError.map(asset => asset.name).join(', ');
+
+      switch (errorCode) {
+        case 'OL_ERR_001_NOTFOUND':
+          acc.push(`${namesOfAssetWithError} not found`);
+          break;
+        case 'OL_ASSETLINKSERVICE_ERROR_001_LINKS_TO_NON_REQUIRED_FORMATS_NOT_ALLOWED':
+          const proxies           = assetsApi.endpoints.getAvailableProxies.select({})(store.getState()).data?.proxies;
+          if (!proxies) {
+            acc.push(`Failed to import ${namesOfAssetWithError}. Change the import proxy in Settings or re-check your permission`);
+          }
+          break;
+        case 'OL_ERR_002_NOTALLOWED':
+          acc.push(`You don't have permission to import ${namesOfAssetWithError}`);
+          break;
+        case 'OL_ERR_003_REMOVED':
+          acc.push(`${namesOfAssetWithError} was removed`);
+          break;
+        case 'OL_ERR_006_BADREQUEST':
+        default:
+          acc.push(`Failed to import asset ${namesOfAssetWithError}`);
+          break;
+      }
+      return acc;
+    }, [] as string[]);
+
+    throw new Error('Failed to import the following assets: ' + failToImportAssets.join('\n '));
+  }
+
+  return result;
+};

package/src/store/assets/assets.slice.ts

@@ -0,0 +1,104 @@
+import { AssetsState, TrackingParameter, Transformation } from '@/types/assets';
+import { Asset, GetAssetLinkResponse } from '@/types/search';
+import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
+
+import { getAssetLinks } from './assets.service';
+
+export const SETTINGS_DEFAULT_PROXY = 'Always show asset format selector';
+
+export const ASSETS_FEATURE_KEY                      = 'assets';
+export const ASSETS_FEATURE_STORAGE_KEY              = ASSETS_FEATURE_KEY + '_storage';
+export const ASSETS_FEATURE_STORAGE_KEY_IMPORT_PROXY = ASSETS_FEATURE_STORAGE_KEY + '_importProxy';
+export const ASSETS_FEATURE_STORAGE_TTL              = 1000 * 60 * 60;
+
+const initialState: AssetsState = {
+};
+
+// #region Slice
+export const assetsSlice = createSlice({
+  name: ASSETS_FEATURE_KEY,
+  initialState,
+  reducers: {
+    resetImportStatus: (state) => {
+      state.errorMessage = undefined;
+    },
+  },
+  extraReducers(builder) {
+    // eslint-disable-next-line @typescript-eslint/no-use-before-define
+    builder.addCase(importAssets.pending, (state) => {
+      state.errorMessage = undefined;
+    });
+    // eslint-disable-next-line @typescript-eslint/no-use-before-define
+    builder.addCase(importAssets.rejected, (state, action) => {
+      state.errorMessage = action.error.message;
+    });
+    // eslint-disable-next-line @typescript-eslint/no-use-before-define
+    builder.addCase(importAssets.fulfilled, (state) => {
+      state.errorMessage = undefined;
+    });
+  },
+});
+// #endregion
+
+export const { resetImportStatus } = assetsSlice.actions;
+
+// #region Action
+export const importAssets = createAsyncThunk<
+GetAssetLinkResponse[],
+{
+  extension?: string;
+  extraFields?: string[];
+  maxHeight?: number;
+  maxWidth?: number;
+  parameters?: TrackingParameter[];
+  permanentLink?: string;
+  proxiesPreference?: string;
+  selectedAsset: Asset;
+  transformations?: Transformation[];
+  useRepresentative?: boolean;
+  useSession?: string;
+}
+>(
+  `${ASSETS_FEATURE_KEY}/importAssets`,
+  async (
+    {
+      extension,
+      extraFields,
+      maxHeight,
+      maxWidth,
+      parameters,
+      permanentLink,
+      proxiesPreference,
+      selectedAsset,
+      transformations,
+      useRepresentative,
+      useSession,
+    },
+  ) => {
+
+    const images = await getAssetLinks({
+      assets: [selectedAsset],
+      extraFields: extraFields?.join('&ExtraFields='),
+      permanentLink,
+      proxyPreference: proxiesPreference,
+      transformations,
+      parameters,
+      maxWidth,
+      maxHeight,
+      extension,
+      useSession,
+    });
+
+    if (useRepresentative) {
+      return [{
+        ...images[0],
+        imageUrl: selectedAsset.imageUrl,
+      }];
+    }
+
+    return images;
+  },
+);
+// #endregion
+
+export default assetsSlice.reducer;

package/src/store/auth/auth.service.ts

@@ -0,0 +1,71 @@
+import { GetAccessKeyRes, GetAccessTokenRes, RequestAuthorizeRes } from '@/types/auth';
+import { cortexFetch } from '@/utils/api';
+
+export const AUTH_MAX_RETRIES = 10;
+export const CANCEL_AUTH_MESSAGE = 'Authentication cancelled';
+
+export let authAbortController = new AbortController();
+
+export const abortAuthService = () => {
+  authAbortController.abort(CANCEL_AUTH_MESSAGE);
+  authAbortController = new AbortController();
+};
+
+export const requestAuthorizeService = async (
+  nonce: string,
+): Promise<RequestAuthorizeRes> => {
+  const response = await cortexFetch(
+    'webapi/extensibility/integrations/gab/authorization/requestauthorize_4bu_v1',
+    {
+      method: 'POST',
+      body: JSON.stringify({ Nonce: nonce }),
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    },
+  );
+  return { ...(await response.json()), nonce };
+};
+
+export const getAccessKeyService = async (
+  requestID: string,
+): Promise<GetAccessKeyRes> => {
+  authAbortController = new AbortController();
+  let count = 0;
+  let data: GetAccessKeyRes;
+  while (count < AUTH_MAX_RETRIES) {
+    const response = await cortexFetch(
+      'webapi/extensibility/integrations/gab/authorization/getaccesskey_4bv_v1',
+      {
+        signal: authAbortController.signal,
+        method: 'POST',
+        body: JSON.stringify({ RequestID: requestID }),
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      },
+    );
+    data = await response.json();
+    if (!!data.code && data.code !== 'RepeatRequest') {
+      return data;
+    }
+    count++;
+  }
+  throw new Error('Unable to get Access Key: Max retries exceeded.');
+};
+
+export const getAccessTokenService = async (
+  accessKey: string,
+): Promise<GetAccessTokenRes> => {
+  const response = await cortexFetch(
+    'webapi/extensibility/integrations/gab/authorization/getaccesstoken_4bt_v1',
+    {
+      method: 'POST',
+      body: JSON.stringify({ AccessKey: accessKey }),
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    },
+  );
+  return response.json();
+};