fix: Align the main headings on the data model page

frontend/app-development/features/dataModelling/SchemaEditorWithToolbar/TopToolbar/SchemaSelect.module.css

@@ -1,4 +1,12 @@
+.selectContainer {
+  display: flex;
+  align-items: center;
+  gap: var(--fds-spacing-4);
+}
+
 .select {
+  display: flex;
+  flex-direction: row;
   cursor: pointer;
   min-width: 20vw;
 }

frontend/app-development/features/dataModelling/SchemaEditorWithToolbar/TopToolbar/SchemaSelect.tsx

@@ -5,7 +5,8 @@ import {
   groupMetadataOptions,
 } from '../../../../utils/metadataUtils';
 import type { MetadataOption } from '../../../../types/MetadataOption';
-import { NativeSelect } from '@digdir/designsystemet-react';
+import { Label } from '@digdir/designsystemet-react';
+import { StudioNativeSelect } from '@studio/components';
 import classes from './SchemaSelect.module.css';
 import type { DataModelMetadata } from 'app-shared/types/DataModelMetadata';
 import { useTranslation } from 'react-i18next';
@@ -30,26 +31,31 @@ export const SchemaSelect = ({
     setSelectedOption(findMetadataOptionByRelativeUrl(options, repositoryUrl));
 
   return (
-    <NativeSelect
-      aria-label={t('schema_editor.choose_model')}
-      className={classes.select}
-      disabled={disabled}
-      onChange={(e) => handleChange(e.target.value)}
-      value={selectedOption?.value.repositoryRelativeUrl}
-      size='small'
-    >
-      {optionGroups.map((group) => (
-        <optgroup label={group.label} key={group.label}>
-          {group.options.map((option) => (
-            <option
-              value={option.value.repositoryRelativeUrl}
-              key={option.value.repositoryRelativeUrl}
-            >
-              {option.label}
-            </option>
-          ))}
-        </optgroup>
-      ))}
-    </NativeSelect>
+    <div className={classes.selectContainer}>
+      <Label htmlFor={t('schema_editor.choose_model')} size='sm'>
+        Datamodell:
+      </Label>
+      <StudioNativeSelect
+        aria-label={t('schema_editor.choose_model')}
+        className={classes.select}
+        disabled={disabled}
+        onChange={(e) => handleChange(e.target.value)}
+        value={selectedOption?.value.repositoryRelativeUrl}
+        size='sm'
+      >
+        {optionGroups.map((group) => (
+          <optgroup label={group.label} key={group.label}>
+            {group.options.map((option) => (
+              <option
+                value={option.value.repositoryRelativeUrl}
+                key={option.value.repositoryRelativeUrl}
+              >
+                {option.label}
+              </option>
+            ))}
+          </optgroup>
+        ))}
+      </StudioNativeSelect>
+    </div>
   );
 };

frontend/app-development/features/dataModelling/SchemaEditorWithToolbar/TopToolbar/TopToolbar.module.css

@@ -1,27 +1,19 @@
 .toolbar {
-  align-items: center;
-  background: #fff;
-  border-bottom: 1px solid #c9c9c9;
+  height: var(--subtoolbar-height);
+  background: white;
   display: flex;
-  padding: 8px;
-}
-
-.toolbar > *,
-.toolbar > {
-  margin-right: 1rem;
-}
-
-.toolbar button[class*='selected'] {
-  color: #fff;
+  align-items: center;
+  border-bottom: 1px solid var(--fds-semantic-border-neutral-subtle);
+  padding-inline: var(--fds-spacing-6);
+  gap: var(--fds-spacing-2);
 }
 
-.toolbar button[class*='toggle'] {
-  font-size: 1em;
-  padding-top: 4px;
+.blueBackground {
+  background: var(--fds-colors-blue-100);
 }
 
-.generateButtonWrapper {
-  flex: 1;
+.modelName {
+  /*font-weight: 400;*/
 }
 
 @keyframes fadeOut {
@@ -42,14 +34,3 @@
 .statusPopover.success {
   animation: fadeOut 1.5s;
 }
-
-.toggleButtonGroupWrapper {
-  flex: 0.5;
-}
-
-.right {
-  display: flex;
-  flex: 3;
-  gap: 1rem;
-  justify-content: flex-end;
-}

frontend/app-development/features/dataModelling/SchemaEditorWithToolbar/TopToolbar/TopToolbar.tsx

@@ -3,15 +3,18 @@
 import { CreateNewWrapper } from './CreateNewWrapper';
 import { XSDUpload } from './XSDUpload';
 import { SchemaSelect } from './SchemaSelect';
 import { DeleteWrapper } from './DeleteWrapper';
 import { computeSelectedOption } from '../../../../utils/metadataUtils';
 import type { CreateDataModelMutationArgs } from '../../../../hooks/mutations/useCreateDataModelMutation';
 import { useCreateDataModelMutation } from '../../../../hooks/mutations';
 import type { MetadataOption } from '../../../../types/MetadataOption';
 import { GenerateModelsButton } from './GenerateModelsButton';
-import { usePrevious } from '@studio/components';
+import { StudioButton, StudioParagraph, usePrevious } from '@studio/components';
 import type { DataModelMetadata } from 'app-shared/types/DataModelMetadata';
 import { useTranslation } from 'react-i18next';
+import { Label, Link } from '@digdir/designsystemet-react';
+import { ArrowLeftIcon, ChevronRightIcon } from '@studio/icons';
+import cn from 'classnames';
 
 export interface TopToolbarProps {
   createNewOpen: boolean;
@@ -47,29 +50,37 @@
     setCreateNewOpen(false);
   };
 
+  const showTypeToolbar = false;
+
   return (
-    <section className={classes.toolbar} role='toolbar'>
-      <CreateNewWrapper
-        dataModels={dataModels}
-        disabled={false}
-        createNewOpen={createNewOpen}
-        setCreateNewOpen={setCreateNewOpen}
-        handleCreateSchema={handleCreateSchema}
-        createPathOption={createPathOption}
-      />
-      <XSDUpload
-        selectedOption={selectedOption}
-        uploadButtonText={t('app_data_modelling.upload_xsd')}
-      />
-      <SchemaSelect
-        dataModels={dataModels}
-        disabled={false}
-        selectedOption={selectedOption}
-        setSelectedOption={setSelectedOption}
-      />
-      <DeleteWrapper selectedOption={selectedOption} />
-      <div className={classes.right}>
-        <div className={classes.generateButtonWrapper}>
+    <section
+      className={cn(classes.toolbar, showTypeToolbar && classes.blueBackground)}
+      role='toolbar'
+    >
+      {showTypeToolbar ? (
+        <TypeControls />
+      ) : (
+        <>
+          <SchemaSelect
+            dataModels={dataModels}
+            disabled={false}
+            selectedOption={selectedOption}
+            setSelectedOption={setSelectedOption}
+          />
+          <CreateNewWrapper
+            dataModels={dataModels}
+            disabled={false}
+            createNewOpen={createNewOpen}
+            setCreateNewOpen={setCreateNewOpen}
+            handleCreateSchema={handleCreateSchema}
+            createPathOption={createPathOption}
+          />
+          <XSDUpload
+            selectedOption={selectedOption}
+            uploadButtonText={t('app_data_modelling.upload_xsd')}
+          />
+          <VerticalDivider />
+          {/*<DeleteWrapper selectedOption={selectedOption} />*/}
           {modelPath && (
             <GenerateModelsButton
               modelPath={modelPath}
@@ -78,8 +89,67 @@
               }
             />
           )}
-        </div>
-      </div>
+        </>
+      )}
     </section>
   );
 }
+
+const VerticalDivider = () => {
+  return (
+    <div
+      style={{
+        borderLeft: '1px solid lightgray',
+        height: '66.6%',
+      }}
+    />
+  );
+};
+
+const TypeControls = () => {
+  const showBreadcrumbs = true;
+
+  return (
+    <div
+      style={{
+        width: '100%',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+      }}
+    >
+      {showBreadcrumbs ? (
+        <>
+          <div
+            style={{
+              width: 'fit-content',
+              display: 'flex',
+              alignItems: 'center',
+              gap: 'var(--fds-spacing-4)',
+            }}
+          >
+            <Link>
+              Datamodell: <b>model</b>
+            </Link>
+            <ChevronRightIcon />
+            <StudioParagraph size='sm'>
+              Type: <b>name0</b>
+            </StudioParagraph>
+          </div>
+          {/*<StudioButton icon={<ArrowLeftIcon />}>Tilbake til datamodell</StudioButton>*/}
+        </>
+      ) : (
+        <>
+          <div>
+            <Label>
+              Viser type: <b>name0</b>
+            </Label>
+          </div>
+          <StudioButton icon={<ArrowLeftIcon />}>
+            Tilbake til datamodell <b>model</b>
+          </StudioButton>
+        </>
+      )}
+    </div>
+  );
+};

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

@@ -1,26 +1,30 @@
 .root {
-  --gap: var(--fds-spacing-1);
-  align-items: center;
   display: flex;
-  padding: var(--gap) 0;
-  gap: var(--gap);
+  align-items: center;
+  height: var(--subtoolbar-height);
+  gap: var(--fds-spacing-3);
+  border-bottom: 1px solid var(--fds-semantic-border-neutral-subtle);
 }
 
-.heading {
-  display: contents;
+.headingButton {
+  display: flex;
+  font: var(--fds-typography-paragraph-short-large);
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  border: 0;
 }
 
-.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);
+.headingButton:hover {
+  background-color: var(--fds-colors-blue-100);
 }
 
-.root.selected .headingButton {
-  background-color: var(--studio-treeitem-selected-background-colour);
-  border-left-color: var(--studio-treeitem-vertical-line-colour-root);
+.selected .headingButton {
+  /*background-color: var(--studio-treeitem-selected-background-colour);*/
+  background: linear-gradient(
+    to right,
+    var(--studio-treeitem-vertical-line-colour-root) 0 var(--studio-treeitem-vertical-line-width),
+    var(--studio-treeitem-selected-background-colour) var(--studio-treeitem-vertical-line-width)
+      100%
+  );
+  /*border-left-color: var(--studio-treeitem-vertical-line-colour-root);*/
 }

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

@@ -1,5 +1,4 @@
 import classes from './HeadingRow.module.css';
-import { Heading } from '@digdir/designsystemet-react';
 import { NodeIcon } from '../../NodeIcon';
 import type { ReactNode } from 'react';
 import React from 'react';
@@ -13,7 +12,12 @@
   SchemaModel,
 } from '@altinn/schema-model';
 import { useTranslation } from 'react-i18next';
-import { StudioButton, StudioDeleteButton, StudioDropdownMenu } from '@studio/components';
+import {
+  StudioButton,
+  StudioDeleteButton,
+  StudioDropdownMenu,
+  StudioHeading,
+} from '@studio/components';
 import {
   BooleanIcon,
   CombinationIcon,
@@ -26,6 +30,7 @@
 import type { TranslationKey } from '@altinn-studio/language/type';
 import { useAddProperty } from '../../../hooks/useAddProperty';
 import cn from 'classnames';
+import { ArrowLeftIcon } from '@studio/icons';
 
 export interface HeadingRowProps {
   schemaPointer?: string;
@@ -44,7 +49,7 @@
 
   return (
     <div className={cn(classes.root, isSelected && classes.selected)}>
-      <Heading level={1} className={classes.heading}>
+      <StudioHeading level={1}>
         <StudioButton
           className={classes.headingButton}
           color='second'
@@ -54,9 +59,10 @@
         >
           {title}
         </StudioButton>
-      </Heading>
+      </StudioHeading>
       {isValidParent && <AddNodeMenu schemaPointer={schemaPointer} />}
-      {!isDataModelRoot && <DeleteButton schemaPointer={schemaPointer} />}
+      <DeleteButton schemaPointer={schemaPointer} />
+      {/*{!isDataModelRoot && <BackButton />}*/}
     </div>
   );
 };
@@ -171,3 +177,13 @@
     </StudioDeleteButton>
   );
 };
+
+const BackButton = () => (
+  <div
+    style={{
+      marginInline: 'auto 16px',
+    }}
+  >
+    <StudioButton icon={<ArrowLeftIcon />}>Tilbake til datamodell</StudioButton>
+  </div>
+);