diff --git a/frontend/language/src/nb.json b/frontend/language/src/nb.json index 7555f4e24b8..657f1ea0933 100644 --- a/frontend/language/src/nb.json +++ b/frontend/language/src/nb.json @@ -48,7 +48,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, ta kontakt med oss.", - "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.", @@ -875,6 +874,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/frontend/packages/schema-editor/src/components/NoItemSelectedMessage/NoItemSelectedMessage.module.css b/frontend/packages/schema-editor/src/components/NoItemSelectedMessage/NoItemSelectedMessage.module.css index a6e33b83a40..36c85ca3df3 100644 --- a/frontend/packages/schema-editor/src/components/NoItemSelectedMessage/NoItemSelectedMessage.module.css +++ b/frontend/packages/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/NodePanel/HeadingRow/HeadingRow.module.css b/frontend/packages/schema-editor/src/components/NodePanel/HeadingRow/HeadingRow.module.css index b0c067040c8..f3ab0e42d1b 100644 --- a/frontend/packages/schema-editor/src/components/NodePanel/HeadingRow/HeadingRow.module.css +++ b/frontend/packages/schema-editor/src/components/NodePanel/HeadingRow/HeadingRow.module.css @@ -3,6 +3,7 @@ align-items: center; display: flex; padding: var(--gap) 0; + padding-inline: var(--gap); gap: var(--gap); } @@ -11,13 +12,7 @@ } .heading .headingButton { - border-bottom-left-radius: 0; - border-left-color: transparent; - border-left-style: solid; - border-left-width: var(--studio-treeitem-vertical-line-width); - border-top-left-radius: 0; - font: var(--fds-typography-paragraph-short-large); - min-height: var(--fds-sizing-12); + font: var(--fds-typography-paragraph-short-medium); } .root.selected .headingButton { diff --git a/frontend/packages/schema-editor/src/components/NodePanel/HeadingRow/HeadingRow.tsx b/frontend/packages/schema-editor/src/components/NodePanel/HeadingRow/HeadingRow.tsx index 1c4976365cd..f5c182020fd 100644 --- a/frontend/packages/schema-editor/src/components/NodePanel/HeadingRow/HeadingRow.tsx +++ b/frontend/packages/schema-editor/src/components/NodePanel/HeadingRow/HeadingRow.tsx @@ -48,6 +48,7 @@ export const HeadingRow = ({ schemaPointer }: HeadingRowProps) => { } onClick={selectNodeRoot} variant='tertiary' diff --git a/frontend/packages/schema-editor/src/components/SchemaEditor/SchemaEditor.tsx b/frontend/packages/schema-editor/src/components/SchemaEditor/SchemaEditor.tsx index 6b287d5be74..1541eab49de 100644 --- a/frontend/packages/schema-editor/src/components/SchemaEditor/SchemaEditor.tsx +++ b/frontend/packages/schema-editor/src/components/SchemaEditor/SchemaEditor.tsx @@ -14,7 +14,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(); @@ -45,11 +45,7 @@ export const SchemaEditor = () => { - + diff --git a/frontend/packages/schema-editor/src/components/SchemaInspector/ItemDataComponent.tsx b/frontend/packages/schema-editor/src/components/SchemaInspector/ItemDataComponent.tsx index e5306d7cb66..fa7caaf3fb3 100644 --- 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 && }
- setItemItemTitle((e.target as HTMLInputElement)?.value)} + size='small' + onChange={(e: ChangeEvent) => setItemItemTitle(e.target.value)} value={itemTitle} />
@@ -196,7 +197,7 @@ export function ItemDataComponent({ schemaNode }: IItemDataComponentProps) { onChange={(event: ChangeEvent) => setItemItemDescription(event.target.value) } - style={{ height: 100 }} + size='small' value={itemDescription} /> diff --git a/frontend/packages/schema-editor/src/components/SchemaInspector/ItemFieldsTab/ItemFieldsTab.tsx b/frontend/packages/schema-editor/src/components/SchemaInspector/ItemFieldsTab/ItemFieldsTab.tsx index 9576a4ca3bd..a081a0545df 100644 --- a/frontend/packages/schema-editor/src/components/SchemaInspector/ItemFieldsTab/ItemFieldsTab.tsx +++ b/frontend/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 ? ( + + ) : ( + {t('schema_editor.fields_not_available_on_type')} + ); } -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 index e272a513ecb..23e8b925563 100644 --- 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 index 67f95f091ce..7376bc77910 100644 --- 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'; @@ -20,24 +19,19 @@ export const SchemaInspector = () => { } const selectedItem: UiSchemaNode = savableModel.getNodeByUniquePointer(selectedUniquePointer); - const shouldDisplayFieldsTab = isField(selectedItem) && isObject(selectedItem); return ( - + - {t('schema_editor.properties')} - {t('schema_editor.fields')} + {t('schema_editor.properties')} + {t('schema_editor.fields')} - + - {shouldDisplayFieldsTab ? ( - - - - ) : ( - {t('app_data_modelling.fields_information')} - )} + + + ); };