@truedat/qx 7.13.7 → 7.13.9

package/src/components/common/expressions/constantInputs/__tests__/__snapshots__/DefaultSelector.spec.js.snap

@@ -3,14 +3,13 @@
 exports[`<DefaultSelector /> matches the latest snapshot 1`] = `
 <div>
   <div
-    class="required field"
+    class="field"
   >
     <div
       class="ui input"
     >
       <input
         autocomplete="off"
-        required=""
         type="text"
       />
     </div>
@@ -21,14 +20,13 @@ exports[`<DefaultSelector /> matches the latest snapshot 1`] = `
 exports[`<DefaultSelector /> user interaction 1`] = `
 <div>
   <div
-    class="required field"
+    class="field"
   >
     <div
       class="ui input"
     >
       <input
         autocomplete="off"
-        required=""
         type="text"
         value="text"
       />

package/src/components/common/resourceSelectors/DataStructureSelector.js

@@ -2,11 +2,11 @@ import _ from "lodash/fp";
 import { use, useState } from "react";
 import { useFormContext } from "react-hook-form";
 import { useIntl } from "react-intl";
-import { Icon, Form } from "semantic-ui-react";
+import { Icon, Label, Form } from "semantic-ui-react";
 import QxContext from "@truedat/qx/components/QxContext";
 import StructureSelector from "@truedat/dd/components/StructureSelector";
 
-export default function DataStructureSelector({ onChange }) {
+export default function DataStructureSelector({ onChange, error }) {
   const { formatMessage } = useIntl();
   const { field, sourceId } = use(QxContext);
   const { watch } = useFormContext();
@@ -30,7 +30,8 @@ export default function DataStructureSelector({ onChange }) {
   };
 
   return (
-    <>
+    <Form.Field error={!!error}>
+      {error && <Label pointing="below" prompt>{error}</Label>}
       {active ? (
         <div onClick={onClick}>
           <Icon name="dropdown" />
@@ -59,6 +60,6 @@ export default function DataStructureSelector({ onChange }) {
           onSelect={handleSelect}
         />
       )}
-    </>
+    </Form.Field>
   );
 }

package/src/components/common/resourceSelectors/DataViewSelector.js

@@ -1,11 +1,11 @@
 import _ from "lodash/fp";
 import { use, useState } from "react";
 import { useIntl } from "react-intl";
-import { Dropdown } from "semantic-ui-react";
+import { Form } from "semantic-ui-react";
 import { matchSorter } from "match-sorter";
 import QxContext from "@truedat/qx/components/QxContext";
 
-export default function DataViewSelector({ onChange, onBlur, value }) {
+export default function DataViewSelector({ onChange, onBlur, value, error }) {
   const { formatMessage } = useIntl();
   const [searchTerm, setSearchTerm] = useState("");
   const { dataViews, sourceId, currentDataViewId } = use(QxContext);
@@ -51,8 +51,9 @@ export default function DataViewSelector({ onChange, onBlur, value }) {
     setSearchTerm(searchQuery);
 
   return (
-    <Dropdown
+    <Form.Dropdown
       selection
+      error={error}
       onSearchChange={handleSearchChange}
       search
       fluid

package/src/components/common/resourceSelectors/ReferenceDatasetSelector.js

@@ -1,11 +1,11 @@
 import _ from "lodash/fp";
 import { use, useState } from "react";
 import { useIntl } from "react-intl";
-import { Dropdown } from "semantic-ui-react";
+import { Form } from "semantic-ui-react";
 import { matchSorter } from "match-sorter";
 import QxContext from "@truedat/qx/components/QxContext";
 
-export default function ReferenceDatasetSelector({ onChange, onBlur, value }) {
+export default function ReferenceDatasetSelector({ error, onChange, onBlur, value }) {
   const { formatMessage } = useIntl();
   const [searchTerm, setSearchTerm] = useState("");
   const { referenceDatasets } = use(QxContext);
@@ -43,8 +43,9 @@ export default function ReferenceDatasetSelector({ onChange, onBlur, value }) {
     }))(referenceDatasets);
 
   return (
-    <Dropdown
+    <Form.Dropdown
       selection
+      error={error}
       onSearchChange={handleSearchChange}
       search
       fluid

package/src/components/common/resourceSelectors/__tests__/__snapshots__/DataStructureSelector.spec.js.snap

@@ -2,91 +2,95 @@
 
 exports[`<DataStructureSelector /> matches the latest snapshot 1`] = `
 <div>
