@truedat/qx 7.13.7 → 7.13.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/qx",
-  "version": "7.13.7",
+  "version": "7.13.9",
   "description": "Truedat Web Quality Experience package",
   "sideEffects": false,
   "module": "src/index.js",
@@ -53,7 +53,7 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@truedat/test": "7.13.7",
+    "@truedat/test": "7.13.9",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "redux-saga-test-plan": "^4.0.6"
@@ -86,5 +86,5 @@
     "semantic-ui-react": "^3.0.0-beta.2",
     "swr": "^2.3.3"
   },
-  "gitHead": "7437522470d6e6eb11f9f5b472b822b23949cb74"
+  "gitHead": "72faa643a2dab00d15490cd15abb85d89364e375"
 }

package/src/components/QxRoutes.js

@@ -9,22 +9,24 @@ import {
   SCORE_GROUPS,
   SCORES,
 } from "@truedat/core/routes";
+import DataViewEditor from "./dataViews/DataViewEditor";
 import DataViews from "./dataViews/DataViews";
 import Functions from "./functions/Functions";
 import QualityControlRoutes from "./qualityControls/QualityControlRoutes";
 import ScoreRoutes from "./scores/ScoreRoutes";
 import ScoreGroupsRoutes from "./scores/ScoreGroupsRoutes";
+
 export default function QxRoutes() {
   return (
     <Routes>
       <Route
         path={DATA_VIEWS}
-        element={
-          <ProtectedRoute authorization="quality_control">
-            <DataViews />
-          </ProtectedRoute>
-        }
-      />
+        element={<ProtectedRoute authorization="quality_control" />}
+      >
+        <Route index element={<DataViews />} />
+        <Route path="new" element={<DataViewEditor />} />
+        <Route path=":id" element={<DataViewEditor />} />
+      </Route>
       <Route
         path={FUNCTIONS}
         element={

package/src/components/common/ResourceSelector.js

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 import { use } from "react";
 import { useIntl } from "react-intl";
 import { Controller, useFormContext } from "react-hook-form";
-import { Form, Dropdown } from "semantic-ui-react";
+import { Form } from "semantic-ui-react";
 import QxContext from "@truedat/qx/components/QxContext";
 import {
   DataViewSelector,
@@ -43,14 +43,20 @@ export default function ResourceSelector({ required, labelId }) {
       <Controller
         name={`${field}.type`}
         control={control}
-        rules={{ required }}
-        render={({ field: { onBlur, onChange } }) => (
+        rules={{
+          required: {
+            value: required,
+            message: formatMessage({ id: "quality_control.form.required" }),
+          },
+        }}
+        render={({ field: { onBlur, onChange }, fieldState: { error } }) => (
           <Form.Field required={required}>
             <label>
               {formatMessage({ id: labelId || "queryables.form.resource" })}
             </label>
-            <Dropdown
+            <Form.Dropdown
               selection
+              error={error?.message}
               placeholder={formatMessage({ id: "queryables.resource.type" })}
               onBlur={onBlur}
               options={resourceTypeOptions}
@@ -68,15 +74,28 @@ export default function ResourceSelector({ required, labelId }) {
         <Controller
           name={`${field}.id`}
           control={control}
-          rules={{ required }}
-          render={({ field: { onBlur, onChange, value } }) => {
+          rules={{
+            required: {
+              value: required,
+              message: formatMessage({ id: "quality_control.form.required" }),
+            },
+            validate: (v) =>
+              (!_.isNil(v) && _.isEmpty(v)) ||
+              formatMessage({ id: "quality_control.form.required" }),
+          }}
+          render={({
+            field: { onBlur, onChange, value },
+            fieldState: { error },
+          }) => {
             const ResourceSelectorForType = resourceSelectorForType[type];
             return (
               <ResourceSelectorForType
+                error={error?.message}
                 onBlur={onBlur}
                 onChange={(value) => {
                   onChange(value?.id);
                   setValue(`${field}.embedded`, value);
+                  onBlur && onBlur();
                 }}
                 value={value}
               />

package/src/components/common/TypeSelector.js

@@ -2,12 +2,14 @@ import _ from "lodash/fp";
 import { useIntl } from "react-intl";
 import { Dropdown } from "semantic-ui-react";
 import { typeToIcon, types } from "@truedat/qx/types";
+import { Form, Label } from "semantic-ui-react"
 
 export default function TypeSelector({
   value,
   onChange,
   onBlur,
   withoutTypeAny,
+  error,
   name = "type",
 }) {
   const { formatMessage } = useIntl();
@@ -21,14 +23,17 @@ export default function TypeSelector({
     }))
   )(types);
   return (
-    <Dropdown
-      button
-      basic
-      onBlur={onBlur}
-      name={name}
-      options={options}
-      value={value}
-      onChange={onChange}
-    />
+    <Form.Field error={!!error?.message}>
+      <Dropdown
+        button
+        fluid
+        onBlur={onBlur}
+        name={name}
+        options={options}
+        value={value}
+        onChange={onChange}
+      />
+      {error?.message && <Label basic prompt pointing>{error?.message}</Label>}
+    </Form.Field>
   );
 }