@orangelogic/orange-dam-content-browser-sdk 2.1.16 → 2.1.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/CBSDKdemo.html +2 -2
  2. package/gab_extension/GAB.html +2 -2
  3. package/package.json +1 -1
  4. package/src/App.tsx +4 -1
  5. package/src/AppContext.ts +2 -0
  6. package/src/components/FormatDialog/FormatDialog.tsx +1 -1
  7. package/src/index.tsx +10 -0
  8. package/src/page/Authenticate/Authenticate.tsx +3 -3
  9. package/src/store/auth/auth.slice.ts +52 -51
package/CBSDKdemo.html CHANGED
@@ -6,9 +6,9 @@
6
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
7
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
8
8
 
9
- <script src="https://downloads.orangelogic.com/ContentBrowserSDK/v2.1.16/OrangeDAMContentBrowserSDK.min.js"></script>
9
+ <script src="https://downloads.orangelogic.com/ContentBrowserSDK/v2.1.18/OrangeDAMContentBrowserSDK.min.js"></script>
10
10
  <link rel="stylesheet" type="text/css"
11
- href="https://downloads.orangelogic.com/ContentBrowserSDK/v2.1.16/OrangeDAMContentBrowserSDK.min.css">
11
+ href="https://downloads.orangelogic.com/ContentBrowserSDK/v2.1.18/OrangeDAMContentBrowserSDK.min.css">
12
12
 
13
13
  <style>
