feat(headless): add all environment aliases to info and styling

webiny · Jun 25, 2020 · c24f4c3 · c24f4c3
1 parent 0f693ad
commit c24f4c3
Showing 1 changed file with 65 additions and 45 deletions.
diff --git a/packages/app-headless-cms/src/admin/components/EnvironmentInfoDialog.tsx b/packages/app-headless-cms/src/admin/components/EnvironmentInfoDialog.tsx
@@ -1,9 +1,11 @@
-import React from "react";
+import React, { useState } from "react";
+import { useQuery } from '@apollo/react-hooks';
 import { css } from "emotion";
 import { i18n } from "@webiny/app/i18n";
 import { Dialog, DialogTitle, DialogContent } from "@webiny/ui/Dialog";
 import { CopyButton } from "@webiny/ui/Button";
 import { useSnackbar } from "@webiny/app-admin/hooks/useSnackbar";
+import { LIST_ENVIRONMENT_ALIASES } from "../views/EnvironmentAliases/graphql";
 
 export type NewContentModelDialogProps = {
     open: boolean;
@@ -21,14 +23,22 @@ const t = i18n.ns("app-headless-cms/admin/components/environment-selector-dialog
 const style = {
     narrowDialog: css({
         ".mdc-dialog__surface": {
-            width: 600,
-            minWidth: 600
+            width: 800,
+            minWidth: 800
         }
     }),
     apiUrl: css({
         display: "flex",
-        alignItems: "center",
+        alignItems: "center"
     }),
+    alias: css({
+        fontSize: "1.25rem",
+        fontWeight: "bold"
+    }),
+    aliasTitle: css({
+        textDecoration: "underline",
+        minWidth: "200px"
+    })
 };
 
 const EnvironmentInfoDialog: React.FC<NewContentModelDialogProps> = ({
@@ -39,6 +49,14 @@ const EnvironmentInfoDialog: React.FC<NewContentModelDialogProps> = ({
 }) => {
     const { showSnackbar } = useSnackbar();
     const graphqlApiUrl = process.env.REACT_APP_API_URL;
+    const [aliases, setAliases] = useState([]);
+
+    useQuery(LIST_ENVIRONMENT_ALIASES, {
+        onCompleted: data => {
+            setAliases(data.cms.environmentAliases.data.filter((elem) => elem.environment.name === name));
+        }
+    });
+
     return (
         <Dialog
             open={open}
@@ -50,47 +68,49 @@ const EnvironmentInfoDialog: React.FC<NewContentModelDialogProps> = ({
             <DialogContent>
                 <div>
                     {
-                        url ? <div>
-                                <p>GraphQL API:</p>
-                                <div className={style.apiUrl}>
-                                    <p>{process.env.REACT_APP_GRAPHQL_API_URL}</p>
-                                    <CopyButton
-                                        value={process.env.REACT_APP_GRAPHQL_API_URL}
-                                        onCopy={() =>
-                                            showSnackbar("Successfully copied!")
-                                        }
-                                    />                                    
-                                </div>
-                                <p>Content Delivery API:</p>
-                                <div className={style.apiUrl}>
-                                    <p>{`${graphqlApiUrl}${url.read}`}</p>
-                                    <CopyButton
-                                        value={`${graphqlApiUrl}${url.read}`}
-                                        onCopy={() =>
-                                            showSnackbar("Successfully copied!")
-                                        }
-                                    />                                    
-                                </div>
-                                <p>Content Preview API:</p>
-                                <div className={style.apiUrl}>
-                                    <p>{`${graphqlApiUrl}${url.preview}`}</p>
-                                    <CopyButton
-                                        value={`${graphqlApiUrl}${url.preview}`}
-                                        onCopy={() =>
-                                            showSnackbar("Successfully copied!")
-                                        }
-                                    />                                    
-                                </div>
-                                <p>Content Management API:</p>
-                                <div className={style.apiUrl}>
-                                    <p>{`${graphqlApiUrl}${url.manage}`}</p>
-                                    <CopyButton
-                                        value={`${graphqlApiUrl}${url.manage}`}
-                                        onCopy={() =>
-                                            showSnackbar("Successfully copied!")
-                                        }
-                                    />                                    
-                                </div>
+                        url && aliases.length > 0 ?
+                            <div>
+                                {
+                                    aliases.map((elem) => {
+                                        return(
+                                            <div key={elem.id}>
+                                                <p className={style.alias}>Alias: {elem.name}</p>
+                                                <div className={style.apiUrl}>
+                                                    <p className={style.aliasTitle}>GraphQL API:</p>
+                                                    <p>{process.env.REACT_APP_GRAPHQL_API_URL}</p>
+                                                    <CopyButton
+                                                        value={process.env.REACT_APP_GRAPHQL_API_URL}
+                                                        onCopy={() => showSnackbar("Successfully copied!")}
+                                                    />
+                                                </div>
+                                                <div className={style.apiUrl}>
+                                                    <p className={style.aliasTitle}>Content Delivery API:</p>
+                                                    <p>{`${graphqlApiUrl}${elem.url.read}`}</p>
+                                                    <CopyButton
+                                                        value={`${graphqlApiUrl}${elem.url.read}`}
+                                                        onCopy={() => showSnackbar("Successfully copied!")}
+                                                    />
+                                                </div>
+                                                <div className={style.apiUrl}>
+                                                    <p className={style.aliasTitle}>Content Preview API:</p>
+                                                    <p>{`${graphqlApiUrl}${elem.url.preview}`}</p>
+                                                    <CopyButton
+                                                        value={`${graphqlApiUrl}${elem.url.preview}`}
+                                                        onCopy={() => showSnackbar("Successfully copied!")}
+                                                    />
+                                                </div>
+                                                <div className={style.apiUrl}>
+                                                    <p className={style.aliasTitle}>Content Management API:</p>
+                                                    <p>{`${graphqlApiUrl}${elem.url.manage}`}</p>
+                                                    <CopyButton
+                                                        value={`${graphqlApiUrl}${elem.url.manage}`}
+                                                        onCopy={() => showSnackbar("Successfully copied!")}
+                                                    />
+                                                </div>
+                                            </div>
+                                        )
+                                    })
+                                }
                             </div>
                         :   <div>
                             {t`Loading your URL's shortly...`}