diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/AdvancedMultipleReferenceField.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/AdvancedMultipleReferenceField.tsx index b28290cdc50..1ddcbe16572 100644 --- a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/AdvancedMultipleReferenceField.tsx +++ b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/AdvancedMultipleReferenceField.tsx @@ -162,7 +162,8 @@ export const AdvancedMultipleReferenceField: React.VFC = props => { loadMore } = useReferences({ values, - perPage: 10 + perPage: 10, + requestContext }); const onRemove = useCallback( diff --git a/packages/app-headless-cms/src/admin/views/contentModels/importing/ImportContentModelsDialog.tsx b/packages/app-headless-cms/src/admin/views/contentModels/importing/ImportContentModelsDialog.tsx index 5ad1e6cfbb2..1d5d3c387ed 100644 --- a/packages/app-headless-cms/src/admin/views/contentModels/importing/ImportContentModelsDialog.tsx +++ b/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{t`Import Content Models`} + {validated && } diff --git a/packages/app-headless-cms/src/admin/views/contentModels/importing/components/FileUpload.tsx b/packages/app-headless-cms/src/admin/views/contentModels/importing/components/FileUpload.tsx index 5d06c5dd776..dddca92fa51 100644 --- a/packages/app-headless-cms/src/admin/views/contentModels/importing/components/FileUpload.tsx +++ b/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 ( <> browseFiles()} {...getDropZoneProps()}> - {fileName || "Drop file here."} + {fileName || "Drop a file here, or click to select one."} ); diff --git a/packages/app-headless-cms/src/admin/views/contentModels/importing/components/Model/DataListInstructions.tsx b/packages/app-headless-cms/src/admin/views/contentModels/importing/components/Model/DataListInstructions.tsx new file mode 100644 index 00000000000..1b98ea8f89b --- /dev/null +++ b/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

+

+ To learn how to use the import functionality, please visit{" "} + + this article + + . +

+
+ ); +}; diff --git a/packages/app-headless-cms/src/admin/views/contentModels/importing/components/Model/DataListModelItem.tsx b/packages/app-headless-cms/src/admin/views/contentModels/importing/components/Model/DataListModelItem.tsx index 72aa0e567ea..4ca7656d0f8 100644 --- a/packages/app-headless-cms/src/admin/views/contentModels/importing/components/Model/DataListModelItem.tsx +++ b/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 = ({ model, toggle, selected }) => { } return ( - ); @@ -126,18 +133,20 @@ export const DataListModelItem: React.VFC = ({ model, toggle, selected }) return ( - {model.name || model.id} +
+ {model.name || model.id} + {model.error ? ( + + ) : ( + + )} +
{model.imported ? ( ) : ( )}
- {model.error ? ( - - ) : ( - - )}
); }; diff --git a/packages/app-headless-cms/src/admin/views/contentModels/importing/components/Model/DataListModelItemInfo.tsx b/packages/app-headless-cms/src/admin/views/contentModels/importing/components/Model/DataListModelItemInfo.tsx index 74fc9913bda..da476c5224f 100644 --- a/packages/app-headless-cms/src/admin/views/contentModels/importing/components/Model/DataListModelItemInfo.tsx +++ b/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."; }