BIBDK2021-2237-nice-to-have-cql-error-message-skal-gores-endnu-mere-laekker

src/components/search/advancedSearch/advancedSearch/AdvancedSearch.js

@@ -17,6 +17,7 @@ import { convertStateToCql } from "@/components/search/advancedSearch/utils";
 import IconButton from "@/components/base/iconButton/IconButton";
 import { getHelpUrl } from "@/lib/utils";
 import cx from "classnames";
+import isEmpty from "lodash/isEmpty";
 
 /**
  * Contains advanced search fields
@@ -35,6 +36,7 @@ export default function AdvancedSearch({ ariaExpanded, className }) {
     fieldSearchFromUrl,
     setShowPopover,
     stateToString,
+    cqlButtonDisabled,
   } = useAdvancedSearchContext();
 
   const [showCqlEditor, setShowCqlEditor] = useState(false);
@@ -161,6 +163,10 @@ export default function AdvancedSearch({ ariaExpanded, className }) {
               className={styles.button}
               size="medium"
               onClick={doAdvancedSearch}
+              disabled={
+                (showCqlEditor && cqlButtonDisabled) ||
+                (!showCqlEditor && isEmpty(stateToString))
+              }
             >
               {Translate({ context: "search", label: "advancedSearch_button" })}
             </Button>

src/components/search/advancedSearch/advancedSearchContext.js

@@ -48,6 +48,7 @@ export function useAdvancedSearchContext() {
 
 export default function AdvancedSearchProvider({ children, router }) {
   const workType = "all";
+  const [cqlButtonDisabled, setCqlButtonDisabled] = useState();
 
   const {
     page = "1",
@@ -150,9 +151,11 @@ export default function AdvancedSearchProvider({ children, router }) {
         showInfoTooltip: boolean,
         setShowInfoTooltip: function,
         sort: Array.<{ index: string, order: string }>,
-        workType: string
-        stateToString: string
-        popoverRef: any
+        workType: string,
+        stateToString: string,
+        popoverRef: any,
+        cqlButtonDisabled: boolean,
+        setCqlButtonDisabled: function
    }} AdvancedSearchContextType */
   const value = {
     inputFields,
@@ -178,6 +181,8 @@ export default function AdvancedSearchProvider({ children, router }) {
     workType: workType,
     stateToString,
     popoverRef,
+    cqlButtonDisabled,
+    setCqlButtonDisabled,
   };
 
   return (

src/components/search/advancedSearch/cqlErrorMessage/CqlErrorMessage.js

@@ -1,10 +1,11 @@
-import InfoDropdown from "@/components/base/infoDropdown/InfoDropdown";
 import { useData } from "@/lib/api/api";
 import { doComplexSearchAll } from "@/lib/api/complexSearch.fragments";
 import styles from "./CqlErrorMessage.module.css";
 import Icon from "@/components/base/icon/Icon";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import isEmpty from "lodash/isEmpty";
+import cx from "classnames";
+import { useAdvancedSearchContext } from "@/components/search/advancedSearch/advancedSearchContext";
 
 function parseErrorMessage(errorMessage) {
   // first sentence of errormessage is (kind of) explanation
@@ -28,48 +29,87 @@ function parseErrorMessage(errorMessage) {
   };
 }
 
-export function CqlErrorMessage(errormessage) {
-  const [src, setSrc] = useState("status__on_shelf.svg");
-  const [showError, setShowError] = useState(false);
-  if (errormessage) {
-    setTimeout(() => {
-      setSrc("status__not_for_loan.svg");
-    }, 300);
-  } else {
-    setTimeout(() => {
-      setSrc("status__on_shelf.svg");
-    }, 300);
-  }
+const green = "status__on_shelf.svg";
+const red = "status__not_for_loan.svg";
+
+export function CqlErrorMessage({ errorMessage, isLoading, error }) {
+  const { showPopover, setCqlButtonDisabled } = useAdvancedSearchContext();
+
+  const [showCqlError, setShowCqlError] = useState(false);
+  const [src, setSrc] = useState(green);
+  const [message, setMessage] = useState({
+    explanation: "",
+    location: "",
+    full: "",
+  });
+
+  useEffect(() => {
+    if (!isLoading && !error) {
+      if (errorMessage) {
+        setSrc(red);
+        setMessage(parseErrorMessage(errorMessage));
+        setCqlButtonDisabled(true);
+      } else {
+        setSrc(green);
+        setCqlButtonDisabled(false);
+      }
+    }
+  }, [errorMessage, isLoading]);
 
-  const message = parseErrorMessage(errormessage);
+  useEffect(() => {
+    if (src === green || !showPopover) {
+      setShowCqlError(false);
+      setTimeout(() => {
+        setMessage(parseErrorMessage(errorMessage));
+      }, 500);
+    }
+  }, [src, showPopover]);
 
   return (
     <div className={styles.syntaxContainer}>
-      <Icon
-        src={src}
-        size={{ w: 2, h: "auto" }}
-        onClick={() => setShowError(!showError)}
-        className={styles.action}
-      />
-      {showError && (
-        <div className={styles.errorWrapper}>
-          <div className={styles.errorMessage}>
-            <div>{message.explanation}</div>
-            <div>{message.location}</div>
+      <div aria-expanded={showCqlError} className={cx(styles.popoverAnimation)}>
+        <div
+          aria-expanded={showCqlError}
+          data-unclickable={src === green}
+          className={cx(styles.popoverContent)}
+        >
+          <div
+            aria-expanded={showCqlError}
+            data-unclickable={src === green}
+            className={styles.action_container}
+            hidden={!showPopover}
+          >
+            <Icon
+              src={src}
+              size={{ w: 2, h: 2 }}
+              {...(src !== green && {
+                onClick: () => setShowCqlError((prev) => !prev),
+              })}
+            />
           </div>
-          <div className={styles.errorFull}>
-            <InfoDropdown buttonText="full error message" label="Full error">
-              {message.full}
-            </InfoDropdown>
+          <div aria-expanded={showCqlError} className={styles.explanation}>
+            {message.explanation}
+          </div>
+          <div aria-expanded={showCqlError} className={styles.location}>
+            {message.location}
+          </div>
+          <div aria-expanded={showCqlError} className={styles.full}>
+            {message.full}
           </div>
         </div>
-      )}
+      </div>
     </div>
   );
 }
 
 export default function Wrap({ cql }) {
   const bigResponse = useData(doComplexSearchAll({ cql, offset: 0, limit: 1 }));
 
-  return CqlErrorMessage(bigResponse?.data?.complexSearch?.errorMessage);
+  return (
+    <CqlErrorMessage
+      errorMessage={bigResponse?.data?.complexSearch?.errorMessage}
+      isLoading={bigResponse?.isLoading}
+      error={bigResponse?.error}
+    />
+  );
 }

src/components/search/advancedSearch/cqlErrorMessage/CqlErrorMessage.module.css

@@ -1,22 +1,85 @@
-.errorWrapper {
-  padding: 0 var(--pt1) 0 0;
-}
-
 .syntaxContainer {
   display: flex;
   flex-direction: row-reverse;
+  margin-top: var(--pt1);
+}
+
+.popoverAnimation {
+  position: absolute;
+  max-width: 55vw;
+  display: grid;
+
+  font-size: 0;
+  color: transparent;
+  grid-template-rows: 0fr;
+  grid-template-columns: 0fr;
+
+  transition: all 500ms ease-out, font-size 250ms ease-out;
+}
+
+.popoverAnimation[aria-expanded="true"] {
+  font-size: 17px;
+  color: var(--mine-shaft);
+  grid-template-rows: 1fr;
+  grid-template-columns: 1fr;
+
+  outline: 1px solid var(--blue);
+}
+
+.popoverContent {
+  grid-area: popoverAnimation_advancedSearch;
+  overflow: hidden;
+  display: grid;
+  grid-auto-columns: 1fr var(--pt3);
+  grid-template-areas:
+    "explanation action_container"
+    "location location"
+    "full full";
 }
 
-.action {
+.action_container {
+  overflow: hidden;
+  opacity: 100%;
+  grid-area: action_container;
+  padding: var(--pt05);
+  justify-items: end;
+
   cursor: pointer;
 }
 
-.errorFull {
-  padding: 0 var(--pt2);
-  background-color: var(--white);
+.action_container[aria-expanded="true"] {
+  background-color: var(--error-light);
 }
 
-.errorMessage {
-  padding: var(--pt2);
+.action_container[data-unclickable="true"] {
+  cursor: default;
+}
+
+.explanation,
+.location,
+.full {
+  overflow: hidden;
+  text-overflow: fade;
+}
+
+.explanation {
+  grid-area: explanation;
+}
+
+.location {
+  grid-area: location;
+}
+
+.full {
+  grid-area: full;
+}
+
+:is(.explanation, .location)[aria-expanded="true"] {
+  padding: var(--pt05);
   background-color: var(--error-light);
 }
+
+:is(.full)[aria-expanded="true"] {
+  padding: var(--pt05);
+  background-color: var(--white);
+}

src/components/search/advancedSearch/popover/Popover.module.css

@@ -29,11 +29,11 @@
   grid-template-rows: 1fr;
 }
 
-.popoverAnimation_advancedSearch {
+.popoverContent {
   overflow: hidden;
 }
 
-.popoverAnimation_advancedSearch[aria-expanded="true"] {
+.popoverContent[aria-expanded="true"] {
   overflow: visible;
   animation: 400ms overflowToggle;
 }