feat(app-config): expose helper functions for entryPointUriPath

.changeset/quick-shrimps-train.md

@@ -0,0 +1,20 @@
+---
+'@commercetools-frontend/application-shell': patch
+---
+
+Expose helper functions to convert `entryPointUriPath` to resource accesses and permission keys:
+
+- `entryPointUriPathToResourceAccesses`: returns a view/manage pair of resource access names based on the `entryPointUriPath`.
+- `entryPointUriPathToPermissionKeys`: returns a view/manage pair of user permission keys based on the `entryPointUriPath`.
+
+The helpers are exported from the main bundle `@commercetools-frontend/application-shell` (for client-side usage) and from a separate entry point bundle `@commercetools-frontend/application-shell/ssr` (for node/server-side usage).
+
+> The helpers are only useful for the upcoming v21 release.
+
+```js
+import { entryPointUriPathToPermissionKeys } from '@commercetools-frontend/application-shell/ssr';
+
+export const entryPointUriPath = 'avengers';
+export const PERMISSIONS = entryPointUriPathToPermissionKeys(entryPointUriPath);
+// PERMISSIONS === { View: 'ViewAvengers', Manage: 'ManageAvengers' }
+```

packages/application-shell/package.json

@@ -17,9 +17,16 @@
   "main": "dist/commercetools-frontend-application-shell.cjs.js",
   "module": "dist/commercetools-frontend-application-shell.esm.js",
   "preconstruct": {
-    "entrypoints": ["./index.ts", "./test-utils/index.ts"]
+    "entrypoints": ["./index.ts", "./ssr/index.ts", "./test-utils/index.ts"]
   },
-  "files": ["dist", "test-utils", "package.json", "LICENSE", "README.md"],
+  "files": [
+    "dist",
+    "ssr",
+    "test-utils",
+    "package.json",
+    "LICENSE",
+    "README.md"
+  ],
   "scripts": {
     "compile-css-modules": "./scripts/compile-styles.js"
   },

packages/application-shell/src/index.ts

@@ -10,6 +10,8 @@ export {
   selectUserId,
   selectProjectKeyFromUrl,
   createApolloContextForProxyForwardTo,
+  entryPointUriPathToPermissionKeys,
+  entryPointUriPathToResourceAccesses,
 } from './utils';
 export { GtmContext } from './components/gtm-booter';
 export { default as GtmUserLogoutTracker } from './components/gtm-user-logout-tracker';

packages/application-shell/src/ssr/index.ts

@@ -0,0 +1 @@
+export * from '../utils/formatters';

packages/application-shell/src/utils/formatters.spec.ts

@@ -0,0 +1,38 @@
+import { entryPointUriPathToPermissionKeys } from './formatters';
+
+describe.each`
+  entryPointUriPath | formattedResourceAccessKey
+  ${'avengers'}     | ${'Avengers'}
+  ${'the-avengers'} | ${'TheAvengers'}
+  ${'the_avengers'} | ${'The_Avengers'}
+  ${'avengers-01'}  | ${'Avengers/01'}
+  ${'avengers_01'}  | ${'Avengers_01'}
+`(
+  'formatting the entryPointUriPath "$entryPointUriPath" to a resource access key "$formattedResourceAccessKey"',
+  ({ entryPointUriPath, formattedResourceAccessKey }) => {
+    it(`should format correctly`, () => {
+      expect(entryPointUriPathToPermissionKeys(entryPointUriPath)).toEqual({
+        View: `View${formattedResourceAccessKey}`,
+        Manage: `Manage${formattedResourceAccessKey}`,
+      });
+    });
+  }
+);
+
+describe.each`
+  internalApplicationGroup | formattedResourceAccessKey
+  ${'products'}            | ${'Products'}
+  ${'developerSettings'}   | ${'DeveloperSettings'}
+`(
+  'formatting the internal applications group "$internalApplicationGroup" to a resource access key "$formattedResourceAccessKey"',
+  ({ internalApplicationGroup, formattedResourceAccessKey }) => {
+    it(`should format correctly`, () => {
+      expect(
+        entryPointUriPathToPermissionKeys(internalApplicationGroup)
+      ).toEqual({
+        View: `View${formattedResourceAccessKey}`,
+        Manage: `Manage${formattedResourceAccessKey}`,
+      });
+    });
+  }
+);

packages/application-shell/src/utils/formatters.ts

@@ -0,0 +1,57 @@
+import upperFirst from 'lodash/upperFirst';
+
+// The function converts the entryPointUriPath to resourceAccessKey by
+// removing special characters except underscore.
+// It makes the first character of the string and the next character after a special character an uppercase.
+// It replaces hyphen(-) with a forward slash(/) if the hyphen(-) is followed by a number.
+// Examples:
+// input: foo-bar result: FooBar
+// input: foo_bar result: Foo_Bar
+// input: foo-1bar result: Foo/1bar
+const formatEntryPointUriPathToResourceAccessKey = (
+  entryPointUriPath: string
+) => {
+  return (
+    entryPointUriPath
+      //Splits the string by underscore.
+      .split('_')
+      // Uppercase the first character of each word split.
+      .map((word) => upperFirst(word))
+      // Join the words by an underscore.
+      .join('_')
+      // Each word is split by a hyphen.
+      .split('-')
+      .map((word, i) => {
+        // Regex below checking if the character is numeric.
+        // If the word after the hyphen is numeric, replace the hyphen with a forward slash.
+        // If not, omit the hyphen and uppercase the first character
+        if (i > 0 && /^-?\d+$/.test(word[0])) {
+          return '/' + word;
+        }
+        return upperFirst(word);
+      })
+      .join('')
+  );
+};
+
+export const entryPointUriPathToResourceAccesses = (
+  entryPointUriPath: string
+) => {
+  const convertedEntryPointUriPath =
+    formatEntryPointUriPathToResourceAccessKey(entryPointUriPath);
+  return {
+    view: `view${convertedEntryPointUriPath}`,
+    manage: `manage${convertedEntryPointUriPath}`,
+  };
+};
+
+export const entryPointUriPathToPermissionKeys = (
+  entryPointUriPath: string
+) => {
+  const resourceAccesses =
+    entryPointUriPathToResourceAccesses(entryPointUriPath);
+  return {
+    View: upperFirst(resourceAccesses.view),
+    Manage: upperFirst(resourceAccesses.manage),
+  };
+};

packages/application-shell/src/utils/index.ts

@@ -6,3 +6,4 @@ export { default as getCorrelationId } from './get-correlation-id';
 export { default as getPreviousProjectKey } from './get-previous-project-key';
 export { default as getMcApiUrl } from './get-mc-api-url';
 export { createApolloContextForProxyForwardTo } from './apollo-context';
+export * from './formatters';

packages/application-shell/ssr/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "dist/commercetools-frontend-application-shell-ssr.cjs.js",
+  "module": "dist/commercetools-frontend-application-shell-ssr.esm.js"
+}