Add content model group selector

packages/app-headless-cms/src/admin/plugins/editor/formSettings/components/GeneralSettings.tsx

@@ -1,8 +1,15 @@
 import React from "react";
 import { Grid, Cell } from "@webiny/ui/Grid";
 import { Input } from "@webiny/ui/Input";
+import { validation } from "@webiny/validation";
+import { BindComponent } from "@webiny/form";
+import GroupSelect from "./GroupSelect";
 
-const GeneralSettings = ({ Bind }) => {
+interface GeneralSettingsProps {
+    Bind: BindComponent;
+}
+
+const GeneralSettings = ({ Bind }: GeneralSettingsProps) => {
     return (
         <React.Fragment>
             <Grid>
@@ -21,6 +28,11 @@ const GeneralSettings = ({ Bind }) => {
                         <Input rows={5} label={"Content model description"} />
                     </Bind>
                 </Cell>
+                <Cell span={12}>
+                    <Bind name={"group"} validators={validation.create("required")}>
+                        <GroupSelect />
+                    </Bind>
+                </Cell>
             </Grid>
         </React.Fragment>
     );

packages/app-headless-cms/src/admin/plugins/editor/formSettings/components/GroupSelect.tsx

@@ -0,0 +1,25 @@
+import React, { useMemo } from "react";
+import { Select } from "@webiny/ui/Select";
+import { FormComponentProps } from "@webiny/ui/types";
+import { LIST_MENU_CONTENT_GROUPS_MODELS } from "~/admin/viewsGraphql";
+import { useQuery } from "~/admin/hooks";
+
+export default function GroupSelect({ value, ...props }: FormComponentProps) {
+    const { data, loading } = useQuery(LIST_MENU_CONTENT_GROUPS_MODELS);
+
+    const groups = loading && !data ? [] : data.listContentModelGroups.data;
+    const options = useMemo(() => {
+        return groups.map(item => ({ value: item.id, label: item.name }));
+    }, [groups]);
+
+    const selectValue = typeof value === "string" ? value : value.id;
+
+    return (
+        <Select
+            {...props}
+            value={loading ? "" : selectValue}
+            label={"Content model group"}
+            options={options}
+        />
+    );
+}

packages/app-headless-cms/src/admin/views/components/ContentModelEditor/Context/graphql.ts

@@ -33,6 +33,10 @@ export const FIELDS_FIELDS = `
 
 export const MODEL_FIELDS = `
     name
+    group {
+        id
+        name
+    }
     description
     modelId
     savedOn

packages/app-headless-cms/src/admin/views/components/ContentModelEditor/Context/useContentModelEditorFactory.ts

@@ -1,9 +1,10 @@
 import React from "react";
 import shortid from "shortid";
+import ApolloClient from "apollo-client";
 import { get, cloneDeep, pick } from "lodash";
+import { plugins } from "@webiny/plugins";
 import { GET_CONTENT_MODEL, UPDATE_CONTENT_MODEL } from "./graphql";
 import { getFieldPosition, moveField, moveRow, deleteField } from "./functions";
-import { plugins } from "@webiny/plugins";
 
 import {
     CmsEditorFieldsLayout,
@@ -13,11 +14,11 @@ import {
     CmsEditorFieldTypePlugin,
     CmsEditorContentModel
 } from "~/types";
-import ApolloClient from "apollo-client";
+import { LIST_MENU_CONTENT_GROUPS_MODELS } from "~/admin/viewsGraphql";
 
 type PickedCmsEditorContentModel = Pick<
     CmsEditorContentModel,
-    "layout" | "fields" | "name" | "settings" | "description" | "titleFieldId"
+    "layout" | "fields" | "name" | "settings" | "description" | "titleFieldId" | "group"
 >;
 /**
  * cleanup is required because backend always expects string value in predefined values entries
@@ -121,6 +122,7 @@ export default ContentModelEditorContext => {
             },
             saveContentModel: async (data = state.data) => {
                 const modelData: PickedCmsEditorContentModel = pick(data, [
+                    "group",
                     "layout",
                     "fields",
                     "name",
@@ -133,7 +135,8 @@ export default ContentModelEditorContext => {
                     variables: {
                         modelId: data.modelId,
                         data: cleanupModelData(modelData)
-                    }
+                    },
+                    refetchQueries: [{ query: LIST_MENU_CONTENT_GROUPS_MODELS }]
                 });
 
                 setPristine(true);