-  <div>
-    <i
-      aria-hidden="true"
-      class="dropdown icon"
-    />
-  </div>
   <div
-    class="ui segment"
+    class="field"
   >
-    <div
-      class="ui action left icon input"
-    >
+    <div>
       <i
         aria-hidden="true"
-        class="search link icon"
-      />
-      <input
-        placeholder="search.placeholder"
-        type="text"
-        value=""
+        class="dropdown icon"
       />
-      <button
-        class="ui icon button"
-      >
-        <i
-          aria-hidden="true"
-          class="calendar alternate outline icon"
-        />
-      </button>
+    </div>
+    <div
+      class="ui segment"
+    >
       <div
-        aria-busy="false"
-        aria-disabled="false"
-        aria-expanded="false"
-        class="ui button floating labeled scrolling dropdown icon"
-        role="listbox"
-        tabindex="0"
+        class="ui action left icon input"
       >
-        <div
-          aria-atomic="true"
-          aria-live="polite"
-          class="divider text"
-          role="alert"
-        >
-          Filters
-        </div>
         <i
           aria-hidden="true"
-          class="filter icon"
+          class="search link icon"
         />
+        <input
+          placeholder="search.placeholder"
+          type="text"
+          value=""
+        />
+        <button
+          class="ui icon button"
+        >
+          <i
+            aria-hidden="true"
+            class="calendar alternate outline icon"
+          />
+        </button>
         <div
-          class="menu transition"
+          aria-busy="false"
+          aria-disabled="false"
+          aria-expanded="false"
+          class="ui button floating labeled scrolling dropdown icon"
+          role="listbox"
+          tabindex="0"
         >
           <div
-            class="item"
-            role="option"
+            aria-atomic="true"
+            aria-live="polite"
+            class="divider text"
+            role="alert"
           >
-            <em>
-              (reset filters)
-            </em>
+            Filters
+          </div>
+          <i
+            aria-hidden="true"
+            class="filter icon"
+          />
+          <div
+            class="menu transition"
+          >
+            <div
+              class="item"
+              role="option"
+            >
+              <em>
+                (reset filters)
+              </em>
+            </div>
           </div>
         </div>
       </div>
-    </div>
-    <div
-      class="selectedFilters"
-    />
-    <div
-      class="dimmable structure-table-overflow"
-    >
       <div
-        class="ui icon info message"
+        class="selectedFilters"
+      />
+      <div
+        class="dimmable structure-table-overflow"
       >
-        <i
-          aria-hidden="true"
-          class="search icon"
-        />
         <div
-          class="content"
+          class="ui icon info message"
         >
+          <i
+            aria-hidden="true"
+            class="search icon"
+          />
           <div
-            class="header"
+            class="content"
           >
-            structures.not_found.header
+            <div
+              class="header"
+            >
+              structures.not_found.header
+            </div>
+            structures.not_found.body
           </div>
-          structures.not_found.body
         </div>
       </div>
     </div>

package/src/components/common/resourceSelectors/__tests__/__snapshots__/DataViewSelector.spec.js.snap

