Fix stratigraphy add button (#1460)

src/client/cypress/e2e/editor/layerform.cy.js

@@ -1,4 +1,5 @@
 import { newEditableBorehole, returnToOverview, stopBoreholeEditing } from "../helpers/testHelpers";
+import { addItem } from "../helpers/buttonHelpers";
 
 describe("Tests for the layer form.", () => {
   it("Creates a layer and fills all dropdowns with multiple selection.", () => {
@@ -8,7 +9,7 @@ describe("Tests for the layer form.", () => {
     // navigate to stratigraphy
     cy.get('[data-cy="stratigraphy-menu-item"]').click();
     cy.get('[data-cy="lithology-menu-item"]').click();
-    cy.get('[data-cy="add-stratigraphy-button"]').click();
+    addItem("addStratigraphy");
     cy.wait("@stratigraphy_POST");
     cy.get('[data-cy="add-layer-icon"]').click();
     cy.wait("@layer");

src/client/cypress/e2e/editor/lithologicalDescription.cy.js

@@ -1,5 +1,5 @@
 import { newEditableBorehole, returnToOverview, stopBoreholeEditing } from "../helpers/testHelpers";
-import { deleteItem } from "../helpers/buttonHelpers";
+import { addItem, deleteItem } from "../helpers/buttonHelpers";
 
 describe("Tests for the lithological description column.", () => {
   it("Creates, updates and deletes lithological descriptions ", () => {
@@ -9,7 +9,7 @@ describe("Tests for the lithological description column.", () => {
     // navigate to stratigraphy
     cy.get('[data-cy="stratigraphy-menu-item"]').click();
     cy.get('[data-cy="lithology-menu-item"]').click();
-    cy.get('[data-cy="add-stratigraphy-button"]').click();
+    addItem("addStratigraphy");
     cy.wait("@stratigraphy_POST");
 
     // add three layers

src/client/cypress/e2e/filters/polygonFilter.cy.js

@@ -9,6 +9,7 @@ function drawPolygon() {
   canvas.trigger("pointerdown", { x: 550, y: 810 }).trigger("pointerup", { x: 550, y: 810 });
   canvas.trigger("pointerdown", { x: 640, y: 810 }).trigger("pointerup", { x: 640, y: 810 });
   canvas.trigger("pointerdown", { x: 450, y: 300 }).trigger("pointerup", { x: 450, y: 300 });
+  cy.wait(2000);
 }
 
 function assertIsFilteredByPolygon() {

src/client/public/locale/de/common.json

@@ -14,6 +14,7 @@
   "addInstrument": "Instrument hinzufügen",
   "addSection": "Sektion hinzufügen",
   "addSectionElement": "Aufbohrung/Überkernung hinzufügen",
+  "addStratigraphy": "Stratigraphie hinzufügen",
   "addWaterIngress": "Wasserzutritt hinzufügen",
   "admin": "Administrator",
   "afterdate": "von Datum",

src/client/public/locale/en/common.json

@@ -14,6 +14,7 @@
   "addInstrument": "Add instrument",
   "addSection": "Add section",
   "addSectionElement": "Add reaming/overcoring",
+  "addStratigraphy": "Add stratigraphy",
   "addWaterIngress": "Add water ingress",
   "admin": "Administrator",
   "afterdate": "after this date",

src/client/public/locale/fr/common.json

@@ -14,6 +14,7 @@
   "addInstrument": "Ajouter un instrument",
   "addSection": "Ajouter une section",
   "addSectionElement": "Ajouter alésage/surcarottage",
+  "addStratigraphy": "Ajouter une stratigraphie",
   "addWaterIngress": "Ajouter une venue d'eau",
   "admin": "Administrateur",
   "afterdate": "À partir de cette date",

src/client/public/locale/it/common.json

@@ -14,6 +14,7 @@
   "addInstrument": "Aggiungere uno strumento",
   "addSection": "Aggiungere una sezione",
   "addSectionElement": "Aggiungere alesatura/tecnica di overcoring",
+  "addStratigraphy": "Aggiungere una stratigrafia",
   "addWaterIngress": "Aggiungere un ingresso d'acqua",
   "admin": "Amministratore",
   "afterdate": "a partire da questa data",

src/client/src/pages/detail/form/stratigraphy/lithology/lithologyHeader/profileHeader.jsx

@@ -1,15 +1,13 @@
 import { useCallback, useEffect, useState } from "react";
-import * as Styled from "./styles.js";
-import { Button } from "semantic-ui-react";
 import { createNewStratigraphy } from "./api";
 import { fetchStratigraphyByBoreholeId } from "../../../../../../api/fetchApiV2.js";
 import ProfileHeaderList from "./profileHeaderList";
-import { useTranslation } from "react-i18next";
+import { AddButton } from "../../../../../../components/buttons/buttons";
+import { Box, Stack } from "@mui/material";
 
 const ProfileHeader = props => {
   const { boreholeID, isEditable, reloadHeader, selectedStratigraphy, setSelectedStratigraphy, setIsLoadingData } =
     props;
-  const { t } = useTranslation();
   const [profiles, setProfiles] = useState([]);
 
   const setStratigraphy = useCallback(
@@ -53,26 +51,18 @@ const ProfileHeader = props => {
   };
 
   return (
-    <Styled.Container>
-      <Styled.ButtonContainer>
-        {isEditable && (
-          <Button
-            data-cy="add-stratigraphy-button"
-            content={t("stratigraphy")}
-            icon="add"
-            onClick={createStratigraphy}
-            secondary
-            size="small"
-          />
-        )}
-
-        <ProfileHeaderList
-          profiles={profiles}
-          selectedStratigraphy={selectedStratigraphy}
-          setSelectedStratigraphy={setStratigraphy}
-        />
-      </Styled.ButtonContainer>
-    </Styled.Container>
+    <Stack direction="row">
+      <ProfileHeaderList
+        profiles={profiles}
+        selectedStratigraphy={selectedStratigraphy}
+        setSelectedStratigraphy={setStratigraphy}
+      />
+      {isEditable && (
+        <Box sx={{ marginLeft: "auto" }}>
+          <AddButton label={"addStratigraphy"} onClick={createStratigraphy} />
+        </Box>
+      )}
+    </Stack>
   );
 };