Feat/environment view

apps/future/secure-site/handler/handler.js

@@ -55,7 +55,9 @@ module.exports.handler = async event => {
     try {
         const buffer = await new Promise((resolve, reject) => {
             fs.readFile(filePath, (err, data) => {
-                if (err) return reject(err);
+                if (err) {
+                    return reject(err);
+                }
                 resolve(data);
             });
         });

packages/api-headless-cms/__tests__/mocks/contentModels.js

@@ -218,5 +218,5 @@ export default [
                 validation: []
             }
         ]
-    },
+    }
 ];

packages/api-headless-cms/__tests__/mocks/fields/refInvalidReferences.js

@@ -156,7 +156,7 @@ const mocks = {
                             }
                         ]
                     }
-                },
+                }
             ]
         }
     })

packages/app-admin/src/components/ApiInformationDialog.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import { css } from "emotion";
+import { i18n } from "@webiny/app/i18n";
+import { Dialog, DialogTitle, DialogContent } from "@webiny/ui/Dialog";
+import { getPlugins } from "@webiny/plugins";
+import { ApiInformationDialogPlugin } from "@webiny/app-admin/types";
+
+export type NewContentModelDialogProps = {
+    open: boolean;
+    onClose: () => void;
+};
+
+const t = i18n.ns("app-admin/navigation");
+
+const style = {
+    narrowDialog: css({
+        ".mdc-dialog__surface": {
+            width: 800,
+            minWidth: 800
+        }
+    })
+};
+
+const ApiInformationDialog: React.FC<NewContentModelDialogProps> = ({ open, onClose }) => {
+    const adminInfoPlugins = getPlugins<ApiInformationDialogPlugin>("admin-api-information-dialog");
+    return (
+        <Dialog
+            open={open}
+            onClose={onClose}
+            className={style.narrowDialog}
+            data-testid="environment-info-modal"
+        >
+            <DialogTitle>{t`API Information`}</DialogTitle>
+            <DialogContent>
+                {adminInfoPlugins.map(pl => (
+                    <div key={pl.name}>{pl.render()}</div>
+                ))}
+            </DialogContent>
+        </Dialog>
+    );
+};
+
+export default ApiInformationDialog;

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

@@ -1,9 +1,10 @@
-import React, { useMemo, useEffect } from "react";
+import React, { useMemo, useState, useEffect } from "react";
 import { sortBy } from "lodash";
 import { Drawer, DrawerContent, DrawerHeader } from "@webiny/ui/Drawer";
 import { List, ListItem, ListItemGraphic } from "@webiny/ui/List";
 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 { useNavigation, Menu, Item, Section } from "./components";
@@ -12,15 +13,26 @@ import { ReactComponent as MenuIcon } from "@webiny/app-admin/assets/icons/basel
 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";
 
 import { i18n } from "@webiny/app/i18n";
 const t = i18n.ns("app-admin/navigation");
 
