feat(release-notes): 5.21.0 (#369)

docs/enterprise/multi-tenancy/setup.mdx

@@ -85,16 +85,25 @@ Then, add the plugin to the Lambda handler, below `securityPlugins`. See an exam
 
 <CenteredImage src={importTMApi} title="Enable Tenant Manager plugin." />
 
-Now we need to do a similar thing in the `admin` app. Open `apps/admin/code/src/plugins/index.ts`, and import the plugin:
-
-```ts
-import tenantManager from "@webiny/app-tenant-manager/plugins";
+Now we need to enable the Tenant Manager module in the Admin app. In your `apps/admin/code/src/App.tsx`, add the following:
+
+```tsx title="apps/admin/code/src/App.tsx" {4,11}
+import React from "react";
+import { Admin } from "@webiny/app-serverless-cms";
+import { Cognito } from "@webiny/app-admin-users-cognito";
+import { TenantManager } from "@webiny/app-tenant-manager";
+import "./App.scss";
+
+export const App = () => {
+  return (
+    <Admin>
+      <Cognito />
+      <TenantManager />
+    </Admin>
+  );
+};
 ```
 
-Then, register the plugin somewhere below the `tenancyPlugins`. See an example in the image below:
-
-<CenteredImage src={importTMReact} title="Enable Tenant Manager plugin." />
-
 ## 4) Set Environment Variable
 
 Open `.env` in the root of your project, and add a new ENV variable:

docs/how-to-guides/environment-variables.mdx

@@ -274,6 +274,7 @@ On the other hand, for development purposes, setting the `DEBUG` environment var
 You must redeploy your backend project application after updating the environment variables. Otherwise, the change will not be reflected.
 :::
 
+
 ### Visual Feedback
 The `DEBUG` environment variable can also be used within your frontend (React) applications.
 
@@ -297,7 +298,22 @@ process.env.REACT_APP_DEBUG = "true";
 ```
 
 
+## Enable Webiny Version Header Environment Variable
+
+The `WEBINY_ENABLE_VERSION_HEADER` environment variable is used to add the Webiny version header to all GraphQL response headers.
+By default, version headers are not set into the response headers. If you want the version headers to be included, you must set the environment variable to `true`.
+
+Only the `true` word will have effect. If you set it to anything else, `WEBINY_ENABLE_VERSION_HEADER` will be considered as `false` / not set.
+
+```bash
+WEBINY_ENABLE_VERSION_HEADER=true
+```
 
+When the environment variable is set to true it will add the `x-webiny-version` header. Which looks like this:
+
+```yaml
+x-webiny-version: 5.21.0
+```
 
 
 ## FAQ

docs/how-to-guides/webiny-applications/admin-area/change-logo.mdx

@@ -2,12 +2,12 @@
 id: change-logo
 title: Change Logo
 sidebar_label: Change Logo
-keywords: ["admin", "area", "ui", "logo"]
+keywords: ["admin", "ui", "logo"]
 description: Learn how to replace the default logo with your own.
 ---
 
 :::info Can I Use This?
-In order to follow this guide, you must use Webiny version **5.12.0** or greater.
+In order to follow this guide, you must use Webiny version **5.21.0** or greater.
 :::
 
 :::tip What you'll learn
@@ -16,41 +16,68 @@ In order to follow this guide, you must use Webiny version **5.12.0** or greater
 
 :::
 
-:::info Prerequisites
-To use the instructions presented in this guide, you need to know how to register Webiny plugins in your React applications. Please visit the [Importing Plugins](/docs/how-to-guides/importing-plugins) guide, if you're not already familiar with the process.
-:::
-
 ## Overview
 
-Changing the default logo is a very quick and straightforward process. The main Admin Area layout is built using the [UI Composer](/docs/key-topics/ui-composer/introduction). This means that you can hook into any part of the view and modify it.
+Changing the default logo is a very quick and straightforward process. The `@webiny/app-serverless-cms` packages exposes an `AddLogo` plugin specifically for this purpose.
+
+:::tip
+Your logo will be visible in two locations: in the top app bar, and in the navigation drawer.
+:::
+
+## Replace the Logo
+
+To replace the logo, go to `apps/admin/code/src/App.tsx` in your Webiny project, and apply the following code changes:
+
+```tsx title="apps/admin/code/src/App.tsx" {2,6-7,13-15}
+import React from "react";
+import { Admin, Plugins, AddLogo } from "@webiny/app-serverless-cms";
+import { Cognito } from "@webiny/app-admin-users-cognito";
+import "./App.scss";
+
+// Import your logo image
+import logoPng from "./logo.png";
+
+export const App = () => {
+  return (
+    <Admin>
+      <Cognito />
+      <Plugins>
+        <AddLogo logo={<img src={logoPng} />} />
+      </Plugins>
+    </Admin>
+  );
+};
+```
 
-The two views that you'll need to hook into are the [AdminView](https://github.com/webiny/webiny-js/blob/next/packages/app-admin/src/ui/views/AdminView.tsx) and [NavigationView](https://github.com/webiny/webiny-js/blob/next/packages/app-admin/src/ui/views/NavigationView.tsx).
+You can specify _any_ React element as a value of the `logo` prop. The system will simply make sure that it is rendered in the correct place.
+It is _your_ responsibility to style your element accordingly (apply width, padding, color, etc.).
 
-## Replace the Logo in the Header
+## Conditional Styling
 
-To replace the logo in the main header, we need to hook into the [AdminView](https://github.com/webiny/webiny-js/blob/next/packages/app-admin/src/ui/views/AdminView.tsx) class and access the header element, which contains a `setLogo` setter.
+Since there are two locations where your logo will be rendered, there's a neat way to tell _where exactly_ your component is currently being rendered.
+For this, you'll have to create a React component which will render your logo.
 
 ```tsx
-// Hook into the AdminView view
-new UIViewPlugin<AdminView>(AdminView, view => {
-  view.getHeaderElement().setLogo(<MyLogo />);
-});
-```
+// Import the "useTags" hook
+import { useTags } from "@webiny/app-serverless-cms";
 
-Note that `<MyLogo />` has to be a React element. This allows you to have your logo be as simple or as complex as necessary.
+// Import your logo image
+import logoPng from "./logo.png";
 
-## Replace the Logo in the Navigation Drawer
+const MyLogo = () => {
+  // Fetch tags from context.
+  const { location } = useTags();
 
-There is a second logo, in the navigation drawer, which looks different from the one in the AdminView header. The view class responsible for the navigation drawer is the [NavigationView](https://github.com/webiny/webiny-js/blob/next/packages/app-admin/src/ui/views/NavigationView.tsx) class.
+  // "location" is a tag with a value of "navigation", if your logo is currently being rendered inside the navigation drawer.
+  const style = location === "navigation" ? { paddingLeft: 5 } : {};
 
-```tsx
-new UIViewPlugin<NavigationView>(NavigationView, view => {
-  view.getHeaderElement().setLogo(<Logo onClick={() => view.getNavigationHook().hideMenu()} />);
-});
+  return <img src={logoPng} style={style} />;
+};
+
+// Use your new component with the AddLogo plugin.
+<AddLogo logo={<MyLogo />} />;
 ```
 
-Here we also want to close the drawer when the logo is clicked, so we use the built-in view hook to access state management operations, and invoke `hideMenu` on logo click.
+> Notice the use of the `useTags` hook. It's a utility which can come in really handy when you want to tag sections of your React app, so you components can render differently depending on their location in the component hierarchy. This topic will be covered in more details in a dedicated article.
 
-:::tip Learn more
-To learn more about how UI Composer views work, and how hooks are added into the mix, see the [Building Views](/docs/key-topics/ui-composer/building-views) article.  
-:::
+With this, your logo will have different styles applied to it, depending on where it's being rendered.