fix: allow to select entities (#530) (#531)

* fix: allow to select entities

* fix: add missing dependency

* fix: combobox for related types

* change email

* fix: fix build

* fix: add package json missing script

* fix: bump version

Author: mateusz-kleszcz

admin/src/pages/HomePage/components/ControllableCombobox/index.tsx

@@ -0,0 +1,59 @@
+import { ComboboxOption } from "@strapi/design-system"
+import { Combobox } from "@strapi/design-system"
+import { useEffect, useState } from "react";
+import { FormChangeEvent } from "src/types";
+
+type ControllableComboboxProps = {
+  name: string;
+  onClear: () => void;
+  onChange: (eventOrPath: FormChangeEvent) => void;
+  options: {
+    key: string;
+    value: string;
+    label: string;
+  }[];
+  value: string | undefined;
+  disabled: boolean;
+};
+
+export const ControllableCombobox: React.FC<ControllableComboboxProps> = ({
+  name,
+  onClear,
+  onChange,
+  options,
+  value,
+  disabled,
+}) => {
+  const [textValue, setTextValue] = useState('');
+
+  const handleTextValueChange = (textValue: string) => {
+    setTextValue(textValue);
+  };
+
+  useEffect(() => {
+    if (!value) {
+      handleTextValueChange('');
+    }
+  }, [value]);
+
+  return (
+    <Combobox
+      name={name}
+      autocomplete="list"
+      onClear={onClear}
+      onChange={onChange}
+      onTextValueChange={handleTextValueChange}
+      value={value}
+      textValue={textValue}
+      options={options}
+      disabled={disabled}
+      width="100%"
+    >
+      {options.map(({ key, label, value }) => (
+        <ComboboxOption key={key} value={value}>
+          {label}
+        </ComboboxOption>
+      ))}
+    </Combobox>
+  );
+};

admin/src/pages/HomePage/components/NavigationItemForm/index.tsx

@@ -9,8 +9,6 @@ import { Grid, Modal, Toggle } from '@strapi/design-system';
 import {
   Box,
   Button,
-  Combobox,
-  ComboboxOption,
   Divider,
   MultiSelect,
   MultiSelectOption,
@@ -45,6 +43,7 @@ import {
 } from './utils/form';
 import { useSlug } from './utils/hooks';
 import { generatePreviewPath, generateUiRouterKey } from './utils/properties';
+import { ControllableCombobox } from '../ControllableCombobox';
 
 export { ContentTypeEntity, GetContentTypeEntitiesPayload } from './types';
 export { NavigationItemFormSchema } from './utils/form';
@@ -118,7 +117,9 @@ export const NavigationItemForm: React.FC<NavigationItemFormProps> = ({
         fieldValue = isNil(fieldValue) ? targetValue : fieldValue;
       }
 
-      if (isString(fieldName)) {
+      if (isObject(fieldValue)) {
+        setFormValuesItems(fieldValue);
+      } else if (isString(fieldName)) {
         setFormValueItem(fieldName, fieldValue);
       }
 
@@ -142,6 +143,18 @@ export const NavigationItemForm: React.FC<NavigationItemFormProps> = ({
     );
   };
 
+  const setFormValuesItems = (values: any) =>
+    setFormValue(
+      {
+        ...formValue,
+        additionalFields: {
+          ...formValue.additionalFields,
+        },
+        updated: true,
+        ...values
+      },
+    );
+
   const encodePayload = (values: NavigationItemFormSchema): NavigationItemFormSchema => {
     return {
       ...values,
@@ -548,7 +561,6 @@ export const NavigationItemForm: React.FC<NavigationItemFormProps> = ({
       <Modal.Body>
         <Form width="auto" height="auto" method="POST" initialValues={formValue}>
           {({ values, onChange }) => {
-            console.log('values', values);
             const internalValues =
               values.type === 'INTERNAL'
                 ? values
@@ -743,34 +755,32 @@ export const NavigationItemForm: React.FC<NavigationItemFormProps> = ({
                             : undefined
                         }
                       >
-                        <Combobox
+                        <ControllableCombobox
                           name="relatedType"
-                          autocomplete="both"
-                          onClear={() => {
-                            handleChange('relatedType', undefined, onChange);
-                            handleChange('related', undefined, onChange);
-                            if (values.autoSync) {
-                              handleChange('title', undefined, onChange);
-                            }
-                          }}
-                          onChange={(eventOrPath: FormChangeEvent) => {
-                            handleChange('relatedType', eventOrPath, onChange);
-                            handleChange('related', undefined, onChange);
-                            if (values.autoSync) {
-                              handleChange('title', undefined, onChange);
-                            }
+                          onClear={() =>
+                            handleChange(
+                              "",
+                              {
+                                related: undefined,
+                                title: undefined,
+                                relatedType: undefined,
+                              },
+                              onChange)
                           }
+                          onChange={(eventOrPath: FormChangeEvent) =>
+                            handleChange(
+                              eventOrPath,
+                              {
+                                related: undefined,
+                                title: values.autoSync ? '' : values.title,
+                                relatedType: eventOrPath,
+                              },
+                              onChange)
                           }
                           value={values.relatedType}
+                          options={configQuery.data?.contentTypes.map(contentType => ({ key: contentType.uid, value: contentType.uid, label: contentType.contentTypeName })) ?? []}
                           disabled={!configQuery.data?.contentTypes.length || !canUpdate}
-                          width="100%"
-                        >
-                          {configQuery.data?.contentTypes.map((contentType) => (
-                            <ComboboxOption key={contentType.uid} value={contentType.uid}>
-                              {contentType.contentTypeName}
-                            </ComboboxOption>
-                          ))}
-                        </Combobox>
+                        />
                       </Field>
                     </Grid.Item>
 
@@ -792,24 +802,18 @@ export const NavigationItemForm: React.FC<NavigationItemFormProps> = ({
                               : undefined
                           }
                         >
-                          <Combobox
+                          <ControllableCombobox
                             name="related"
-                            autocomplete="both"
-                            onClear={() => handleChange('related', undefined, onChange)}
+                            onClear={() =>
+                              handleChange('related', undefined, onChange)
+                            }
                             onChange={(eventOrPath: FormChangeEvent) =>
                               handleChange('related', eventOrPath, onChange)
                             }
                             value={values.related}
                             options={relatedSelectOptions}
                             disabled={isLoading || thereAreNoMoreContentTypes || !canUpdate}
-                            width="100%"
-                          >
-                            {relatedSelectOptions.map(({ key, label, value }) => (
-                              <ComboboxOption key={key} value={value}>
-                                {label}
-                              </ComboboxOption>
-                            ))}
-                          </Combobox>
+                          />
                         </Field>
                       </Grid.Item>
                     )}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "strapi-plugin-navigation",
-  "version": "3.0.8",
+  "version": "3.0.9",
   "description": "Strapi - Navigation plugin",
   "strapi": {
     "name": "navigation",