+const style = {
+    environmentContainer: css({
+        color: "var(--mdc-theme-text-secondary-on-background)"
+    }),
+    infoContainer: css({
+        alignSelf: "center"
+    })
+};
+
 const Navigation = () => {
     const { hideMenu, menuIsShown, initSections } = useNavigation();
+    const [infoOpened, setInfoOpened] = useState(false);
 
     useEffect(initSections, []);
-
     const logo = useMemo(() => {
         const logoPlugin = getPlugin<AdminMenuLogoPlugin>("admin-menu-logo");
         if (logoPlugin) {
@@ -54,6 +66,21 @@ const Navigation = () => {
             <DrawerContent className={navContent}>{menus}</DrawerContent>
             <MenuFooter>
                 <List nonInteractive>
+                    <div
+                        className={style.infoContainer}
+                        onClick={e => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            setInfoOpened(true);
+                        }}
+                    >
+                        <ListItem ripple={false}>
+                            <ListItemGraphic>
+                                <Icon icon={<InfoIcon />} />
+                            </ListItemGraphic>
+                            {t`API information`}
+                        </ListItem>
+                    </div>
                     <a href="https://docs.webiny.com/" rel="noopener noreferrer" target="_blank">
                         <ListItem ripple={false}>
                             <ListItemGraphic>
@@ -103,6 +130,8 @@ const Navigation = () => {
                         </div>
                     </ListItem>
                 </List>
+
+                <ApiInformationDialog open={infoOpened} onClose={() => setInfoOpened(false)} />
             </MenuFooter>
         </Drawer>
     );

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

@@ -0,0 +1,58 @@
+import React from "react";
+import { ApiInformationDialogPlugin } from "@webiny/app-admin/types";
+import { useSnackbar } from "@webiny/app-admin/hooks/useSnackbar";
+import { Tooltip } from "@webiny/ui/Tooltip";
+import { Typography } from "@webiny/ui/Typography";
+import { CopyButton } from "@webiny/ui/Button";
+import { css } from "emotion";
+
+const style = {
+    apiUrl: css({
+        display: "flex",
+        alignItems: "center"
+    }),
+    api: css({
+        fontWeight: "bold",
+        minWidth: "200px"
+    })
+};
+
+const plugin: ApiInformationDialogPlugin = {
+    type: "admin-api-information-dialog",
+    name: "admin-api-information-dialog-graphql",
+    render() {
+        const { showSnackbar } = useSnackbar();
+
+        return (
+            <>
+                <div className={style.apiUrl}>
+                    <Tooltip
+                        className={style.api}
+                        content={
+                            <span>
+                                This link allows you to access content created by different
+                                application across Webiny like Page Builder or Form Builder.
+                            </span>
+                        }
+                    >
+                        <Typography use={"headline6"}>GraphQL API:</Typography>
+                    </Tooltip>
+                    <a
+                        href={process.env.REACT_APP_GRAPHQL_API_URL}
+                        rel="noopener noreferrer"
+                        target="_blank"
+                    >
+                        {process.env.REACT_APP_GRAPHQL_API_URL}
+                    </a>
+                    <CopyButton
+                        value={process.env.REACT_APP_GRAPHQL_API_URL}
+                        onCopy={() => showSnackbar("Successfully copied!")}
+                    />
+                </div>
+                <br key="graphql-break"/>
+            </>
+        );
+    }
+};
+
+export default plugin;

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

@@ -1,13 +1,17 @@
 import React from "react";
 import Hamburger from "./Hamburger";
-import { AdminHeaderLeftPlugin } from "@webiny/app-admin/types";
+import gqlApiInformation from "./gqlApiInformation";
+import { AdminHeaderLeftPlugin, ApiInformationDialogPlugin } from "@webiny/app-admin/types";
 
-const plugin: AdminHeaderLeftPlugin = {
-    name: "admin-header-main-menu-icon",
-    type: "admin-header-left",
-    render() {
-        return <Hamburger />;
-    }
-};
+const plugin = [
+    {
+        name: "admin-header-main-menu-icon",
+        type: "admin-header-left",
+        render() {
+            return <Hamburger />;
+        }
+    } as AdminHeaderLeftPlugin,
+    gqlApiInformation as ApiInformationDialogPlugin
+];
 
 export default plugin;

packages/app-admin/src/types.ts

@@ -112,3 +112,8 @@ export type AdminInstallationPlugin = Plugin & {
     secure: boolean;
     render({ onInstalled }): React.ReactNode;
 };
+
+export type ApiInformationDialogPlugin = Plugin & {
+    type: "admin-api-information-dialog";
+    render(): React.ReactNode;
+};

packages/app-headless-cms/src/admin/components/ApiUrlsDialog.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import { css } from "emotion";
+import { i18n } from "@webiny/app/i18n";
+import { Dialog, DialogTitle, DialogContent } from "@webiny/ui/Dialog";
+import HeadlessCmsApiUrls from "@webiny/app-headless-cms/admin/plugins/apiInformationDialog/HeadlessCmsApiUrls";
+
+export type ApiUrlsDialogProps = {
+    open: boolean;
+    onClose: () => void;
+    name?: string;
+    type?: string;
+};
+
+const t = i18n.ns("app-headless-cms/admin/components/environment-selector-dialog");
+
+const style = {
+    narrowDialog: css({
+        ".mdc-dialog__surface": {
+            width: 800,
+            minWidth: 800
+        }
+    })
+};
+
+const ApiUrlsDialog: React.FC<ApiUrlsDialogProps> = ({ open, onClose, name, type }) => {
+    return (
+        <Dialog
+            open={open}
+            onClose={onClose}
+            className={style.narrowDialog}
+            data-testid="environment-selector-modal"
+        >
+            <DialogTitle>{t`Environment: {name}`({ name: name })}</DialogTitle>
+            <DialogContent>
+                <HeadlessCmsApiUrls name={name} type={type} />
+            </DialogContent>
+        </Dialog>
+    );
+};
+
+export default ApiUrlsDialog;

packages/app-headless-cms/src/admin/contexts/Cms/graphql.ts

@@ -13,6 +13,11 @@ export const LIST_ENVIRONMENTS_SELECTOR_ENVIRONMENTS = gql`
                         id
                         name
                         isProduction
+                        url {
+                            manage
+                            read
+                            preview
+                        }
                     }
                 }
             }

packages/app-headless-cms/src/admin/plugins/apiInformationDialog.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { ApiInformationDialogPlugin } from "@webiny/app-admin/types";
+import HeadlessCmsApiUrls from "./apiInformationDialog/HeadlessCmsApiUrls";
+
+const plugin: ApiInformationDialogPlugin = {
+    type: "admin-api-information-dialog",
+    name: "admin-api-information-dialog-headless-cms",
+    render() {
+        return <HeadlessCmsApiUrls />;
+    }
+};
+
+export default plugin;