fix: replace convert-type-suggestion with cannot-convert-type-message…

… in schemaInspector (#14055)
Altinn · Nov 26, 2024 · da65376 · da65376
1 parent 2befe2b
commit da65376
Show file tree

Hide file tree

Showing 7 changed files with 52 additions and 36 deletions.
diff --git a/frontend/language/src/nb.json b/frontend/language/src/nb.json
@@ -52,7 +52,6 @@
   "app_create_release.still_building_release": "Bygger fortsatt versjon {{version}}",
   "app_create_release_errors.check_status_on_build_error": "Det har skjedd en teknisk feil, så vi får ikke oppdatert statusen på bygget ditt. Vi prøver å sjekke statusen på nytt …",
   "app_create_release_errors.fetch_release_failed": "Det har skjedd en teknisk feil som gjør at du ikke kan bygge versjoner akkurat nå. Prøv igjen senere. Hvis problemet fortsetter, <a>ta kontakt med oss</a>.",
-  "app_data_modelling.fields_information": "Hvis du vil legge til felter på dette elementet, må du konvertere det til et objekt.",
   "app_data_modelling.landing_dialog_create": "Lag en ny datamodell",
   "app_data_modelling.landing_dialog_header": "Last opp eller lag en ny datamodell for å starte",
   "app_data_modelling.landing_dialog_paragraph": "Velkommen til datamodellering! Her kan du laste opp en datamodell du har fra før, eller lage en ny modell du kan bruke i appen din.",
@@ -894,6 +893,7 @@
   "schema_editor.field": "Objekt",
   "schema_editor.field_name": "Navn på felt",
   "schema_editor.fields": "Felter",
+  "schema_editor.fields_not_available_on_type": "Denne typen har ingen felter.",
   "schema_editor.format": "Format",
   "schema_editor.format_date": "Dato",
   "schema_editor.format_date-time": "Dato og klokkeslett",

diff --git a/...kages/schema-editor/src/components/NoItemSelectedMessage/NoItemSelectedMessage.module.css b/...kages/schema-editor/src/components/NoItemSelectedMessage/NoItemSelectedMessage.module.css
@@ -1,7 +1,6 @@
 .noItem {
-  margin: 0;
+  display: flex;
+  padding-left: var(--fds-spacing-3);
   border-bottom: var(--studio-border-divider);
-  width: 100%;
-  padding-block: var(--fds-spacing-5);
-  text-align: center;
+  padding-block: var(--fds-spacing-4);
 }
diff --git a/frontend/packages/schema-editor/src/components/SchemaEditor/SchemaEditor.tsx b/frontend/packages/schema-editor/src/components/SchemaEditor/SchemaEditor.tsx
@@ -13,7 +13,7 @@ import { useUserQuery } from 'app-development/hooks/queries';
 import { useStudioEnvironmentParams } from 'app-shared/hooks/useStudioEnvironmentParams';
 
 export const SchemaEditor = () => {
-  const { schemaModel, selectedTypePointer, selectedUniquePointer } = useSchemaEditorAppContext();
+  const { schemaModel, selectedTypePointer } = useSchemaEditorAppContext();
   const { org } = useStudioEnvironmentParams();
   const { data: user } = useUserQuery();
   const moveProperty = useMoveProperty();
@@ -44,11 +44,7 @@ export const SchemaEditor = () => {
             <NodePanel schemaPointer={selectedType?.schemaPointer} />
           </div>
         </StudioResizableLayout.Element>
-        <StudioResizableLayout.Element
-          minimumSize={300}
-          collapsed={!selectedUniquePointer}
-          collapsedSize={180}
-        >
+        <StudioResizableLayout.Element minimumSize={300}>
           <aside className={classes.inspector}>
             <SchemaInspector />
           </aside>

diff --git a/frontend/packages/schema-editor/src/components/SchemaInspector/ItemDataComponent.tsx b/frontend/packages/schema-editor/src/components/SchemaInspector/ItemDataComponent.tsx
@@ -2,7 +2,7 @@ import type { ChangeEvent } from 'react';
 import React, { useState } from 'react';
 import { ReferenceSelectionComponent } from './ReferenceSelectionComponent';
 import { getCombinationOptions } from './helpers/options';
-import { Fieldset, Textfield, Switch } from '@digdir/designsystemet-react';
+import { Fieldset, Switch } from '@digdir/designsystemet-react';
 import classes from './ItemDataComponent.module.css';
 import { ItemRestrictions } from './ItemRestrictions';
 import type { CombinationKind, UiSchemaNode } from '@altinn/schema-model';
@@ -30,7 +30,7 @@ import { useTranslation } from 'react-i18next';
 import { CustomProperties } from '@altinn/schema-editor/components/SchemaInspector/CustomProperties';
 import { NameField } from './NameField';
 import { useSchemaEditorAppContext } from '@altinn/schema-editor/hooks/useSchemaEditorAppContext';
-import { StudioNativeSelect, StudioTextarea } from '@studio/components';
+import { StudioNativeSelect, StudioTextarea, StudioTextfield } from '@studio/components';
 
 export type IItemDataComponentProps = {
   schemaNode: UiSchemaNode;
@@ -178,12 +178,13 @@ export function ItemDataComponent({ schemaNode }: IItemDataComponentProps) {
       {hasCustomProps && <CustomProperties path={schemaPointer} />}
       <Fieldset legend={t('schema_editor.descriptive_fields')} className={classes.fieldSet}>
         <div>
-          <Textfield
+          <StudioTextfield
             id={titleId}
             label={t('schema_editor.title')}
             aria-label={t('schema_editor.title')}
             onBlur={onChangeTitle}
-            onChange={(e: ChangeEvent) => setItemItemTitle((e.target as HTMLInputElement)?.value)}
+            size='small'
+            onChange={(e: ChangeEvent<HTMLInputElement>) => setItemItemTitle(e.target.value)}
             value={itemTitle}
           />
         </div>
@@ -196,7 +197,7 @@ export function ItemDataComponent({ schemaNode }: IItemDataComponentProps) {
             onChange={(event: ChangeEvent<HTMLTextAreaElement>) =>
               setItemItemDescription(event.target.value)
             }
-            style={{ height: 100 }}
+            size='small'
             value={itemDescription}
           />
         </div>

diff --git a/...end/packages/schema-editor/src/components/SchemaInspector/ItemFieldsTab/ItemFieldsTab.tsx b/...end/packages/schema-editor/src/components/SchemaInspector/ItemFieldsTab/ItemFieldsTab.tsx
@@ -1,18 +1,37 @@
 import React, { useEffect } from 'react';
 import type { FieldType, FieldNode, ObjectKind } from '@altinn/schema-model';
-import { isField, isReference } from '@altinn/schema-model';
+import { isField, isObject, isReference } from '@altinn/schema-model';
 import classes from './ItemFieldsTab.module.css';
 import { usePrevious } from '@studio/components';
 import { ItemFieldsTable } from './ItemFieldsTable';
 import { useAddProperty } from '@altinn/schema-editor/hooks/useAddProperty';
 import { getLastNameField } from '@altinn/schema-editor/components/SchemaInspector/ItemFieldsTab/domUtils';
 import { AddPropertiesMenu } from '../../AddPropertiesMenu';
+import { Alert } from '@digdir/designsystemet-react';
+import type { UiSchemaNode } from '@altinn/schema-model/types';
+import { useTranslation } from 'react-i18next';
 
-export interface ItemFieldsTabProps {
-  selectedItem: FieldNode;
+export type ItemFieldsTabProps = {
+  selectedItem: UiSchemaNode;
+};
+
+export function ItemFieldsTab({ selectedItem }: ItemFieldsTabProps): React.ReactElement {
+  const { t } = useTranslation();
+
+  const shouldDisplayFieldsTabContent = isField(selectedItem) && isObject(selectedItem);
+
+  return shouldDisplayFieldsTabContent ? (
+    <ItemFieldsTabContent selectedItem={selectedItem} />
+  ) : (
+    <Alert size='small'>{t('schema_editor.fields_not_available_on_type')}</Alert>
+  );
 }
 
-export const ItemFieldsTab = ({ selectedItem }: ItemFieldsTabProps) => {
+type ItemFieldsTabContentProps = {
+  selectedItem: FieldNode;
+};
+
+const ItemFieldsTabContent = ({ selectedItem }: ItemFieldsTabContentProps) => {
   const addProperty = useAddProperty();
 
   const numberOfChildNodes = selectedItem.children.length;

diff --git a/frontend/packages/schema-editor/src/components/SchemaInspector/SchemaInspector.test.tsx b/frontend/packages/schema-editor/src/components/SchemaInspector/SchemaInspector.test.tsx
@@ -155,7 +155,7 @@ describe('SchemaInspector', () => {
     expect(saveDataModel).not.toHaveBeenCalled();
   });
 
-  it('Does not display the fields tab when the selected item is a combination', async () => {
+  it('Does not display the fields tab content when the selected item is a combination', async () => {
     const itemPointer = '#/properties/testcombination';
     const rootNode: FieldNode = {
       ...rootNodeMock,
@@ -171,7 +171,9 @@ describe('SchemaInspector', () => {
     validateTestUiSchema(testUiSchema);
     renderSchemaInspector(testUiSchema, item);
     await user.click(getFieldsTab());
-    expect(screen.getByText(textMock('app_data_modelling.fields_information'))).toBeInTheDocument();
+    expect(
+      screen.getByText(textMock('schema_editor.fields_not_available_on_type')),
+    ).toBeInTheDocument();
   });
 
   const getFieldsTab = () => screen.getByRole('tab', { name: textMock('schema_editor.fields') });

diff --git a/frontend/packages/schema-editor/src/components/SchemaInspector/SchemaInspector.tsx b/frontend/packages/schema-editor/src/components/SchemaInspector/SchemaInspector.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
-import { Alert, Tabs } from '@digdir/designsystemet-react';
+import { Tabs } from '@digdir/designsystemet-react';
 import type { UiSchemaNode } from '@altinn/schema-model';
-import { isField, isObject } from '@altinn/schema-model';
 import { ItemPropertiesTab } from './ItemPropertiesTab';
 import { ItemFieldsTab } from './ItemFieldsTab';
 import classes from './SchemaInspector.module.css';
@@ -10,6 +9,11 @@ import { useSchemaEditorAppContext } from '../../hooks/useSchemaEditorAppContext
 import { useSavableSchemaModel } from '../../hooks/useSavableSchemaModel';
 import { NoItemSelectedMessage } from '../NoItemSelectedMessage';
 
+enum SchemaInspectorTabs {
+  Properties = 'Properties',
+  Fields = 'Fields',
+}
+
 export const SchemaInspector = () => {
   const { t } = useTranslation();
   const { selectedUniquePointer } = useSchemaEditorAppContext();
@@ -20,24 +24,19 @@ export const SchemaInspector = () => {
   }
 
   const selectedItem: UiSchemaNode = savableModel.getNodeByUniquePointer(selectedUniquePointer);
-  const shouldDisplayFieldsTab = isField(selectedItem) && isObject(selectedItem);
 
   return (
-    <Tabs defaultValue={t('schema_editor.properties')} className={classes.root}>
+    <Tabs defaultValue={SchemaInspectorTabs.Properties} className={classes.root}>
       <Tabs.List>
-        <Tabs.Tab value={t('schema_editor.properties')}>{t('schema_editor.properties')}</Tabs.Tab>
-        <Tabs.Tab value={t('schema_editor.fields')}>{t('schema_editor.fields')}</Tabs.Tab>
+        <Tabs.Tab value={SchemaInspectorTabs.Properties}>{t('schema_editor.properties')}</Tabs.Tab>
+        <Tabs.Tab value={SchemaInspectorTabs.Fields}>{t('schema_editor.fields')}</Tabs.Tab>
       </Tabs.List>
-      <Tabs.Content value={t('schema_editor.properties')}>
+      <Tabs.Content value={SchemaInspectorTabs.Properties}>
         <ItemPropertiesTab selectedItem={selectedItem} />
       </Tabs.Content>
-      {shouldDisplayFieldsTab ? (
-        <Tabs.Content value={t('schema_editor.fields')}>
-          <ItemFieldsTab selectedItem={selectedItem} />
-        </Tabs.Content>
-      ) : (
-        <Alert severity='info'>{t('app_data_modelling.fields_information')}</Alert>
-      )}
+      <Tabs.Content value={SchemaInspectorTabs.Fields}>
+        <ItemFieldsTab selectedItem={selectedItem} />
+      </Tabs.Content>
     </Tabs>
   );
 };