fix: Align the main headings on the data model page #13786

ErlingHauan · 2024-10-14T14:18:55Z

Description

Changes:

Modified CSS to make the three column headings in Datamodell sit on the same line.
Used StudioHeading for the headings.
Slight refactor of SchemaInspector, in order to place both return statements in the bottom of the component.
Removed the collapsed prop in the resizable layout that wraps around SchemaInspector, so that the width of the column is the same width, regardless if a node is selected.
Removed unused code.

Before

After

Verification

Your code builds clean without any errors or warnings
Manual testing done (required)
Relevant automated test added (if you find this hard, leave it and we'll help out)

…elected

codecov · 2024-10-15T12:39:42Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 94.57%. Comparing base (74019c5) to head (97f9054).
Report is 23 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #13786      +/-   ##
==========================================
- Coverage   94.57%   94.57%   -0.01%     
==========================================
  Files        1624     1624              
  Lines       21817    21813       -4     
  Branches     2572     2572              
==========================================
- Hits        20634    20630       -4     
+ Misses        940      939       -1     
- Partials      243      244       +1

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

TomasEng

Alt i alt fin opprydning!

Hvis vi skal følge konvensjonen for endringstitler, viser style til endringer i kodeformat. fix er nok mer passende her.

TomasEng · 2024-10-18T10:11:14Z

frontend/packages/schema-editor/src/components/NodePanel/HeadingRow/HeadingRow.module.css

-  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;
+  display: flex;
  font: var(--fds-typography-paragraph-short-large);
-  min-height: var(--fds-sizing-12);


Disse egenskapene er her for å skape en likhet mellom rotelementet og underelementene når de er valgt (se bilder). Hva skjer når du tar dette bort?

Oi, det var ikke meningen. Bra du fanget det opp!

Ser at dette må være tilstede:

display: flex; font: var(--fds-typography-paragraph-short-large); border-left-width: var(--studio-treeitem-vertical-line-width); border-top-left-radius: 0; border-bottom-left-radius: 0;

Mens det virker som om dette ikke har noen funksjon:

border-left-color: transparent; border-left-style: solid;

Bør være greit å ta vekk, eller?

Jeg tror faktisk de to linjene også må være der. Når det står border-color: transparent, er det ofte for å hindre at ting flytter på seg når konturen blir borte eller dukker opp. Her skjer det når brukeren bytter mellom valgt / ikke valgt.

Eventuelt kunne vi valgt en helt annen fremgangsmåte her, f.eks. med background med linear-gradient eller med box-shadow. Da kan vi unngå denne litt uheldige effekten av å bruke border:

TomasEng · 2024-10-18T10:17:09Z

frontend/packages/schema-editor/src/components/NodePanel/NodePanel.tsx

-        {!isDataModelRoot && <BackButton />}
-        <HeadingRow schemaPointer={schemaPointer} />
+      <HeadingRow schemaPointer={schemaPointer} />
+      {!isDataModelRoot && <BackButton />}


Jeg er usikker på om vi burde plassere <BackButton> under overskriften. Blir det semantisk riktig? Dette er jo ikke innhold som er spesifikt for akkurat denne overskriften.

TomasEng · 2024-10-18T10:25:08Z

frontend/packages/schema-editor/src/components/SchemaInspector/SchemaInspector.test.tsx

+  it('displays a message when no node is selected', () => {
+    renderSchemaInspector(mockUiSchema);
+
+    const noSelectionHeader = screen.getByRole('heading', {
+      name: textMock('schema_editor.properties'),
+    });
+    const noSelectionParagraph = screen.getByText(textMock('schema_editor.no_item_selected'));
+
+    expect(noSelectionHeader).toBeInTheDocument();
+    expect(noSelectionParagraph).toBeInTheDocument();
+  });


Fin test! Synes bare variablenavnet noSelectionHeader kan virke litt forvirrende, siden den bare sier "Egenskaper". Hva med propertiesHeader? Dette er småpirk.

TomasEng · 2024-10-18T10:39:04Z

frontend/packages/schema-editor/src/components/SchemaInspector/SchemaInspector.tsx

+        <Tabs.Content value={t('schema_editor.fields')}>
+          <Alert severity='info'>{t('app_data_modelling.fields_information')}</Alert>
+        </Tabs.Content>


Fint at du fikk plassert denne i en <Tabs.Content>! Kanskje du også kan flytte inn hele shouldDisplayFieldsTab-sjekken, siden det ikke er noen forskjell på de to <Tabs.Content>-ene?

frontend/packages/schema-editor/src/components/NodePanel/HeadingRow/HeadingRow.tsx

@@ -171,3 +177,13 @@
    </StudioDeleteButton>
  );
 };
