From 6e3196a9b34f3071432cdca95ad58c4529113f6f Mon Sep 17 00:00:00 2001 From: Kacper Krzywiec Date: Tue, 14 Jun 2022 09:43:26 +0200 Subject: [PATCH] docs: migrating from project-level custom apps, api reference - permissions --- .../application-config/environment-prop.js | 8 ++++ .../application-config/environment-prop.tsx | 8 ++++ .../use-is-authorized.js | 13 ++++++ .../use-is-authorized.tsx | 13 ++++++ .../constants.js | 5 +++ .../constants.ts | 5 +++ .../custom-application-config.js | 11 +++++ .../custom-application-config.ts | 12 ++++++ .../permissions.js | 8 ++++ .../permissions.tsx | 8 ++++ .../api-reference/application-config.mdx | 14 ++---- .../commercetools-frontend-permissions.mdx | 19 ++------ ...from-project-level-custom-applications.mdx | 43 ++++++------------- 13 files changed, 112 insertions(+), 55 deletions(-) create mode 100644 website/src/code-examples/api-reference/application-config/environment-prop.js create mode 100644 website/src/code-examples/api-reference/application-config/environment-prop.tsx create mode 100644 website/src/code-examples/api-reference/commercetools-frontend-permissions/use-is-authorized.js create mode 100644 website/src/code-examples/api-reference/commercetools-frontend-permissions/use-is-authorized.tsx create mode 100644 website/src/code-examples/migrating-from-project-level-custom-applications/constants.js create mode 100644 website/src/code-examples/migrating-from-project-level-custom-applications/constants.ts create mode 100644 website/src/code-examples/migrating-from-project-level-custom-applications/custom-application-config.js create mode 100644 website/src/code-examples/migrating-from-project-level-custom-applications/custom-application-config.ts create mode 100644 website/src/code-examples/migrating-from-project-level-custom-applications/permissions.js create mode 100644 website/src/code-examples/migrating-from-project-level-custom-applications/permissions.tsx diff --git a/website/src/code-examples/api-reference/application-config/environment-prop.js b/website/src/code-examples/api-reference/application-config/environment-prop.js new file mode 100644 index 0000000000..dee0642e2b --- /dev/null +++ b/website/src/code-examples/api-reference/application-config/environment-prop.js @@ -0,0 +1,8 @@ +import { useApplicationContext } from '@commercetools-frontend/application-shell-connectors'; + +const MyComponent = () => { + const applicationName = useApplicationContext( + (context) => context.environment.applicationName + ); + return
{`Welcome to the application ${applicationName}!`}
; +}; diff --git a/website/src/code-examples/api-reference/application-config/environment-prop.tsx b/website/src/code-examples/api-reference/application-config/environment-prop.tsx new file mode 100644 index 0000000000..dee0642e2b --- /dev/null +++ b/website/src/code-examples/api-reference/application-config/environment-prop.tsx @@ -0,0 +1,8 @@ +import { useApplicationContext } from '@commercetools-frontend/application-shell-connectors'; + +const MyComponent = () => { + const applicationName = useApplicationContext( + (context) => context.environment.applicationName + ); + return
{`Welcome to the application ${applicationName}!`}
; +}; diff --git a/website/src/code-examples/api-reference/commercetools-frontend-permissions/use-is-authorized.js b/website/src/code-examples/api-reference/commercetools-frontend-permissions/use-is-authorized.js new file mode 100644 index 0000000000..bdbbb309b1 --- /dev/null +++ b/website/src/code-examples/api-reference/commercetools-frontend-permissions/use-is-authorized.js @@ -0,0 +1,13 @@ +import { useIsAuthorized } from '@commercetools-frontend/permissions'; + +const CreateButton = () => { + const canManage = useIsAuthorized({ + demandedPermissions: ['ManageAvengers'], + }); + return ( + + ); +}; diff --git a/website/src/code-examples/api-reference/commercetools-frontend-permissions/use-is-authorized.tsx b/website/src/code-examples/api-reference/commercetools-frontend-permissions/use-is-authorized.tsx new file mode 100644 index 0000000000..bdbbb309b1 --- /dev/null +++ b/website/src/code-examples/api-reference/commercetools-frontend-permissions/use-is-authorized.tsx @@ -0,0 +1,13 @@ +import { useIsAuthorized } from '@commercetools-frontend/permissions'; + +const CreateButton = () => { + const canManage = useIsAuthorized({ + demandedPermissions: ['ManageAvengers'], + }); + return ( + + ); +}; diff --git a/website/src/code-examples/migrating-from-project-level-custom-applications/constants.js b/website/src/code-examples/migrating-from-project-level-custom-applications/constants.js new file mode 100644 index 0000000000..e8947c5b22 --- /dev/null +++ b/website/src/code-examples/migrating-from-project-level-custom-applications/constants.js @@ -0,0 +1,5 @@ +import { entryPointUriPathToPermissionKeys } from '@commercetools-frontend/application-shell/ssr'; + +export const entryPointUriPath = 'avengers'; + +export const PERMISSIONS = entryPointUriPathToPermissionKeys(entryPointUriPath); diff --git a/website/src/code-examples/migrating-from-project-level-custom-applications/constants.ts b/website/src/code-examples/migrating-from-project-level-custom-applications/constants.ts new file mode 100644 index 0000000000..e8947c5b22 --- /dev/null +++ b/website/src/code-examples/migrating-from-project-level-custom-applications/constants.ts @@ -0,0 +1,5 @@ +import { entryPointUriPathToPermissionKeys } from '@commercetools-frontend/application-shell/ssr'; + +export const entryPointUriPath = 'avengers'; + +export const PERMISSIONS = entryPointUriPathToPermissionKeys(entryPointUriPath); diff --git a/website/src/code-examples/migrating-from-project-level-custom-applications/custom-application-config.js b/website/src/code-examples/migrating-from-project-level-custom-applications/custom-application-config.js new file mode 100644 index 0000000000..400023aa0d --- /dev/null +++ b/website/src/code-examples/migrating-from-project-level-custom-applications/custom-application-config.js @@ -0,0 +1,11 @@ +import { entryPointUriPath, PERMISSIONS } from './src/constants'; + +const config = { + entryPointUriPath, + mainMenuLink: { + // ... + permissions: [PERMISSIONS.View], + }, + // ... +}; +export default config; diff --git a/website/src/code-examples/migrating-from-project-level-custom-applications/custom-application-config.ts b/website/src/code-examples/migrating-from-project-level-custom-applications/custom-application-config.ts new file mode 100644 index 0000000000..53beda7c54 --- /dev/null +++ b/website/src/code-examples/migrating-from-project-level-custom-applications/custom-application-config.ts @@ -0,0 +1,12 @@ +import { entryPointUriPath, PERMISSIONS } from './src/constants'; +import type { ConfigOptions } from '@commercetools-frontend/application-config'; + +const config: ConfigOptions = { + entryPointUriPath, + mainMenuLink: { + // ... + permissions: [PERMISSIONS.View], + }, + // ... +}; +export default config; diff --git a/website/src/code-examples/migrating-from-project-level-custom-applications/permissions.js b/website/src/code-examples/migrating-from-project-level-custom-applications/permissions.js new file mode 100644 index 0000000000..bf04b4c482 --- /dev/null +++ b/website/src/code-examples/migrating-from-project-level-custom-applications/permissions.js @@ -0,0 +1,8 @@ +import { useIsAuthorized } from '@commercetools-frontend/permissions'; +import { PERMISSIONS } from '../../constants'; + +const MyComponent = () => { + const canView = useIsAuthorized({ + demandedPermissions: [PERMISSIONS.View], + }); +}; diff --git a/website/src/code-examples/migrating-from-project-level-custom-applications/permissions.tsx b/website/src/code-examples/migrating-from-project-level-custom-applications/permissions.tsx new file mode 100644 index 0000000000..bf04b4c482 --- /dev/null +++ b/website/src/code-examples/migrating-from-project-level-custom-applications/permissions.tsx @@ -0,0 +1,8 @@ +import { useIsAuthorized } from '@commercetools-frontend/permissions'; +import { PERMISSIONS } from '../../constants'; + +const MyComponent = () => { + const canView = useIsAuthorized({ + demandedPermissions: [PERMISSIONS.View], + }); +}; diff --git a/website/src/content/api-reference/application-config.mdx b/website/src/content/api-reference/application-config.mdx index c7ef16702a..dd45cf9288 100644 --- a/website/src/content/api-reference/application-config.mdx +++ b/website/src/content/api-reference/application-config.mdx @@ -687,16 +687,10 @@ It is recommended to always pass the value to the ``. The `environment` prop is parsed and injected into a React Context, making it available to the entire application. To access it, use the `@commercetools-frontend/application-shell-connectors` package. -```jsx -import { useApplicationContext } from '@commercetools-frontend/application-shell-connectors'; - -const MyComponent = () => { - const applicationName = useApplicationContext( - context => context.environment.applicationName - ); - return (
{`Welcome to the application ${applicationName}!`}
); -}; -``` + + + + diff --git a/website/src/content/api-reference/commercetools-frontend-permissions.mdx b/website/src/content/api-reference/commercetools-frontend-permissions.mdx index c4cb3f1540..162263e4f3 100644 --- a/website/src/content/api-reference/commercetools-frontend-permissions.mdx +++ b/website/src/content/api-reference/commercetools-frontend-permissions.mdx @@ -36,21 +36,10 @@ A React hook that evaluates the [Custom Application requested user permissions]( ### Usage -```jsx -import { useIsAuthorized } from '@commercetools-frontend/permissions'; - -const CreateButton = () => { - const canManage = useIsAuthorized({ - demandedPermissions: ['ManageAvengers'] - }); - return ( - - ); -} -``` + + + + ### Options diff --git a/website/src/content/migrating-from-project-level-custom-applications.mdx b/website/src/content/migrating-from-project-level-custom-applications.mdx index 98fa79b6a6..5446b5428c 100644 --- a/website/src/content/migrating-from-project-level-custom-applications.mdx +++ b/website/src/content/migrating-from-project-level-custom-applications.mdx @@ -190,28 +190,19 @@ Use the `entryPointUriPathToPermissionKeys` to automatically compute the permiss -```js title="constants.js" -import { entryPointUriPathToPermissionKeys } from '@commercetools-frontend/application-shell/ssr'; - -export const entryPointUriPath = 'avengers'; - -export const PERMISSIONS = entryPointUriPathToPermissionKeys(entryPointUriPath); -``` + + + + The `PERMISSIONS` variable contains a `View` and `Manage` properties, with the values being the computed values based on the `entryPointUriPath`. Next, replace the user permissions with the `PERMISSIONS` variable. -```js highlightLines="6" -import { useIsAuthorized } from '@commercetools-frontend/permissions'; -import { PERMISSIONS } from '../../constants'; - -const MyComponent = () => { - const canView = useIsAuthorized({ - demandedPermissions: [PERMISSIONS.View], - }); -}; -``` + + + + Furthermore, replace the user permissions in the menu links `permissions` field in the Custom Application config. @@ -225,20 +216,12 @@ Furthermore, replace the user permissions in the menu links `permissions` field -Given that you have defined the `constants` variables as described above, to avoid duplicating and hardcoding the `entryPointUriPath` and user permission values you can choose to use the `.mjs` extension for the Custom Application config file, instead of `.json`. This allows you to import the variables from the `constants` file and reference them in the configuration. See [supported file extensions](/api-reference/application-config#supported-file-extensions) for more information. - -```js title="custom-application-config.mjs" -import { entryPointUriPath, PERMISSIONS } from './src/constants'; +Given that you have defined the `constants` variables as described above, to avoid duplicating and hardcoding the `entryPointUriPath` and user permission values you can choose to use the `.mjs` (or `.ts`) extension for the Custom Application config file, instead of `.json`. This allows you to import the variables from the `constants` file and reference them in the configuration. See [supported file extensions](/api-reference/application-config#supported-file-extensions) for more information. -const config = { - entryPointUriPath, - mainMenuLink: { - permissions: [PERMISSIONS.View] - }, - // ... -}; -export default config; -``` + + + +