14
14
  * {
package/gab_extension/GAB.html CHANGED
@@ -3,9 +3,9 @@
3
3
 
4
4
  <head>
5
5
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&amp;display=swap">
6
- <script src="https://downloads.orangelogic.com/Cortex/AssetBrowser/v2.1.16/OrangeDamAssetBrowser.min.js"></script>
6
+ <script src="https://downloads.orangelogic.com/Cortex/AssetBrowser/v2.1.18/OrangeDamAssetBrowser.min.js"></script>
7
7
  <link rel="stylesheet" type="text/css"
8
- href="https://downloads.orangelogic.com/Cortex/AssetBrowser/v2.1.16/OrangeDamAssetBrowser.min.css">
8
+ href="https://downloads.orangelogic.com/Cortex/AssetBrowser/v2.1.18/OrangeDamAssetBrowser.min.css">
9
9
  <style>
10
10
  #orangelogic-GAB-browser-wrapper {
11
11
  min-width: 382px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@orangelogic/orange-dam-content-browser-sdk",
3
- "version": "2.1.16",
3
+ "version": "2.1.18",
4
4
  "description": "OrangeDAM Content Browser SDK source code",
5
5
  "main": "index.js",
6
6
  "homepage": "/",
package/src/App.tsx CHANGED
@@ -58,6 +58,7 @@ type Props = {
58
58
  onAssetAction: AppContextType['onAssetAction'];
59
59
  onAssetSelected: AppContextType['onAssetSelected'];
60
60
  onImageSelected: AppContextType['onImageSelected'];
61
+ onConnectClicked: () => void;
61
62
  };
62
63
 
63
64
  const Container = styled.div<{ open?: boolean }>`
@@ -80,6 +81,7 @@ export const App: FC<Props> = ({
80
81
  onAssetAction,
81
82
  onAssetSelected,
82
83
  onImageSelected,
84
+ onConnectClicked,
83
85
  }) => {
84
86
  const [open, setOpen] = useState(true);
85
87
 
@@ -110,8 +112,9 @@ export const App: FC<Props> = ({
110
112
  onImageSelected,
111
113
  onError,
112
114
  onClose: handleClose,
115
+ onConnectClicked,
113
116
  }),
114
- [extraFields, handleClose, onAssetAction, onAssetSelected, onError, onImageSelected],
117
+ [extraFields, handleClose, onAssetAction, onAssetSelected, onError, onImageSelected, onConnectClicked],
115
118
  );
116
119
 
117
120
  return (
package/src/AppContext.ts CHANGED
@@ -8,6 +8,7 @@ export type AppContextType = {
8
8
  onImageSelected: (image: GetAssetLinkResponse[]) => void;
9
9
  onError: (errorMessage?: string, error?: Error) => void;
10
10
  onClose: () => void;
11
+ onConnectClicked: () => void;
11
12
  };
12
13
 
13
14
  export const AppContext = createContext<AppContextType>({
@@ -17,4 +18,5 @@ export const AppContext = createContext<AppContextType>({
17
18
  onImageSelected: () => { },
18
19
  onError: () => { },
19
20
  onClose: () => { },
21
+ onConnectClicked: () => { },
20
22
  });
package/src/components/FormatDialog/FormatDialog.tsx CHANGED
@@ -1243,7 +1243,7 @@ const FormatDialog: FC<Props> = ({
1243
1243
  {allowFavorites && (
1244
1244
  <cx-tooltip
1245
1245
  slot="header-actions"
1246
- content={isFavorite ? 'Favorite' : 'Unfavorite'}
1246
+ content={isFavorite ? 'Unfavorite' : 'Favorite'}
1247
1247
  placement="bottom"
1248
1248
  >
1249
1249
  {state.isLoadingFavorites ? (
package/src/index.tsx CHANGED
@@ -50,6 +50,14 @@ type OrangeDAMContentBrowser = {
50
50
  * Callback when we make an action on the asset
51
51
  */
52
52
  onAssetAction?: AppContextType['onAssetAction'];
53
+ /*
54
+ * Callback when the user clicks Connect button
55
+ * Currently, it is used only for Canva integration
56
+ * because Canva blocks the CBSDK from opening new tab
57
+ * without using its predefined method.
58
+ * https://www.canva.dev/docs/apps/design-guidelines/external-links/#only-open-links-with-requestopenexternalurl
59
+ */
60
+ onConnectClicked?: () => void;
53
61
  /**
54
62
  * whether you want to select multiple assets
55
63
  */
@@ -274,6 +282,7 @@ const ContentBrowser: OrangeDAMContentBrowser = {
274
282
  allowProxy,
275
283
  allowFavorites,
276
284
  allowLogout,
285
+ onConnectClicked,
277
286
  }) => {
278
287
  let container = containerId && document.getElementById(containerId);
279
288
  if (!containerId) {
@@ -389,6 +398,7 @@ const ContentBrowser: OrangeDAMContentBrowser = {
389
398
  onAssetSelected={assetSelectedHandler}
390
399
  onImageSelected={imageSelectedHandler}
391
400
  onClose={handleClose}
401
+ onConnectClicked={onConnectClicked!}
392
402
  />
393
403
  </GlobalConfigContext.Provider>
394
404
  </Provider>,
package/src/page/Authenticate/Authenticate.tsx CHANGED
@@ -11,7 +11,7 @@ import { useDebounceState } from '@/utils/hooks';
11
11
  import type { CxChangeEvent, CxInput } from '@orangelogic-private/design-system';
12
12
 
13
13
  const AuthenticatePage = () => {
14
- const { onClose } = useContext(AppContext);
14
+ const { onClose, onConnectClicked } = useContext(AppContext);
15
15
  const dispatch = useDispatch<AppDispatch>();
16
16
  const siteUrl = useSelector(siteUrlSelector);
17
17
  const authError = useSelector(authErrorSelector);
@@ -64,7 +64,7 @@ const AuthenticatePage = () => {
64
64
  const urlWithProtocol = url.indexOf('://') === -1 ? `https://${url}` : url;
65
65
  checkCorrectSiteUrl(urlWithProtocol)
66
66
  .then(() => {
67
- dispatch(oAuth({ siteUrl: urlWithProtocol }));
67
+ dispatch(oAuth({ siteUrl: urlWithProtocol, callbackFn: onConnectClicked }));
68
68
  if (session) {
69
69
  dispatch(setUseSession(session));
70
70
  }
@@ -75,7 +75,7 @@ const AuthenticatePage = () => {
75
75
  },
76
76
  )
77
77
  .finally(() => setCheckingSite(false));
78
- }, [dispatch, session, setCheckingSite, url]);
78
+ }, [dispatch, session, setCheckingSite, url, onConnectClicked]);
79
79
 