+
+const BackButton = () => (


ErlingHauan added 4 commits October 13, 2024 12:02

Align datamodel heading and schemaInspector tabs

fc539da

Add separate heading and text content when no data model fields are s…

21258a0

…elected

Align TypesInspector heading with the other headings

a4917a2

Create border below headings for types, datamodel and properties

ac7fd59

github-actions bot added area/data-modeling Area: Related to data models - e.g. create, edit, use data models. solution/studio/designer Issues related to the Altinn Studio Designer solution. frontend labels Oct 14, 2024

ErlingHauan added team/studio-domain1 ux UX help needed labels Oct 14, 2024

ErlingHauan self-assigned this Oct 15, 2024

Merge branch 'main' into fix/css-schema-inspector

98e99b6

ErlingHauan changed the title ~~chore: Align the main headings on the data model page~~ style: Align the main headings on the data model page Oct 15, 2024

ErlingHauan added 2 commits October 16, 2024 14:34

Clean up

54d7553

Fix selected type being sunk to bottom

1b2dc95

ErlingHauan added the added-to-sprint label Oct 17, 2024

Update headings and add a test for no item selected

8687736

ErlingHauan marked this pull request as ready for review October 17, 2024 12:36

ErlingHauan removed their assignment Oct 17, 2024

TomasEng self-assigned this Oct 18, 2024

TomasEng reviewed Oct 18, 2024

View reviewed changes

TomasEng assigned ErlingHauan and unassigned TomasEng Oct 21, 2024

ErlingHauan added 3 commits October 21, 2024 14:53

Fix most PR comments

97f9054

Add label and vertical divider to toolbar

6353e90

Design decided, but not functionally implemented

e30ff38

ErlingHauan changed the title ~~style: Align the main headings on the data model page~~ fix: Align the main headings on the data model page Oct 22, 2024

github-advanced-security bot found potential problems Oct 22, 2024

View reviewed changes

frontend/packages/schema-editor/src/components/NodePanel/HeadingRow/HeadingRow.tsx

@@ -171,3 +177,13 @@

</StudioDeleteButton>

);

};

const BackButton = () => (

Check notice

Code scanning / CodeQL

Unused variable, import, function or class Note

Unused variable BackButton.

This was referenced Nov 4, 2024

feat: Create StudioBreadcrumbs component #13975

Closed

feat: Create StudioBreadcrumbs component #13976

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: Align the main headings on the data model page #13786

fix: Align the main headings on the data model page #13786

ErlingHauan commented Oct 14, 2024 •

edited

Loading

codecov bot commented Oct 15, 2024 •

edited

Loading

TomasEng left a comment

TomasEng Oct 18, 2024

ErlingHauan Oct 18, 2024

TomasEng Oct 21, 2024

TomasEng Oct 18, 2024

TomasEng Oct 18, 2024

TomasEng Oct 18, 2024

fix: Align the main headings on the data model page #13786

Are you sure you want to change the base?

fix: Align the main headings on the data model page #13786

Conversation

ErlingHauan commented Oct 14, 2024 • edited Loading

Description

Before

After

Verification

codecov bot commented Oct 15, 2024 • edited Loading

Codecov Report

TomasEng left a comment

Choose a reason for hiding this comment

TomasEng Oct 18, 2024

Choose a reason for hiding this comment

ErlingHauan Oct 18, 2024

Choose a reason for hiding this comment

TomasEng Oct 21, 2024

Choose a reason for hiding this comment

TomasEng Oct 18, 2024

Choose a reason for hiding this comment

TomasEng Oct 18, 2024

Choose a reason for hiding this comment

TomasEng Oct 18, 2024

Choose a reason for hiding this comment

ErlingHauan commented Oct 14, 2024 •

edited

Loading

codecov bot commented Oct 15, 2024 •

edited

Loading