feat(app-headless-cms): export groups and models styling (#3628)

packages/app-headless-cms/src/admin/views/contentModels/importing/ImportContentModelsDialog.tsx

@@ -7,6 +7,7 @@ import { ImportButton } from "./components/ImportButton";
 import { FileUpload } from "./components/FileUpload";
 import { Errors } from "./components/Errors";
 import { DataList } from "./components/DataList";
+import { DataListInstructions } from "./components/Model/DataListInstructions";
 import { ImportContextProvider } from "~/admin/views/contentModels/importing/ImportContext";
 
 const t = i18n.ns("app-headless-cms/admin/views/content-models/import-content-models-dialog");
@@ -45,6 +46,7 @@ export const ImportContentModelsDialog: React.VFC<ImportContentModelsDialogProps
                         <UID.DialogTitle>{t`Import Content Models`}</UID.DialogTitle>
                         <UID.DialogContent>
                             <FileUpload />
+                            {validated && <DataListInstructions />}
                             <Errors errors={errors} />
                             <DataList />
                         </UID.DialogContent>

packages/app-headless-cms/src/admin/views/contentModels/importing/components/FileUpload.tsx

@@ -8,7 +8,8 @@ const Container = styled("div")({
     width: "100%",
     margin: "0 auto",
     backgroundColor: "var(--mdc-theme-background)",
-    border: "1px dashed var(--mdc-theme-on-background)"
+    border: "1px dashed var(--mdc-theme-on-background)",
+    cursor: "pointer"
 });
 
 const Text = styled("p")({
@@ -52,7 +53,7 @@ export const FileUpload: React.VFC = () => {
                 return (
                     <>
                         <Container onClick={() => browseFiles()} {...getDropZoneProps()}>
-                            <Text>{fileName || "Drop file here."}</Text>
+                            <Text>{fileName || "Drop a file here, or click to select one."}</Text>
                         </Container>
                     </>
                 );

packages/app-headless-cms/src/admin/views/contentModels/importing/components/Model/DataListInstructions.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import styled from "@emotion/styled";
+
+const Instructions = styled("div")({
+    fontSize: "0.8rem",
+    margin: "10px 0"
+});
+
+export const DataListInstructions: React.VFC = () => {
+    return (
+        <Instructions>
+            <h4>Instructions</h4>
+            <p>
+                To learn how to use the import functionality, please visit{" "}
+                <a href="https://www.webiny.com/docs/user-guides/headless-cms/advanced/import-export-content-models">
+                    this article
+                </a>
+                .
+            </p>
+        </Instructions>
+    );
+};

packages/app-headless-cms/src/admin/views/contentModels/importing/components/Model/DataListModelItem.tsx

@@ -8,9 +8,12 @@ import { ToggleModelCb } from "~/admin/views/contentModels/importing/ImportConte
 const ContainerBase = styled("div")(() => {
     return {
         width: "100%",
-        padding: "2px 5px 0 5px",
+        padding: "0px 5px 15px 5px",
         margin: "0",
-        boxSizing: "border-box"
+        boxSizing: "border-box",
+        "&:last-child": {
+            paddingBottom: "2px"
+        }
     };
 });
 const ContainerCreate = styled(ContainerBase)(() => {
@@ -32,7 +35,8 @@ const ModelContainer = styled("div")({
     display: "flex",
     width: "100%",
     flexDirection: "row",
-    verticalAlign: "middle"
+    alignItems: "center",
+    justifyContent: "space-between"
 });
 const Name = styled("h4")({
     fontSize: "12px",
@@ -54,7 +58,10 @@ const Button = styled("button")({
     lineHeight: "12px",
     cursor: "pointer",
     outline: "0 none",
-    backgroundColor: "var(--mdc-theme-background)"
+    backgroundColor: "var(--mdc-theme-background)",
+    "&.selected": {
+        border: "1px solid var(--mdc-theme-secondary)"
+    }
 });
 
 const ImportedText = styled("div")({
@@ -92,8 +99,8 @@ const Checkbox: React.VFC<CheckboxProps> = ({ model, toggle, selected }) => {
     }
     return (
         <CheckboxContainer>
-            <Button onClick={onClick}>
-                {selected ? "Exclude from import" : "Include in import"}
+            <Button onClick={onClick} className={selected ? "selected" : ""}>
+                {selected ? "Model will be imported" : "Model will be skipped"}
             </Button>
         </CheckboxContainer>
     );
@@ -126,18 +133,20 @@ export const DataListModelItem: React.VFC<Props> = ({ model, toggle, selected })
     return (
         <Container model={model}>
             <ModelContainer>
-                <Name>{model.name || model.id}</Name>
+                <div>
+                    <Name>{model.name || model.id}</Name>
+                    {model.error ? (
+                        <DataListModelItemError error={model.error} />
+                    ) : (
+                        <DataListModelItemInfo model={model} />
+                    )}
+                </div>
                 {model.imported ? (
                     <Imported />
                 ) : (
                     <Checkbox model={model} toggle={toggle} selected={selected} />
                 )}
             </ModelContainer>
-            {model.error ? (
-                <DataListModelItemError error={model.error} />
-            ) : (
-                <DataListModelItemInfo model={model} />
-            )}
         </Container>
     );
 };

packages/app-headless-cms/src/admin/views/contentModels/importing/components/Model/DataListModelItemInfo.tsx

@@ -18,7 +18,7 @@ const getText = (action?: string | null) => {
     if (action === "create") {
         return `Model will be created.`;
     } else if (action === "update") {
-        return `Model will be updated`;
+        return `Model will be updated.`;
     } else if (action === "code") {
         return "Model cannot be updated because it was created via code.";
     }