80
80
  const cancelConnect = useCallback(() => {
81
81
  setCheckingSite(false, true);
package/src/store/auth/auth.slice.ts CHANGED
@@ -179,61 +179,62 @@ export const cancelAuth = createAsyncThunk(`${AUTH_FEATURE_KEY}/oauth`, (_, { di
179
179
  }
180
180
  });
181
181
 
182
- export const oAuth = createAsyncThunk<OAuthRes, { siteUrl: string }>(
182
+ export const oAuth = createAsyncThunk<OAuthRes, { siteUrl: string, callbackFn?: () => void }>(
183
183
  `${AUTH_FEATURE_KEY}/oauth`,
184
- async ({ siteUrl }, { rejectWithValue, dispatch, getState }) => {
185
- dispatch(authSlice.actions.setSiteUrl(siteUrl));
186
- dispatch(authSlice.actions.setAuthStatus('requestLogin'));
187
-
188
- const execute = async () => {
189
- dispatch(generateNonce());
190
- const nonce = nonceSelector(getState() as RootState);
191
- const resp = await requestAuthorizeService(nonce ?? '');
192
- if (authAbortController.controller.signal.aborted) {
193
- throw Error(CANCEL_AUTH_MESSAGE);
194
- }
195
- const requestID = resp.requestID;
196
- const popupUrl = appAuthUrlSelector(getState() as RootState);
197
- dispatch(authSlice.actions.setAuthStatus('waitForAuthorise'));
198
- window.open(popupUrl, '_blank');
199
- const getAccessKeyData = await getAccessKeyService(requestID);
200
- if (getAccessKeyData.accessKey) {
201
- const tokenResp = await getAccessTokenService(getAccessKeyData.accessKey);
202
- if (tokenResp.accessToken) {
203
- return {
204
- code: GetAccessKeyResponseCode.Authorized,
205
- accessKey: getAccessKeyData.accessKey,
206
- accessToken: tokenResp.accessToken,
207
- siteUrl,
208
- };
209
- } else {
210
- return {
211
- code: GetAccessKeyResponseCode.NotAuthorized,
212
- message: 'Failed to get access token',
213
- } as GetAccessKeyRes;
214
- }
215
- }
216
- return getAccessKeyData;
217
- };
218
-
219
- let getOAuthResult: Awaited<ReturnType<typeof execute>>;
220
- try {
221
- getOAuthResult = await execute();
222
- if (getOAuthResult.code !== GetAccessKeyResponseCode.Authorized) {
223
- return rejectWithValue((getOAuthResult as GetAccessKeyRes).message);
184
+ async ({ siteUrl, callbackFn }, { rejectWithValue, dispatch, getState }) => {
185
+ dispatch(authSlice.actions.setSiteUrl(siteUrl));
186
+ dispatch(authSlice.actions.setAuthStatus('requestLogin'));
187
+
188
+ const execute = async () => {
189
+ dispatch(generateNonce());
190
+ const nonce = nonceSelector(getState() as RootState);
191
+ const resp = await requestAuthorizeService(nonce ?? '');
192
+ if (authAbortController.controller.signal.aborted) {
193
+ throw Error(CANCEL_AUTH_MESSAGE);
194
+ }
195
+ const requestID = resp.requestID;
196
+ const popupUrl = appAuthUrlSelector(getState() as RootState);
197
+ dispatch(authSlice.actions.setAuthStatus('waitForAuthorise'));
198
+ if (callbackFn) callbackFn();
199
+ else window.open(popupUrl, '_blank');
200
+ const getAccessKeyData = await getAccessKeyService(requestID);
201
+ if (getAccessKeyData.accessKey) {
202
+ const tokenResp = await getAccessTokenService(getAccessKeyData.accessKey);
203
+ if (tokenResp.accessToken) {
204
+ return {
205
+ code: GetAccessKeyResponseCode.Authorized,
206
+ accessKey: getAccessKeyData.accessKey,
207
+ accessToken: tokenResp.accessToken,
208
+ siteUrl,
209
+ };
210
+ } else {
211
+ return {
212
+ code: GetAccessKeyResponseCode.NotAuthorized,
213
+ message: 'Failed to get access token',
214
+ } as GetAccessKeyRes;
224
215
  }
216
+ }
217
+ return getAccessKeyData;
218
+ };
219
+
220
+ let getOAuthResult: Awaited<ReturnType<typeof execute>>;
221
+ try {
222
+ getOAuthResult = await execute();
223
+ if (getOAuthResult.code !== GetAccessKeyResponseCode.Authorized) {
224
+ return rejectWithValue((getOAuthResult as GetAccessKeyRes).message);
225
+ }
225
226
 
226
- // Login successfully, reset other state
227
- dispatch(resetImportStatus());
228
- dispatch(searchApi.util.resetApiState());
229
- dispatch(assetsApi.util.resetApiState());
230
- dispatch(userApi.util.resetApiState());
227
+ // Login successfully, reset other state
228
+ dispatch(resetImportStatus());
229
+ dispatch(searchApi.util.resetApiState());
230
+ dispatch(assetsApi.util.resetApiState());
231
+ dispatch(userApi.util.resetApiState());
231
232
 
232
- return getOAuthResult as OAuthRes;
233
- } catch (exception) {
234
- return rejectWithValue((exception as Error).message);
235
- }
236
- },
233
+ return getOAuthResult as OAuthRes;
234
+ } catch (exception) {
235
+ return rejectWithValue((exception as Error).message);
236
+ }
237
+ },
237
238
  );
238
239
 
239
240
  export const initAuthInfoFromCache = createAsyncThunk(