chore: fix error state on users

packages/core/admin/admin/src/components/Filters.tsx

@@ -338,10 +338,10 @@ const List = () => {
         return true;
       }
 
-      const type = options.find(({ name }) => name === attributeName)?.type;
+      const { type, mainField } = options.find(({ name }) => name === attributeName)!;
 
       if (type === 'relation') {
-        const filterObj = filter[attributeName].id;
+        const filterObj = filter[attributeName][mainField?.name ?? 'id'];
 
         if (typeof filterObj === 'object') {
           const [operator] = Object.keys(filterObj);
@@ -379,7 +379,7 @@ const List = () => {
         }
 
         if (filter.type === 'relation') {
-          const modelFilter = filterObj.id;
+          const modelFilter = filterObj[filter.mainField?.name ?? 'id'];
 
           if (typeof modelFilter === 'object') {
             const [operator] = Object.keys(modelFilter);

packages/core/admin/admin/src/components/FormInputs/Date.tsx

@@ -8,7 +8,7 @@ import { useField } from '../Form';
 
 import { InputProps } from './types';
 
-const DateInput = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
+const DateInput = forwardRef<HTMLInputElement, InputProps>(({ type: _type, ...props }, ref) => {
   const { formatMessage } = useIntl();
   const field = useField<Date>(props.name);
   const fieldRef = useFocusInputField(props.name);

packages/core/admin/admin/src/content-manager/components/ConfigurationForm/Form.tsx

@@ -79,6 +79,7 @@ const ConfigurationForm = ({
   const initialValues: ConfigurationFormData = React.useMemo(() => {
     const transformations = pipe(
       flattenPanels,
+      replaceMainFieldWithNameOnly,
       extractMetadata,
       addTmpSpaceToLayout,
       addTmpKeysToLayout
@@ -187,6 +188,18 @@ const ConfigurationForm = ({
 const flattenPanels = (layout: EditLayout['layout']): EditLayout['layout'][number] =>
   layout.flat(1);
 
+/**
+ * @internal
+ * @description We don't need the mainField object in the layout, we only need the name.
+ */
+const replaceMainFieldWithNameOnly = (layout: EditLayout['layout'][number]) =>
+  layout.map((row) =>
+    row.map((field) => ({
+      ...field,
+      mainField: field.mainField?.name,
+    }))
+  );
+
 /**
  * @internal
  * @description We extract the metadata values from the field layout, because these are editable by the user.

packages/core/admin/admin/src/content-manager/hooks/useContentTypeSchema.ts

@@ -43,6 +43,7 @@ const useContentTypeSchema = (model?: string) => {
 
         return {
           isLoading: res.isLoading,
+          isFetching: res.isFetching,
           error: res.error,
           components: Object.keys(components).length === 0 ? undefined : components,
           contentType,

packages/core/admin/admin/src/content-manager/hooks/useDocument.ts

@@ -141,7 +141,7 @@ const useDocument: UseDocument = (args, opts) => {
     [validationSchema]
   );
 
-  const isLoading = isLoadingDocument || isFetchingDocument || isFetchingSchema || isLoadingSchema;
+  const isLoading = isLoadingDocument || isFetchingDocument || isLoadingSchema;
 
   return {
     components,

packages/core/admin/admin/src/content-manager/pages/EditView/EditViewPage.tsx

@@ -135,7 +135,7 @@ const EditViewPage = () => {
     return transformDocument(schema, components)(form);
   }, [document, isCreatingDocument, isSingleType, schema, components]);
 
-  if (isLoading) {
+  if (isLoading && !document?.documentId) {
     return <Page.Loading />;
   }
 

packages/core/admin/admin/src/content-manager/pages/EditView/components/FormInputs/Relations.tsx

@@ -59,9 +59,7 @@ interface Relation extends Contracts.Relations.RelationResult {
 
 interface RelationsFieldProps
   extends Omit<Extract<EditFieldLayout, { type: 'relation' }>, 'size' | 'hint'>,
-    Pick<InputProps, 'hint'> {
-  mainField?: string;
-}
+    Pick<InputProps, 'hint'> {}
 
 interface RelationsFormValue {
   connect?: Contracts.Relations.RelationResult[];

packages/core/admin/admin/src/content-manager/pages/EditView/components/FormInputs/tests/Relations.test.tsx

@@ -20,7 +20,7 @@ const render = ({
         relationType: 'manyToMany',
       }}
       label="relations"
-      mainField="name"
+      mainField={{ name: 'name', type: 'string' }}
       name="relations"
       type="relation"
       {...props}

packages/core/admin/admin/src/content-manager/utils/relations.ts

@@ -1,4 +1,5 @@
-import { Contracts } from '@strapi/plugin-content-manager/_internal/shared';
+import type { MainField } from './attributes';
+import type { Contracts } from '@strapi/plugin-content-manager/_internal/shared';
 
 /**
  * @internal
@@ -10,9 +11,9 @@ import { Contracts } from '@strapi/plugin-content-manager/_internal/shared';
  */
 const getRelationLabel = (
   relation: Contracts.Relations.RelationResult,
-  mainField?: string
+  mainField?: MainField
 ): string => {
-  const label = mainField && relation[mainField] ? relation[mainField] : null;
+  const label = mainField && relation[mainField.name] ? relation[mainField.name] : null;
 
   if (typeof label === 'string') {
     return label;

packages/core/admin/admin/src/pages/Settings/pages/Users/ListPage.tsx

@@ -88,6 +88,10 @@ const ListPageCE = () => {
     return null;
   }
 
+  if (isError) {
+    return <Page.Error />;
+  }
+
   return (
     <Main aria-busy={isLoading}>
       <Helmet
@@ -124,8 +128,6 @@ const ListPageCE = () => {
         }
       />
       <ContentLayout>
-        {/* TODO: Replace error message with something better */}
-        {isError && <div>TODO: An error occurred</div>}
         {!isError && (
           <>
             <DynamicTable