Border color when editable (#1840)

CHANGELOG.md

@@ -14,6 +14,7 @@
 - Removed all asterisks from required form fields.
 - Updated the UI design of the tabs component.
 - Reincluded download link for codelist references in the import panel.
+- Formfield border color now depend on whether borehole editing is enabled or not.
 
 ### Fixed
 

src/client/cypress/e2e/detailPage/boreholeform.cy.js

@@ -365,6 +365,38 @@ describe("Test for the borehole form.", () => {
     });
   });
 
+  it("verifies textfield border color for editing enabled or disabled", () => {
+    createBorehole({ "extended.original_name": "AAA_EEL", "custom.alternate_name": "AAA_EEL" }).as("borehole_id");
+    cy.get("@borehole_id").then(id => {
+      goToRouteAndAcceptTerms(`/${id}/borehole`);
+      cy.get('[data-cy="topBedrockWeatheredMd-formInput"] fieldset').should(
+        "have.css",
+        "border-color",
+        "rgb(223, 228, 233)",
+      ); //#DFE4E9
+
+      cy.get('[data-cy="top_bedrock_weathered_tvd-formInput"] fieldset').should(
+        "have.css",
+        "border-color",
+        "rgb(223, 228, 233)",
+      ); // #DFE4E9
+
+      startBoreholeEditing();
+
+      cy.get('[data-cy="topBedrockWeatheredMd-formInput"] fieldset').should(
+        "have.css",
+        "border-color",
+        "rgb(89, 105, 120)",
+      ); // #596978
+
+      cy.get('[data-cy="top_bedrock_weathered_tvd-formInput"] fieldset').should(
+        "have.css",
+        "border-color",
+        "rgb(223, 228, 233)",
+      ); // #DFE4E9 is not editable and should not change color
+    });
+  });
+
   it("stops editing when going back to overview", () => {
     createBorehole({ "extended.original_name": "AAA_HIPPOPOTHAMUS", "custom.alternate_name": "AAA_HIPPOPOTHAMUS" }).as(
       "borehole_id",

src/client/src/AppTheme.ts

@@ -50,7 +50,10 @@ const themePalette: AppThemePalette = {
     activeEnd: "#E53940",
     contrastText: "#ffffff",
   },
-  boxShadow: "#DFE4E9",
+  border: {
+    light: "#DFE4E9",
+    darker: "#596978",
+  },
   background: {
     default: "#ffffff",
     lightgrey: "#F8F9FA",
@@ -88,8 +91,6 @@ const themePalette: AppThemePalette = {
       },
     },
   },
-
-  border: "#E0E2E6",
 };
 
 const themeBoxShadows: Shadows = [...defaultTheme.shadows];
@@ -416,6 +417,7 @@ export const theme = createTheme({
         root: {
           marginTop: themeSpacing(2),
           borderRadius: themeSpacing(0.5),
+          borderColor: `${themePalette.border.light} !important`,
           flex: "1",
 
           "&.readonly": {
@@ -426,6 +428,14 @@ export const theme = createTheme({
             borderColor: `${themePalette.ai.main} !important`,
             borderWidth: "3px",
           },
+
+          "& .MuiOutlinedInput-root.Mui-disabled .MuiOutlinedInput-notchedOutline": {
+            borderColor: `${themePalette.border.light} !important`,
+          },
+
+          "& .MuiInputBase-input.Mui-disabled": {
+            WebkitTextFillColor: themePalette.border.darker,
+          },
         },
       },
     },
@@ -500,14 +510,14 @@ export const theme = createTheme({
         root: {
           paddingTop: themeSpacing(3),
           paddingBottom: themeSpacing(2),
-          borderBottom: "1px solid " + themePalette.border,
+          borderBottom: "1px solid " + themePalette.border.light,
         },
       },
     },
     MuiDialogActions: {
       styleOverrides: {
         root: {
-          borderTop: "1px solid " + themePalette.border,
+          borderTop: "1px solid " + themePalette.border.light,
           padding: themeSpacing(3),
         },
       },

src/client/src/components/form/formCoordinate.tsx

@@ -6,7 +6,7 @@ import { TextField } from "@mui/material/";
 import { DetailContext } from "../../pages/detail/detailContext.tsx";
 import { boundingBox } from "../../pages/detail/form/location/coordinateSegmentConstants.ts";
 import { Direction, ReferenceSystemKey } from "../../pages/detail/form/location/coordinateSegmentInterfaces.ts";
-import { parseFloatWithThousandsSeparator } from "../legacyComponents/formUtils.ts";
+import { getFieldBorderColor, parseFloatWithThousandsSeparator } from "../legacyComponents/formUtils.ts";
 import { getFormFieldError } from "./form";
 import { NumericFormatWithThousandSeparator } from "./numericFormatWithThousandSeparator.tsx";
 
@@ -64,7 +64,10 @@ export const FormCoordinate: FC<FormCoordinateProps> = ({
     <TextField
       required={required || false}
       error={!className?.includes("ai") && !disabled && getFormFieldError(fieldName, formState.errors)}
-      sx={{ ...sx }}
+      sx={{
+        ...sx,
+        ...getFieldBorderColor(isReadOnly),
+      }}
       className={`${isReadOnly ? "readonly" : ""} ${className ?? ""}`}
       label={t(`location_${direction.toLowerCase()}_${referenceSystem}`)}
       {...register(fieldName, {

src/client/src/components/form/formInput.tsx

@@ -5,6 +5,7 @@ import { InputProps, SxProps } from "@mui/material";
 import { TextField } from "@mui/material/";
 import { isValid } from "date-fns";
 import { DetailContext } from "../../pages/detail/detailContext.tsx";
+import { getFieldBorderColor } from "../legacyComponents/formUtils.ts";
 import { FormValueType, getFormFieldError } from "./form";
 import { NumericFormatWithThousandSeparator } from "./numericFormatWithThousandSeparator.tsx";
 
@@ -65,7 +66,10 @@ export const FormInput: FC<FormInputProps> = ({
     <TextField
       required={required || false}
       error={getFormFieldError(fieldName, formState.errors)}
-      sx={{ ...sx }}
+      sx={{
+        ...sx,
+        ...getFieldBorderColor(isReadOnly),
+      }}
       className={`${isReadOnly ? "readonly" : ""} ${className ?? ""}`}
       type={type || FormValueType.Text}
       multiline={multiline || false}

src/client/src/components/form/formInputDisplayOnly.tsx

@@ -5,7 +5,7 @@ import { NumericFormatWithThousandSeparator } from "./numericFormatWithThousandS
 
 interface FormInputDisplayOnlyProps extends Omit<TextFieldProps, "value"> {
   label: string;
-  value: number | null;
+  value: number | string | null;
   withThousandSeparator?: boolean;
   disabled?: boolean;
   readOnly?: boolean;

src/client/src/components/form/formSelect.tsx

@@ -4,6 +4,7 @@ import { useTranslation } from "react-i18next";
 import { MenuItem, SxProps } from "@mui/material";
 import { TextField } from "@mui/material/";
 import { DetailContext } from "../../pages/detail/detailContext.tsx";
+import { getFieldBorderColor } from "../legacyComponents/formUtils.ts";
 import { getFormFieldError } from "./form";
 
 export interface FormSelectProps {
@@ -84,7 +85,10 @@ export const FormSelect: FC<FormSelectProps> = ({
           select
           required={required ?? false}
           error={getFormFieldError(fieldName, formState.errors)}
-          sx={{ ...sx }}
+          sx={{
+            ...sx,
+            ...getFieldBorderColor(isReadOnly),
+          }}
           className={`${isReadOnly ? "readonly" : ""} ${className ?? ""}`}
           label={t(label)}
           name={field.name}

src/client/src/components/header/headerComponent.tsx

@@ -16,7 +16,7 @@ const HeaderComponent = () => {
       direction="row"
       alignItems="center"
       sx={{
-        borderBottom: "1px solid " + theme.palette.boxShadow,
+        borderBottom: "1px solid " + theme.palette.border.light,
         height: "88px",
         padding: "16px",
         zIndex: "10",

src/client/src/components/legacyComponents/formUtils.ts

@@ -1,4 +1,5 @@
 import { Identifier } from "../../api/borehole.ts";
+import { theme } from "../../AppTheme.ts";
 import { BoreholeFormInputs } from "../../pages/detail/form/borehole/boreholePanelInterfaces.ts";
 import {
   LocationFormInputs,
@@ -41,6 +42,19 @@ export const getMaxPrecision = (numericString1: string, numericString2: string)
  */
 export const getPrecisionFromString = (numericString: string) => numericString.split(".")[1]?.length || 0;
 
+/**
+ * Gets the style definition for the MUI Textfield's border color based on whether the field is readonly.
+ * @param {boolean} isReadOnly The boolean defining whether the field is readonly.
+ * @returns The style definition.
+ */
+export const getFieldBorderColor = (isReadOnly: boolean) => {
+  return {
+    "& .MuiOutlinedInput-notchedOutline": {
+      borderColor: isReadOnly ? theme.palette.border.light : theme.palette.border.darker,
+    },
+  };
+};
+
 /**
  * Transforms the location form data into a format that can be submitted to the API.
  * @param {LocationFormInputs} formInputs The data from the location form.

src/client/src/components/styledComponents.ts

@@ -30,7 +30,7 @@ export const LayoutBox = styled(Box)({ flex: "1 1 100%", display: "flex", flexDi
 
 export const SidebarBox = styled(Box)(() => ({
   flexShrink: 0,
-  borderRight: "1px solid " + theme.palette.boxShadow,
+  borderRight: "1px solid " + theme.palette.border.light,
   position: "relative",
 }));
 
@@ -47,7 +47,7 @@ export const FormSegmentBox = styled(Box)({
 });
 
 export const DialogHeaderContainer = styled(Box)({
-  borderBottom: "1px solid " + theme.palette.border,
+  borderBottom: "1px solid " + theme.palette.border.light,
   paddingTop: theme.spacing(3),
   paddingRight: theme.spacing(3),
   paddingLeft: theme.spacing(3),
@@ -60,12 +60,12 @@ export const DialogMainContent = styled(Box)({
 });
 
 export const DialogFooterContainer = styled(Box)({
-  borderTop: "1px solid " + theme.palette.border,
+  borderTop: "1px solid " + theme.palette.border.light,
   padding: theme.spacing(3),
 });
 
 export const DetailHeaderStack = styled(Stack)({
-  borderBottom: "1px solid " + theme.palette.boxShadow,
+  borderBottom: "1px solid " + theme.palette.border.light,
   height: "84px",
   padding: "16px",
 });

src/client/src/components/styledTabComponents.tsx

@@ -4,7 +4,7 @@ import { theme } from "../AppTheme";
 
 export const BdmsTabContentBox = styled(Box)(() => ({
   backgroundColor: theme.palette.background.default,
-  border: `1px solid ${theme.palette.boxShadow}`,
+  border: `1px solid ${theme.palette.border.light}`,
   padding: `${theme.spacing(3)}`,
   display: "flex",
   flexDirection: "column",
@@ -35,9 +35,9 @@ export const BdmsTab = styled((props: BdmsTabProps) => <Tab disableRipple {...pr
   "&.Mui-selected": {
     color: theme.palette.background.menuItemActive,
     backgroundColor: theme.palette.background.default,
-    borderTop: `1px solid ${theme.palette.boxShadow}`,
-    borderRight: `1px solid ${theme.palette.boxShadow}`,
-    borderLeft: `1px solid ${theme.palette.boxShadow}`,
+    borderTop: `1px solid ${theme.palette.border.light}`,
+    borderRight: `1px solid ${theme.palette.border.light}`,
+    borderLeft: `1px solid ${theme.palette.border.light}`,
     borderBottom: `1px solid ${theme.palette.background.default}`,
     borderRadius: `${theme.spacing(0.5)} ${theme.spacing(0.5)} 0 0`,
     top: "1px",

src/client/src/mui.theme.d.ts

@@ -57,7 +57,10 @@ declare module "@mui/material/styles" {
       activeEnd: string;
       contrastText: string;
     };
-    boxShadow: string;
+    border: {
+      light: string;
+      darker: string;
+    };
     background: {
       default: string;
       lightgrey: string;
@@ -67,7 +70,6 @@ declare module "@mui/material/styles" {
       filterItemActive: string;
       listItemActive: string;
     };
-    border: string;
     transparent: string;
     buttonStates: {
       contained: {

src/client/src/pages/detail/attachments/table/editorBoreholeFilesTable.tsx

@@ -83,7 +83,7 @@ const EditorBoreholeFilesTable: FC = () => {
         padding: 3,
         flex: "1 1 100%",
         backgroundColor: theme.palette.background.default,
-        border: `1px solid ${theme.palette.boxShadow}`,
+        border: `1px solid ${theme.palette.border.light}`,
       }}>
       {editingEnabled && (
         <Box sx={{ display: "flex", justifyContent: "flex-end", marginBottom: "10px" }}>

src/client/src/pages/detail/detailSideNav.tsx

@@ -32,7 +32,7 @@ export const DetailSideNav = () => {
     cursor: "pointer",
     paddingLeft: "35.5px",
     color: active ? theme.palette.error.main : "",
-    borderTop: `1px solid ${theme.palette.boxShadow}`,
+    borderTop: `1px solid ${theme.palette.border.light}`,
     borderLeft: active ? `0.25em solid ${theme.palette.error.main}` : undefined,
     backgroundColor: active ? theme.palette.background.lightgrey : "",
     "&:hover": {
@@ -223,7 +223,7 @@ export const DetailSideNav = () => {
               </ParentListItem>
               <ParentListItem
                 active={location.pathname === `/${id}/status`}
-                style={{ borderBottom: `1px solid ${theme.palette.boxShadow}` }}
+                style={{ borderBottom: `1px solid ${theme.palette.border.light}` }}
                 onClick={() => {
                   history.push(`/${id}/status`);
                 }}>

src/client/src/pages/detail/form/location/elevationSegment.tsx

@@ -1,9 +1,7 @@
 import { FC } from "react";
 import { UseFormReturn } from "react-hook-form";
-import { TextField } from "@mui/material/";
-import { t } from "i18next";
 import { useDomains } from "../../../../api/fetchApiV2";
-import { FormContainer, FormDomainSelect, FormInput } from "../../../../components/form/form.ts";
+import { FormContainer, FormDomainSelect, FormInput, FormInputDisplayOnly } from "../../../../components/form/form.ts";
 import { Codelist } from "../../../../components/legacyComponents/domain/domainInterface.ts";
 import { FormSegmentBox } from "../../../../components/styledComponents.ts";
 import { LocationBaseProps, LocationFormInputs } from "./locationPanelInterfaces.tsx";
@@ -54,10 +52,8 @@ const ElevationSegment: FC<ElevationSegmentProps> = ({ borehole, formMethods })
             schemaName={"reference_elevation_type"}
             selected={borehole.referenceElevationTypeId}
           />
-          <TextField
-            InputProps={{ readOnly: true }}
-            className="readonly"
-            label={t("height_reference_system")}
+          <FormInputDisplayOnly
+            label={"height_reference_system"}
             value={domains?.find((d: Codelist) => d.id === borehole.hrsId)?.en}
           />
         </FormContainer>

src/client/src/pages/detail/form/location/nameSegment.tsx

@@ -1,9 +1,8 @@
 import { useEffect } from "react";
 import { UseFormReturn } from "react-hook-form";
-import { Card, TextField } from "@mui/material";
-import { t } from "i18next";
+import { Card } from "@mui/material";
 import { useAuth } from "../../../../auth/useBdmsAuth.tsx";
-import { FormContainer, FormInput } from "../../../../components/form/form.ts";
+import { FormContainer, FormInput, FormInputDisplayOnly } from "../../../../components/form/form.ts";
 import { FormSegmentBox } from "../../../../components/styledComponents";
 import { LocationBaseProps, LocationFormInputs } from "./locationPanelInterfaces.tsx";
 
@@ -28,14 +27,7 @@ const NameSegment = ({ borehole, formMethods }: NameSegmentProps) => {
           {!auth.anonymousModeEnabled && (
             <FormContainer direction="row">
               <FormInput fieldName={"originalName"} label={"original_name"} value={borehole?.originalName} />
-              <TextField
-                InputProps={{
-                  readOnly: true,
-                }}
-                className="readonly"
-                label={t("workgroup")}
-                value={borehole?.workgroup?.name}
-              />
+              <FormInputDisplayOnly label={"workgroup"} value={borehole?.workgroup?.name} />
             </FormContainer>
           )}
           <FormContainer direction="row">

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

@@ -86,7 +86,7 @@ const Lithology = ({ checkLock }) => {
         overflow: "hidden",
         p: 3,
         backgroundColor: theme.palette.background.default,
-        border: `1px solid ${theme.palette.boxShadow}`,
+        border: `1px solid ${theme.palette.border.light}`,
       }}>
       {borehole.data.id && (
         <ProfileHeader

src/client/src/pages/detail/form/stratigraphy/stratigraphySelection.jsx

@@ -44,7 +44,7 @@ const StratigraphySelection = ({ id: selectedBoreholeId, noStratigraphiesMessage
         flex: "1",
         p: 3,
         backgroundColor: theme.palette.background.default,
-        border: `1px solid ${theme.palette.boxShadow}`,
+        border: `1px solid ${theme.palette.border.light}`,
       }}>
       <TextField
         value={stratigraphyId}

src/client/src/pages/detail/form/workflow/workflowForm.jsx

@@ -113,7 +113,7 @@ class WorkflowForm extends React.Component {
             height: "100%",
             maxWidth: "800px",
             backgroundColor: theme.palette.background.default,
-            border: `1px solid ${theme.palette.boxShadow}`,
+            border: `1px solid ${theme.palette.border.light}`,
           }}>
           <Typography variant="h4">
             <TranslationText id={"flowPublication"} />