From aae283b5bdb4cd9bf764e5bea7a816abb9af457c Mon Sep 17 00:00:00 2001
From: MiraGeowerkstatt <mira.bleuler@geowerkstatt.ch>
Date: Thu, 3 Oct 2024 15:54:13 +0200
Subject: [PATCH 1/2] Fix style of name segment

---
 .../cypress/e2e/detailPage/location.cy.js     |  4 +-
 .../src/pages/detail/detailPageContent.jsx    |  6 +-
 .../detail/form/location/nameSegment.tsx      | 99 +++++++------------
 3 files changed, 44 insertions(+), 65 deletions(-)

diff --git a/src/client/cypress/e2e/detailPage/location.cy.js b/src/client/cypress/e2e/detailPage/location.cy.js
index 24d57556f..7ce901c1c 100644
--- a/src/client/cypress/e2e/detailPage/location.cy.js
+++ b/src/client/cypress/e2e/detailPage/location.cy.js
@@ -38,10 +38,10 @@ describe("Tests for 'Location' edit page.", () => {
     createBorehole({ "extended.original_name": "PHOTOSQUIRREL" }).as("borehole_id");
     cy.get("@borehole_id").then(id => {
       goToRouteAndAcceptTerms(`/${id}`);
-      cy.get('[data-cy="original-name"]').within(() => {
+      cy.get('[data-cy="original_name-formInput"]').within(() => {
         cy.get("input").as("originalNameInput");
       });
-      cy.get('[data-cy="alternate-name"]').within(() => {
+      cy.get('[data-cy="alternate_name-formInput"]').within(() => {
         cy.get("input").as("alternateNameInput");
       });
 
diff --git a/src/client/src/pages/detail/detailPageContent.jsx b/src/client/src/pages/detail/detailPageContent.jsx
index c0543ca80..e4f00b4fe 100644
--- a/src/client/src/pages/detail/detailPageContent.jsx
+++ b/src/client/src/pages/detail/detailPageContent.jsx
@@ -30,7 +30,6 @@ class DetailPageContent extends React.Component {
 
   constructor(props) {
     super(props);
-    this.checkattribute = false;
     this.updateAttributeDelay = {};
     this.state = {
       tab: 0,
@@ -286,7 +285,10 @@ class DetailPageContent extends React.Component {
                         setState={this.setStateBound}
                         updateBorehole={this.props.updateBorehole}
                         user={user}></IdentifierSegment>
-                      <NameSegment borehole={borehole} updateChange={this.updateChange} user={user}></NameSegment>
+                      <NameSegment
+                        borehole={borehole}
+                        updateChange={this.updateChange}
+                        editingEnabled={editingEnabled}></NameSegment>
                       <RestrictionSegment
                         borehole={borehole}
                         updateChange={this.updateChange}
diff --git a/src/client/src/pages/detail/form/location/nameSegment.tsx b/src/client/src/pages/detail/form/location/nameSegment.tsx
index f1ee9fedd..849ca9da3 100644
--- a/src/client/src/pages/detail/form/location/nameSegment.tsx
+++ b/src/client/src/pages/detail/form/location/nameSegment.tsx
@@ -1,25 +1,21 @@
 import { useEffect, useState } from "react";
-import { useTranslation } from "react-i18next";
 import { Card } from "@mui/material";
-import { Form, Input } from "semantic-ui-react";
-import { Borehole, User } from "../../../../api-lib/ReduxStateInterfaces.ts";
+import { Borehole } from "../../../../api-lib/ReduxStateInterfaces.ts";
 import { useAuth } from "../../../../auth/useBdmsAuth.tsx";
+import { FormContainer } from "../../../../components/form/form.ts";
+import { SimpleFormInput } from "../../../../components/form/simpleFormInput.tsx";
 import { FormSegmentBox } from "../../../../components/styledComponents";
 
 interface NameSegmentProps {
   borehole: Borehole;
   updateChange: (key: string, value: string) => void;
-  user: User;
+  editingEnabled: boolean;
 }
 
-const NameSegment = ({ borehole, updateChange, user }: NameSegmentProps) => {
+const NameSegment = ({ borehole, updateChange, editingEnabled }: NameSegmentProps) => {
   const [alternateName, setAlternateName] = useState("");
-  const { t } = useTranslation();
   const auth = useAuth();
 
-  const isEditable =
-    borehole?.data.role === "EDIT" && borehole?.data.lock !== null && borehole?.data.lock?.id === user?.data.id;
-
   useEffect(() => {
     setAlternateName(borehole.data.custom.alternate_name || borehole.data.extended.original_name);
   }, [borehole.data]);
@@ -27,61 +23,42 @@ const NameSegment = ({ borehole, updateChange, user }: NameSegmentProps) => {
   return (
     <Card>
       <FormSegmentBox>
-        <Form autoComplete="off" error>
-          <Form.Group widths="equal">
+        <FormContainer>
+          <FormContainer direction="row">
+            <SimpleFormInput
+              label={"alternate_name"}
+              readonly={!editingEnabled}
+              value={alternateName}
+              onUpdate={e => {
+                setAlternateName(e);
+                updateChange("custom.alternate_name", e);
+              }}
+            />
+
+            <SimpleFormInput
+              label={"project_name"}
+              value={borehole?.data?.custom.project_name || ""}
+              readonly={!editingEnabled}
+              onUpdate={e => {
+                updateChange("custom.project_name", e);
+              }}
+            />
+          </FormContainer>
+          <FormContainer direction="row">
             {!auth.anonymousModeEnabled && (
-              <Form.Field error={borehole.data.extended.original_name === ""} required>
-                <label>{t("original_name")}</label>
-                <Input
-                  data-cy="original-name"
-                  autoCapitalize="off"
-                  autoComplete="off"
-                  autoCorrect="off"
-                  onChange={e => {
-                    setAlternateName(e.target.value);
-                    updateChange("extended.original_name", e.target.value);
-                    updateChange("custom.alternate_name", e.target.value);
-                  }}
-                  spellCheck="false"
-                  value={borehole.data.extended.original_name ?? ""}
-                  readOnly={!isEditable}
-                />
-              </Form.Field>
-            )}
-            <Form.Field>
-              <label>{t("project_name")}</label>
-              <Input
-                autoCapitalize="off"
-                autoComplete="off"
-                autoCorrect="off"
-                onChange={e => {
-                  updateChange("custom.project_name", e.target.value);
+              <SimpleFormInput
+                label={"original_name"}
+                value={borehole?.data?.extended.original_name || ""}
+                readonly={!editingEnabled}
+                onUpdate={e => {
+                  setAlternateName(e);
+                  updateChange("extended.original_name", e);
+                  updateChange("custom.alternate_name", e);
                 }}
-                spellCheck="false"
-                value={borehole.data.custom.project_name ?? ""}
-                readOnly={!isEditable}
               />
-            </Form.Field>
-          </Form.Group>
-          <Form.Group widths="equal">
-            <Form.Field>
-              <label>{t("alternate_name")}</label>
-              <Input
-                data-cy="alternate-name"
-                autoCapitalize="off"
-                autoComplete="off"
-                autoCorrect="off"
-                onChange={e => {
-                  setAlternateName(e.target.value);
-                  updateChange("custom.alternate_name", e.target.value);
-                }}
-                spellCheck="false"
-                value={alternateName}
-                readOnly={!isEditable}
-              />
-            </Form.Field>
-          </Form.Group>
-        </Form>
+            )}
+          </FormContainer>
+        </FormContainer>
       </FormSegmentBox>
     </Card>
   );

From a3bd22896ac1d3533011a3e27b709b3de473de07 Mon Sep 17 00:00:00 2001
From: MiraGeowerkstatt <mira.bleuler@geowerkstatt.ch>
Date: Thu, 3 Oct 2024 17:39:09 +0200
Subject: [PATCH 2/2] Add entries to test

---
 src/client/cypress/e2e/detailPage/boreholeform.cy.js | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/client/cypress/e2e/detailPage/boreholeform.cy.js b/src/client/cypress/e2e/detailPage/boreholeform.cy.js
index 118da0f8c..875e5d316 100644
--- a/src/client/cypress/e2e/detailPage/boreholeform.cy.js
+++ b/src/client/cypress/e2e/detailPage/boreholeform.cy.js
@@ -65,6 +65,9 @@ describe("Test for the borehole form.", () => {
     sortBy("Name");
     clickOnRowWithText("Zena Rath");
 
+    evaluateInput("original_name", "Zena Rath");
+    evaluateInput("alternate_name", "Zena Rath");
+    evaluateInput("project_name", "Reactive asymmetric alliance");
     evaluateSelect("restriction", "");
     evaluateSelect("national_interest", "0"); // No
     evaluateSelect("spatial_reference_system", "20104002"); // LV03
@@ -78,6 +81,9 @@ describe("Test for the borehole form.", () => {
 
     returnToOverview();
     clickOnRowWithText("Zena Mraz");
+    evaluateInput("original_name", "Zena Mraz");
+    evaluateInput("alternate_name", "Zena Mraz");
+    evaluateInput("project_name", "Ergonomic heuristic installation");
     evaluateSelect("restriction", "");
     evaluateSelect("national_interest", "1"); // Yes
     evaluateSelect("spatial_reference_system", "20104002"); // LV03