@@ -3,46 +3,50 @@
 exports[`<DataViewSelector /> matches the latest snapshot 1`] = `
 <div>
   <div
-    aria-expanded="false"
-    class="ui fluid search selection dropdown"
-    role="combobox"
+    class="field"
   >
-    <input
-      aria-autocomplete="list"
-      autocomplete="off"
-      class="search"
-      tabindex="0"
-      type="text"
-      value=""
-    />
     <div
-      aria-atomic="true"
-      aria-live="polite"
-      class="divider default text"
-      role="alert"
-    >
-      queryables.resource.selector.data_view
-    </div>
-    <i
-      aria-hidden="true"
-      class="dropdown icon"
-    />
-    <div
-      class="menu transition"
-      role="listbox"
+      aria-expanded="false"
+      class="ui fluid search selection dropdown"
+      role="combobox"
     >
+      <input
+        aria-autocomplete="list"
+        autocomplete="off"
+        class="search"
+        tabindex="0"
+        type="text"
+        value=""
+      />
+      <div
+        aria-atomic="true"
+        aria-live="polite"
+        class="divider default text"
+        role="alert"
+      >
+        queryables.resource.selector.data_view
+      </div>
+      <i
+        aria-hidden="true"
+        class="dropdown icon"
+      />
       <div
-        aria-checked="false"
-        aria-selected="true"
-        class="selected item"
-        role="option"
-        style="pointer-events: all;"
+        class="menu transition"
+        role="listbox"
       >
-        <span
-          class="text"
+        <div
+          aria-checked="false"
+          aria-selected="true"
+          class="selected item"
+          role="option"
+          style="pointer-events: all;"
         >
-          UserDataView
-        </span>
+          <span
+            class="text"
+          >
+            UserDataView
+          </span>
+        </div>
       </div>
     </div>
   </div>

package/src/components/common/resourceSelectors/__tests__/__snapshots__/ReferenceDatasetSelector.spec.js.snap

@@ -3,46 +3,50 @@
 exports[`<ReferenceDatasetSelector /> matches the latest snapshot 1`] = `
 <div>
   <div
-    aria-expanded="false"
-    class="ui fluid search selection dropdown"
-    role="combobox"
+    class="field"
   >
-    <input
-      aria-autocomplete="list"
-      autocomplete="off"
-      class="search"
-      tabindex="0"
-      type="text"
-      value=""
-    />
     <div
-      aria-atomic="true"
-      aria-live="polite"
-      class="divider default text"
-      role="alert"
-    >
-      queryables.resource.selector.reference_dataset
-    </div>
-    <i
-      aria-hidden="true"
-      class="dropdown icon"
-    />
-    <div
-      class="menu transition"
-      role="listbox"
+      aria-expanded="false"
+      class="ui fluid search selection dropdown"
+      role="combobox"
     >
+      <input
+        aria-autocomplete="list"
+        autocomplete="off"
+        class="search"
+        tabindex="0"
+        type="text"
+        value=""
+      />
+      <div
+        aria-atomic="true"
+        aria-live="polite"
+        class="divider default text"
+        role="alert"
+      >
+        queryables.resource.selector.reference_dataset
+      </div>
+      <i
+        aria-hidden="true"
+        class="dropdown icon"
+      />
       <div
-        aria-checked="false"
-        aria-selected="true"
-        class="selected item"
-        role="option"
-        style="pointer-events: all;"
+        class="menu transition"
+        role="listbox"
       >
-        <span
-          class="text"
+        <div
+          aria-checked="false"
+          aria-selected="true"
+          class="selected item"
+          role="option"
+          style="pointer-events: all;"
         >
-          UserReferenceDataset
-        </span>
+          <span
+            class="text"
+          >
+            UserReferenceDataset
+          </span>
+        </div>
       </div>
     </div>
   </div>

package/src/components/dataViews/BreadCrumb.js

@@ -0,0 +1,20 @@
+import React from "react";
+import { Breadcrumb } from "semantic-ui-react";
+import { useIntl } from "react-intl";
+import { Link } from "react-router";
+import { DATA_VIEWS } from "@truedat/core/routes";
+
+export default function BreadCrumb({ text = "New" }) {
+  const { formatMessage } = useIntl();
+  return (
+    <Breadcrumb size="large">
+      <Breadcrumb.Section as={Link} to={DATA_VIEWS}>
+        {formatMessage({ id: "dataViews.header" })}
+      </Breadcrumb.Section>
+      <>
+        <Breadcrumb.Divider icon="right angle" />
+        <Breadcrumb.Section active>{text}</Breadcrumb.Section>
+      </>
+    </Breadcrumb>
+  );
+}