Merge pull request #2170 from eliasbruvik/FIX-2158-selectMnemonics

FIX-2158 Make select mnemonics compact
equinor · Dec 5, 2023 · d605484 · d605484
2 parents f0ef4c0 + b1fe0a3
commit d605484
Show file tree

Hide file tree

Showing 6 changed files with 220 additions and 207 deletions.
diff --git a/Src/WitsmlExplorer.Frontend/__testUtils__/mocks/EDSMocks.tsx b/Src/WitsmlExplorer.Frontend/__testUtils__/mocks/EDSMocks.tsx
@@ -0,0 +1,33 @@
+import { ReactNode } from "react";
+
+// Dialog uses HTMLDialogElement which is not yet supported by jsdom, so we need to mock it. Keep an eye on https://github.com/jsdom/jsdom/issues/3294 for progress.
+export const mockEdsCoreReact = () => {
+  const originalModule = jest.requireActual("@equinor/eds-core-react");
+
+  const MockDialog = ({ children }: { children: ReactNode }) => (
+    <div>{children}</div>
+  );
+
+  const CustomContent = ({ children }: { children: ReactNode }) => (
+    <div>{children}</div>
+  );
+  const Header = ({ children }: { children: ReactNode }) => (
+    <div>{children}</div>
+  );
+  const Title = ({ children }: { children: ReactNode }) => (
+    <div>{children}</div>
+  );
+  const Actions = ({ children }: { children: ReactNode }) => (
+    <div>{children}</div>
+  );
+
+  MockDialog.CustomContent = CustomContent;
+  MockDialog.Header = Header;
+  MockDialog.Title = Title;
+  MockDialog.Actions = Actions;
+
+  return {
+    ...originalModule,
+    Dialog: MockDialog
+  };
+};
diff --git a/Src/WitsmlExplorer.Frontend/components/ContentViews/EditSelectedLogCurveInfo.tsx b/Src/WitsmlExplorer.Frontend/components/ContentViews/EditSelectedLogCurveInfo.tsx
@@ -1,6 +1,7 @@
 import {
   Autocomplete,
   Button,
+  EdsProvider,
   Icon,
   Label,
   TextField,
@@ -26,8 +27,8 @@ import LogObject from "../../models/logObject";
 import { truncateAbortHandler } from "../../services/apiClient";
 import ComponentService from "../../services/componentService";
 import { Colors, colors, dark } from "../../styles/Colors";
-import { WITSML_INDEX_TYPE_DATE_TIME } from "../Constants";
 import { formatIndexValue } from "../../tools/IndexHelpers";
+import { WITSML_INDEX_TYPE_DATE_TIME } from "../Constants";
 
 interface EditSelectedLogCurveInfoProps {
   disabled?: boolean;
@@ -39,13 +40,15 @@ const EditSelectedLogCurveInfo = (
   props: EditSelectedLogCurveInfoProps
 ): React.ReactElement => {
   const { disabled, overrideStartIndex, overrideEndIndex } = props;
+  const { operationState } = useContext(OperationContext);
+  const { theme } = operationState;
   const { dispatchNavigation, navigationState } = useContext(NavigationContext);
   const { selectedObject, selectedLogCurveInfo } = navigationState;
   const selectedLog = selectedObject as LogObject;
   const [logCurveInfo, setLogCurveInfo] = useState<LogCurveInfo[]>([]);
   const [selectedMnemonics, setSelectedMnemonics] = useState<string[]>([]);
-  const [startIndex, setStartIndex] = useState<string>(null);
-  const [endIndex, setEndIndex] = useState<string>(null);
+  const [startIndex, setStartIndex] = useState<string>("");
+  const [endIndex, setEndIndex] = useState<string>("");
   const [isEdited, setIsEdited] = useState<boolean>(false);
   const [isValidStart, setIsValidStart] = useState<boolean>(true);
   const [isValidEnd, setIsValidEnd] = useState<boolean>(true);
@@ -163,79 +166,80 @@ const EditSelectedLogCurveInfo = (
   const dateTimeFormat = "yyyy-MM-dd'T'HH:mm:ss";
 
   return (
-    <Layout colors={colors}>
-      <Typography
-        style={{
-          color: `${colors.interactive.primaryResting}`
-        }}
-        variant="h3"
-      >
-        Curve Values
-      </Typography>
-      <StartEndIndex>
-        <StyledLabel label="Start Index" />
-        <StyledTextField
-          disabled={disabled}
-          id="startIndex"
-          value={startIndex}
-          // defaultValue={getDefaultValue(startIndex)}
-          variant={isValidStart ? undefined : "error"}
-          type={isTimeCurve() ? "datetime-local" : ""}
-          step="1"
-          onChange={(e: any) => {
-            onTextFieldChange(e, setStartIndex, setIsValidStart);
-          }}
-        />
-      </StartEndIndex>
-      <StartEndIndex>
-        <StyledLabel label="End Index" />
-        <StyledTextField
-          disabled={disabled}
-          id="endIndex"
-          value={endIndex}
-          // defaultValue={getDefaultValue(endIndex)}
-          type={isTimeCurve() ? "datetime-local" : ""}
-          variant={isValidEnd ? undefined : "error"}
-          step="1"
-          onChange={(e: any) => {
-            onTextFieldChange(e, setEndIndex, setIsValidEnd);
+    <EdsProvider density={theme}>
+      <Layout colors={colors}>
+        <Typography
+          style={{
+            color: `${colors.interactive.primaryResting}`
           }}
-        />
-      </StartEndIndex>
-      <StartEndIndex>
-        <StyledLabel label="Mnemonics" />
-        <Autocomplete
-          id={"mnemonics"}
-          disabled={disabled || isFetchingMnemonics}
-          label={""}
-          multiple={true}
-          // @ts-ignore. Variant is defined and exists in the documentation, but not in the type definition.
-          variant={selectedMnemonics.length === 0 ? "error" : null}
-          options={logCurveInfo.map((lci) => lci.mnemonic)}
-          selectedOptions={selectedMnemonics}
-          onFocus={(e) => e.preventDefault()}
-          onOptionsChange={onMnemonicsChange}
-          style={
-            {
-              "--eds-input-background": colors.ui.backgroundDefault
-            } as CSSProperties
+          variant="h3"
+        >
+          Curve Values
+        </Typography>
+        <StartEndIndex>
+          <StyledLabel label="Start Index" />
+          <StyledTextField
+            disabled={disabled}
+            id="startIndex"
+            value={startIndex}
+            variant={isValidStart ? undefined : "error"}
+            type={isTimeCurve() ? "datetime-local" : ""}
+            step="1"
+            onChange={(e: any) => {
+              onTextFieldChange(e, setStartIndex, setIsValidStart);
+            }}
+          />
+        </StartEndIndex>
+        <StartEndIndex>
+          <StyledLabel label="End Index" />
+          <StyledTextField
+            disabled={disabled}
+            id="endIndex"
+            value={endIndex}
+            type={isTimeCurve() ? "datetime-local" : ""}
+            variant={isValidEnd ? undefined : "error"}
+            step="1"
+            onChange={(e: any) => {
+              onTextFieldChange(e, setEndIndex, setIsValidEnd);
+            }}
+          />
+        </StartEndIndex>
+        <StartEndIndex>
+          <StyledLabel label="Mnemonics" />
+          <Autocomplete
+            id={"mnemonics"}
+            disabled={disabled || isFetchingMnemonics}
+            label={""}
+            multiple={true}
+            // @ts-ignore. Variant is defined and exists in the documentation, but not in the type definition.
+            variant={selectedMnemonics.length === 0 ? "error" : null}
+            options={logCurveInfo.map((lci) => lci.mnemonic)}
+            selectedOptions={selectedMnemonics}
+            onFocus={(e) => e.preventDefault()}
+            onOptionsChange={onMnemonicsChange}
+            style={
+              {
+                "--eds-input-background": colors.ui.backgroundDefault
+              } as CSSProperties
+            }
+            dropdownHeight={600}
+          />
+        </StartEndIndex>
+        <StyledButton
+          variant={"ghost"}
+          color={"primary"}
+          onClick={submitLogCurveInfo}
+          disabled={
+            disabled ||
+            !isValidStart ||
+            !isValidEnd ||
+            selectedMnemonics.length === 0
           }
-        />
-      </StartEndIndex>
-      <StyledButton
-        variant={"ghost"}
-        color={"primary"}
-        onClick={submitLogCurveInfo}
-        disabled={
-          disabled ||
-          !isValidStart ||
-          !isValidEnd ||
-          selectedMnemonics.length === 0
-        }
-      >
-        <Icon size={16} name={isEdited ? "arrowForward" : "sync"} />
-      </StyledButton>
-    </Layout>
+        >
+          <Icon size={16} name={isEdited ? "arrowForward" : "sync"} />
+        </StyledButton>
+      </Layout>
+    </EdsProvider>
   );
 };
 

diff --git a/Src/WitsmlExplorer.Frontend/components/Modals/__tests__/LogCurveInfoPropertiesModal.test.tsx b/Src/WitsmlExplorer.Frontend/components/Modals/__tests__/LogCurveInfoPropertiesModal.test.tsx
@@ -1,6 +1,7 @@
 import "@testing-library/jest-dom";
-import { render, screen, within } from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
+import { mockEdsCoreReact } from "../../../__testUtils__/mocks/EDSMocks";
 import {
   getAxisDefinition,
   getLogCurveInfo,
@@ -12,6 +13,7 @@ import LogCurveInfoPropertiesModal, {
 } from "../LogCurveInfoPropertiesModal";
 
 jest.mock("../../../services/jobService");
+jest.mock("@equinor/eds-core-react", () => mockEdsCoreReact());
 
 const simpleProps: LogCurveInfoPropertiesModalProps = {
   logCurveInfo: getLogCurveInfo(),
@@ -31,11 +33,8 @@ it("Properties of a LogCurve should be shown in the modal", async () => {
 
   render(<LogCurveInfoPropertiesModal {...simpleProps} />);
 
-  const dialog = screen.getByRole("dialog", { name: /edit properties/i });
-  const inDialog = within(dialog);
-
-  const uidInput = inDialog.getByRole("textbox", { name: /uid/i });
-  const mnemonicInput = inDialog.getByRole("textbox", { name: /mnemonic/i });
+  const uidInput = screen.getByRole("textbox", { name: /uid/i });
+  const mnemonicInput = screen.getByRole("textbox", { name: /mnemonic/i });
 
   expect(uidInput).toHaveValue(expectedLogCurveInfo.uid);
   expect(mnemonicInput).toHaveValue(expectedLogCurveInfo.mnemonic);
@@ -50,15 +49,12 @@ it("AxisDefinition should be shown readonly in the LogCurveInfo modal when inclu
 
   render(<LogCurveInfoPropertiesModal {...propsWithAxisDefinition} />);
 
-  const dialog = screen.getByRole("dialog", { name: /edit properties/i });
-  const inDialog = within(dialog);
-
-  const uidInput = inDialog.getByRole("textbox", { name: /uid/i });
-  const mnemonicInput = inDialog.getByRole("textbox", { name: /mnemonic/i });
-  const axisDefinitionLabel = inDialog.getByText(/axisdefinition/i);
-  const orderInput = inDialog.getByRole("textbox", { name: /order/i });
-  const countInput = inDialog.getByRole("textbox", { name: /count/i });
-  const doubleValuesInput = inDialog.getByRole("textbox", {
+  const uidInput = screen.getByRole("textbox", { name: /uid/i });
+  const mnemonicInput = screen.getByRole("textbox", { name: /mnemonic/i });
+  const axisDefinitionLabel = screen.getByText(/axisdefinition/i);
+  const orderInput = screen.getByRole("textbox", { name: /order/i });
+  const countInput = screen.getByRole("textbox", { name: /count/i });
+  const doubleValuesInput = screen.getByRole("textbox", {
     name: /doubleValues/i
   });
 

diff --git a/Src/WitsmlExplorer.Frontend/components/Modals/__tests__/ReportModal.test.tsx b/Src/WitsmlExplorer.Frontend/components/Modals/__tests__/ReportModal.test.tsx
@@ -1,5 +1,6 @@
 import "@testing-library/jest-dom/extend-expect";
 import { act, screen, within } from "@testing-library/react";
+import { mockEdsCoreReact } from "../../../__testUtils__/mocks/EDSMocks";
 import {
   deferred,
   getJobInfo,
@@ -14,6 +15,7 @@ import { ReportModal } from "../ReportModal";
 
 jest.mock("../../../services/objectService");
 jest.mock("@microsoft/signalr");
+jest.mock("@equinor/eds-core-react", () => mockEdsCoreReact());
 
 class ResizeObserver {
   observe() {

diff --git a/Src/WitsmlExplorer.Frontend/package.json b/Src/WitsmlExplorer.Frontend/package.json
@@ -36,8 +36,8 @@
   "dependencies": {
     "@azure/msal-browser": "^2.28.3",
     "@azure/msal-react": "^1.4.7",
-    "@equinor/eds-core-react": "^0.29.1",
-    "@equinor/eds-tokens": "^0.9.0",
+    "@equinor/eds-core-react": "^0.34.0",
+    "@equinor/eds-tokens": "^0.9.2",
     "@material-ui/core": "^4.12.4",
     "@material-ui/icons": "^4.11.3",
     "@material-ui/lab": "^4.0.0-alpha.61",