feat: fixed admin app navigation issue (#1298)

* feat: moved community and source to plugins

* feat: plugin changes

* feat: updated code formatting

packages/app-admin/src/plugins/Menu/Navigation/index.tsx

@@ -6,13 +6,15 @@ import { IconButton } from "@webiny/ui/Button";
 import { Icon } from "@webiny/ui/Icon";
 import { css } from "emotion";
 import { getPlugin, getPlugins } from "@webiny/plugins";
-import { AdminMenuLogoPlugin, AdminMenuPlugin } from "@webiny/app-admin/types";
+import {
+    AdminMenuLogoPlugin,
+    AdminMenuPlugin,
+    AdminDrawerFooterMenuPlugin
+} from "@webiny/app-admin/types";
 import { useNavigation, Menu, Item, Section } from "./components";
 import { logoStyle, MenuFooter, MenuHeader, navContent, navHeader, subFooter } from "./Styled";
 import { ReactComponent as MenuIcon } from "@webiny/app-admin/assets/icons/baseline-menu-24px.svg";
 import { ReactComponent as DocsIcon } from "@webiny/app-admin/assets/icons/icon-documentation.svg";
-import { ReactComponent as CommunityIcon } from "@webiny/app-admin/assets/icons/icon-community.svg";
-import { ReactComponent as GithubIcon } from "@webiny/app-admin/assets/icons/github-brands.svg";
 import { ReactComponent as InfoIcon } from "@webiny/app-admin/assets/icons/info.svg";
 import ApiInformationDialog from "@webiny/app-admin/components/ApiInformationDialog";
 
@@ -55,6 +57,14 @@ const Navigation = () => {
             );
         });
 
+    const footerMenus = [];
+    const footerMenuPlugins = getPlugins<AdminDrawerFooterMenuPlugin>("admin-drawer-footer-menu");
+
+    footerMenuPlugins &&
+        footerMenuPlugins.forEach(plugin => {
+            footerMenus.push(<React.Fragment key={plugin.name}>{plugin.render()}</React.Fragment>);
+        });
+
     return (
         <Drawer modal open={menuIsShown()} onClose={hideMenu}>
             <DrawerHeader className={navHeader}>
@@ -89,30 +99,7 @@ const Navigation = () => {
                             {t`Documentation`}
                         </ListItem>
                     </a>
-                    <a
-                        href="https://community.webiny.com/"
-                        rel="noopener noreferrer"
-                        target="_blank"
-                    >
-                        <ListItem ripple={false}>
-                            <ListItemGraphic>
-                                <Icon icon={<CommunityIcon />} />
-                            </ListItemGraphic>
-                            {t`Community`}
-                        </ListItem>
-                    </a>
-                    <a
-                        href="https://github.com/webiny/webiny-js"
-                        rel="noopener noreferrer"
-                        target="_blank"
-                    >
-                        <ListItem ripple={false}>
-                            <ListItemGraphic>
-                                <Icon icon={<GithubIcon />} />
-                            </ListItemGraphic>
-                            {t`Source`}
-                        </ListItem>
-                    </a>
+                    {footerMenus}
                     <ListItem ripple={false} className={subFooter}>
                         <div>
                             <a

packages/app-admin/src/plugins/Menu/slack.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { AdminDrawerFooterMenuPlugin } from "@webiny/app-admin/types";
+import { ListItem, ListItemGraphic } from "@webiny/ui/List";
+import { Icon } from "@webiny/ui/Icon";
+import { ReactComponent as SlackIcon } from "@webiny/app-admin/assets/icons/slack-logo.svg";
+
+import { i18n } from "@webiny/app/i18n";
+const t = i18n.ns("app-admin/navigation");
+
+const plugin: AdminDrawerFooterMenuPlugin = {
+    type: "admin-drawer-footer-menu",
+    name: "admin-drawer-footer-menu-slack",
+    render() {
+        return (
+            <>
+                <a href="https://www.webiny.com/slack/" rel="noopener noreferrer" target="_blank">
+                    <ListItem ripple={false}>
+                        <ListItemGraphic>
+                            <Icon icon={<SlackIcon />} />
+                        </ListItemGraphic>
+                        {t`Slack`}
+                    </ListItem>
+                </a>
+            </>
+        );
+    }
+};
+
+export default plugin;

packages/app-admin/src/plugins/Menu/source.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { AdminDrawerFooterMenuPlugin } from "@webiny/app-admin/types";
+import { ListItem, ListItemGraphic } from "@webiny/ui/List";
+import { Icon } from "@webiny/ui/Icon";
+import { ReactComponent as GithubIcon } from "@webiny/app-admin/assets/icons/github-brands.svg";
+
+import { i18n } from "@webiny/app/i18n";
+const t = i18n.ns("app-admin/navigation");
+
+const plugin: AdminDrawerFooterMenuPlugin = {
+    type: "admin-drawer-footer-menu",
+    name: "admin-drawer-footer-menu-source",
+    render() {
+        return (
+            <>
+                <a
+                    href="https://github.com/webiny/webiny-js"
+                    rel="noopener noreferrer"
+                    target="_blank"
+                >
+                    <ListItem ripple={false}>
+                        <ListItemGraphic>
+                            <Icon icon={<GithubIcon />} />
+                        </ListItemGraphic>
+                        {t`Source`}
+                    </ListItem>
+                </a>
+            </>
+        );
+    }
+};
+
+export default plugin;

packages/app-admin/src/plugins/index.ts

@@ -19,6 +19,8 @@ import DefaultHandle from "@webiny/app-admin/plugins/UserMenu/plugins/DefaultHan
 import Help from "@webiny/app-admin/plugins/UserMenu/plugins/Help";
 import SendFeedback from "@webiny/app-admin/plugins/UserMenu/plugins/Feedback";
 import install from "@webiny/app-admin/plugins/install";
+import slack from "@webiny/app-admin/plugins/Menu/slack";
+import source from "@webiny/app-admin/plugins/Menu/source";
 
 import init from "./init";
 
@@ -40,5 +42,7 @@ export default (): PluginCollection => [
     Help,
     SendFeedback,
     install,
+    slack,
+    source,
     init
 ];

packages/app-admin/src/types.ts

@@ -27,6 +27,11 @@ export type AdminGlobalSearchPreventHotkeyPlugin = Plugin & {
     preventOpen(e: React.KeyboardEvent): boolean | void;
 };
 
+export type AdminDrawerFooterMenuPlugin = Plugin & {
+    type: "admin-drawer-footer-menu";
+    render(): React.ReactElement;
+};
+
 export type AdminMenuLogoPlugin = Plugin & {
     name: "admin-menu-logo";
     type: "admin-menu-logo";