@truedat/qx 7.13.7 → 7.13.8

package/src/components/dataViews/__tests__/__snapshots__/Queryables.spec.js.snap

@@ -60,38 +60,42 @@ exports[`<Queryables /> matches the latest snapshot with from queryable 1`] = `
                     queryables.form.resource
                   </label>
                   <div
-                    aria-expanded="false"
-                    class="ui selection dropdown"
-                    role="listbox"
-                    tabindex="0"
+                    class="field"
                   >
                     <div
-                      aria-atomic="true"
-                      aria-live="polite"
-                      class="divider default text"
-                      role="alert"
-                    >
-                      queryables.resource.type
-                    </div>
-                    <i
-                      aria-hidden="true"
-                      class="dropdown icon"
-                    />
-                    <div
-                      class="menu transition"
+                      aria-expanded="false"
+                      class="ui selection dropdown"
+                      role="listbox"
+                      tabindex="0"
                     >
                       <div
-                        aria-checked="false"
-                        aria-selected="true"
-                        class="selected item"
-                        role="option"
-                        style="pointer-events: all;"
+                        aria-atomic="true"
+                        aria-live="polite"
+                        class="divider default text"
+                        role="alert"
                       >
-                        <span
-                          class="text"
+                        queryables.resource.type
+                      </div>
+                      <i
+                        aria-hidden="true"
+                        class="dropdown icon"
+                      />
+                      <div
+                        class="menu transition"
+                      >
+                        <div
+                          aria-checked="false"
+                          aria-selected="true"
+                          class="selected item"
+                          role="option"
+                          style="pointer-events: all;"
                         >
-                          queryables.resource.type.data_structure
-                        </span>
+                          <span
+                            class="text"
+                          >
+                            queryables.resource.type.data_structure
+                          </span>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -202,11 +206,19 @@ exports[`<Queryables /> matches the latest snapshot with from queryable 2`] = `
                       class="item"
                       role="listitem"
                     >
-                      <button
-                        class="ui button"
+                      <div
+                        class="ui medium basic buttons"
                       >
-                        queryables.group_by.form.add_group_field
-                      </button>
+                        <button
+                          class="ui button"
+                        >
+                          <i
+                            aria-hidden="true"
+                            class="plus icon"
+                          />
+                          queryables.group_by.form.add_group_field
+                        </button>
+                      </div>
                     </div>
                   </div>
                 </div>
@@ -224,11 +236,19 @@ exports[`<Queryables /> matches the latest snapshot with from queryable 2`] = `
                       class="item"
                       role="listitem"
                     >
-                      <button
-                        class="ui button"
+                      <div
+                        class="ui medium basic buttons"
                       >
-                        queryables.group_by.form.add_aggregate_field
-                      </button>
+                        <button
+                          class="ui button"
+                        >
+                          <i
+                            aria-hidden="true"
+                            class="plus icon"
+                          />
+                          queryables.group_by.form.add_aggregate_field
+                        </button>
+                      </div>
                     </div>
                   </div>
                 </div>
@@ -331,38 +351,42 @@ exports[`<Queryables /> matches the latest snapshot with join queryable 1`] = `
                     queryables.form.resource
                   </label>
                   <div
-                    aria-expanded="false"
-                    class="ui selection dropdown"
-                    role="listbox"
-                    tabindex="0"
+                    class="field"
                   >
                     <div
-                      aria-atomic="true"
-                      aria-live="polite"
-                      class="divider default text"
-                      role="alert"
-                    >
-                      queryables.resource.type
-                    </div>
-                    <i
-                      aria-hidden="true"
-                      class="dropdown icon"
-                    />
-                    <div
-                      class="menu transition"
+                      aria-expanded="false"
+                      class="ui selection dropdown"
+                      role="listbox"
+                      tabindex="0"
                     >
                       <div
-                        aria-checked="false"
-                        aria-selected="true"
-                        class="selected item"
-                        role="option"
-                        style="pointer-events: all;"
+                        aria-atomic="true"
+                        aria-live="polite"
+                        class="divider default text"
+                        role="alert"
                       >
-                        <span
-                          class="text"
+                        queryables.resource.type
+                      </div>
+                      <i
+                        aria-hidden="true"
+                        class="dropdown icon"
+                      />
+                      <div
+                        class="menu transition"
+                      >
+                        <div
+                          aria-checked="false"
+                          aria-selected="true"
+                          class="selected item"
+                          role="option"
+                          style="pointer-events: all;"
                         >
-                          queryables.resource.type.data_structure
-                        </span>
+                          <span
+                            class="text"
+                          >
+                            queryables.resource.type.data_structure
+                          </span>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -379,7 +403,6 @@ exports[`<Queryables /> matches the latest snapshot with join queryable 1`] = `
                     <div
                       aria-expanded="false"
                       class="ui selection dropdown select-field-dropdown"
-                      label="dataViews.form.queryable.alias"
                       role="listbox"
                       tabindex="0"
                     >
@@ -536,11 +559,19 @@ exports[`<Queryables /> matches the latest snapshot with join queryable 1`] = `
                     <div
                       class="ui horizontal divider"
                     >
-                      <button
-                        class="ui mini button"
+                      <div
+                        class="ui medium basic buttons"
                       >
-                        expression.clause.action.addGroup
-                      </button>
+                        <button
+                          class="ui button"
+                        >
+                          <i
+                            aria-hidden="true"
+                            class="plus icon"
+                          />
+                          expression.clause.action.addGroup
+                        </button>
+                      </div>
                     </div>
                   </div>
                 </div>
@@ -757,38 +788,42 @@ exports[`<Queryables /> test delete queryable 1`] = `
                     queryables.form.resource
                   </label>
                   <div
-                    aria-expanded="false"
-                    class="ui selection dropdown"
-                    role="listbox"
-                    tabindex="0"
+                    class="field"
                   >
                     <div
-                      aria-atomic="true"
-                      aria-live="polite"
-                      class="divider default text"
-                      role="alert"
-                    >
-                      queryables.resource.type
-                    </div>
-                    <i
-                      aria-hidden="true"
-                      class="dropdown icon"
-                    />
-                    <div
-                      class="menu transition"
+                      aria-expanded="false"
+                      class="ui selection dropdown"
+                      role="listbox"
+                      tabindex="0"
                     >
                       <div
-                        aria-checked="false"
-                        aria-selected="true"
-                        class="selected item"
-                        role="option"
-                        style="pointer-events: all;"
+                        aria-atomic="true"
+                        aria-live="polite"
+                        class="divider default text"
+                        role="alert"
+                      >
+                        queryables.resource.type
+                      </div>
+                      <i
+                        aria-hidden="true"
+                        class="dropdown icon"
+                      />
+                      <div
+                        class="menu transition"
                       >
-                        <span
-                          class="text"
+                        <div
+                          aria-checked="false"
+                          aria-selected="true"
+                          class="selected item"
+                          role="option"
+                          style="pointer-events: all;"
                         >
-                          queryables.resource.type.data_structure
-                        </span>
+                          <span
+                            class="text"
+                          >
+                            queryables.resource.type.data_structure
+                          </span>
+                        </div>
                       </div>
                     </div>
                   </div>

package/src/components/dataViews/actions/CancelButton.js

@@ -0,0 +1,33 @@
+import { Button } from "semantic-ui-react";
+import { useIntl } from "react-intl";
+import PropTypes from "prop-types";
+import { ConfirmModal } from "@truedat/core/components";
+
+export const CancelButton = ({ onConfirm, disabled }) => {
+  const { formatMessage } = useIntl();
+  return (
+    <ConfirmModal
+      trigger={
+        <Button
+          floated="right"
+          secondary
+          content={formatMessage({ id: "actions.cancel" })}
+          disabled={disabled}
+        />
+      }
+      header={formatMessage({ id: "actions.discard.confirmation.header" })}
+      size="small"
+      content={formatMessage({ id: "actions.discard.confirmation.content" })}
+      onConfirm={() => onConfirm()}
+      onOpen={(e) => e.stopPropagation()}
+      onClose={(e) => e.stopPropagation()}
+    />
+  );
+};
+
+CancelButton.propTypes = {
+  onConfirm: PropTypes.func,
+  disabled: PropTypes.bool,
+};
+
+export default CancelButton;

package/src/components/dataViews/actions/DeleteButton.js

@@ -0,0 +1,33 @@
+import { Button } from "semantic-ui-react";
+import { useIntl } from "react-intl";
+import PropTypes from "prop-types";
+import { ConfirmModal } from "@truedat/core/components";
+
+export const DeleteButton = ({ disabled, onConfirm, style = {} }) => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <ConfirmModal
+      trigger={
+        <Button
+          icon="trash alternate outline"
+          basic
+          color="red"
+          disabled={disabled}
+        />
+      }
+      header={formatMessage({ id: "dataViews.action.delete.header" })}
+      content={formatMessage({ id: "dataViews.action.delete.content" })}
+      onConfirm={onConfirm}
+      onOpen={(e) => e.stopPropagation()}
+      onClose={(e) => e.stopPropagation()}
+    />
+  );
+};
+
+DeleteButton.propTypes = {
+  onConfirm: PropTypes.func,
+  disabled: PropTypes.bool,
+};
+
+export default DeleteButton;

package/src/components/dataViews/advancedForm/AdvancedDataViewEditor.js

@@ -0,0 +1,159 @@
+import _ from "lodash/fp";
+import { lazy, Fragment } from "react";
+import PropTypes from "prop-types";
+import { useIntl } from "react-intl";
+import {
+  Button,
+  Container,
+  Divider,
+  Grid,
+  Header,
+  Form,
+} from "semantic-ui-react";
+import { FormProvider, useForm, Controller } from "react-hook-form";
+import QxContext from "@truedat/qx/components/QxContext";
+import DataViewSelect from "./DataViewSelect";
+import Queryables from "./Queryables";
+
+const SourceSelector = lazy(
+  () => import("@truedat/cx/sources/components/SourceSelector")
+);
+
+export default function AdvancedDataViewEditor({
+  selectedDataView,
+  context,
+  onSubmit,
+  onCancel,
+  isSubmitting,
+  mode,
+}) {
+  const { formatMessage } = useIntl();
+  const form = useForm({
+    mode: "onTouched",
+    defaultValues: selectedDataView,
+  });
+  const { control, handleSubmit, watch, formState } = form;
+  const { isDirty, isValid } = formState;
+
+  const isEditForm = !_.isNil(selectedDataView?.id);
+  const sourceId = watch("source_id");
+  if (!selectedDataView) return null;
+
+  return (
+    <Fragment>
+      <FormProvider {...form}>
+        <Form>
+          <Header as="h3" dividing>
+            {watch("name") || formatMessage({ id: "dataViews.action.new" })}
+          </Header>
+          <Grid>
+            <Grid.Column>
+              <Grid.Row className="vertical-space">
+                <Controller
+                  control={control}
+                  name="name"
+                  rules={{
+                    required: formatMessage(
+                      { id: "form.validation.required" },
+                      { prop: formatMessage({ id: "dataViews.form.name" }) }
+                    ),
+                  }}
+                  render={({
+                    field: { onBlur, onChange, value },
+                    fieldState: { error },
+                  }) => (
+                    <Form.Field required>
+                      <label>{formatMessage({ id: "group.props.name" })}</label>
+                      <Form.Input
+                        autoComplete="off"
+                        placeholder={formatMessage({
+                          id: "dataViews.form.name",
+                        })}
+                        error={error?.message}
+                        onBlur={onBlur}
+                        onChange={(_e, { value }) => onChange(value)}
+                        value={value}
+                      />
+                    </Form.Field>
+                  )}
+                />
+              </Grid.Row>
+              <Grid.Row className="vertical-space">
+                <Controller
+                  control={control}
+                  name="description"
+                  render={({
+                    field: { onBlur, onChange, value },
+                    fieldState: { error },
+                  }) => (
+                    <Form.Field>
+                      <label>
+                        {formatMessage({ id: "dataViews.form.description" })}
+                      </label>
+                      <Form.Input
+                        autoComplete="off"
+                        placeholder={formatMessage({
+                          id: "dataViews.form.description",
+                        })}
+                        error={error?.message}
+                        onBlur={onBlur}
+                        onChange={(_e, { value }) => onChange(value)}
+                        value={value}
+                      />
+                    </Form.Field>
+                  )}
+                />
+              </Grid.Row>
+            </Grid.Column>
+          </Grid>
+          <Controller
+            control={control}
+            name="source_id"
+            rules={{ required: true }}
+            render={({ field: { onChange, value } }) => (
+              <Form.Field required>
+                <label>{formatMessage({ id: "dataViews.form.source" })}</label>
+                <SourceSelector
+                  disabled={isEditForm}
+                  value={value + ""}
+                  onChange={(_e, { value }) => onChange(value)}
+                />
+              </Form.Field>
+            )}
+          />
+          {!_.isNil(sourceId) ? (
+            <QxContext value={{ ...context, sourceId }}>
+              <Queryables />
+              <DataViewSelect />
+            </QxContext>
+          ) : null}
+          <Divider hidden />
+          <Container textAlign="right">
+            <Button
+              content={formatMessage({ id: "actions.cancel" })}
+              disabled={isSubmitting}
+              onClick={onCancel}
+            />
+
+            <Button
+              onClick={handleSubmit((data) => onSubmit({ ...data, mode }))}
+              primary
+              loading={isSubmitting}
+              disabled={!isValid || !isDirty}
+              content={formatMessage({ id: "actions.save" })}
+            />
+          </Container>
+        </Form>
+      </FormProvider>
+    </Fragment>
+  );
+}
+
+AdvancedDataViewEditor.propTypes = {
+  selectedDataView: PropTypes.object,
+  context: PropTypes.object,
+  onSubmit: PropTypes.func,
+  onCancel: PropTypes.func,
+  isSubmitting: PropTypes.bool,
+  setDirty: PropTypes.func,
+};

package/src/components/dataViews/{DataViewSelect.js → advancedForm/DataViewSelect.js}

@@ -4,8 +4,8 @@ import { useIntl } from "react-intl";
 import { useFormContext } from "react-hook-form";
 import { Grid, Label, Segment } from "semantic-ui-react";
 import QxContext from "@truedat/qx/components/QxContext";
-import { Select } from "./queryableProperties";
-import { reduceQueryableFields } from "./queryableFunctions";
+import { Select } from "../queryableProperties";
+import { reduceQueryableFields } from "../queryableFunctions";
 
 export default function DataViewSelect() {
   const { formatMessage } = useIntl();

package/src/components/dataViews/{Queryable.js → advancedForm/Queryable.js}

@@ -5,8 +5,8 @@ import { useIntl } from "react-intl";
 import { Controller, useFormContext } from "react-hook-form";
 import { Button, Grid, Form, Label, Segment } from "semantic-ui-react";
 import QxContext from "@truedat/qx/components/QxContext";
-import { From, GroupBy, Join, Select, Where } from "./queryableProperties";
-import { getColorById, reduceQueryableFields } from "./queryableFunctions";
+import { From, GroupBy, Join, Select, Where } from "../queryableProperties";
+import { getColorById, reduceQueryableFields } from "../queryableFunctions";
 
 const queryableComponents = {
   from: <From />,

package/src/components/dataViews/queryableFunctions.js

@@ -85,3 +85,10 @@ export const getColorById = (id) =>
     "olive",
     "pink",
   ][id];
+
+export const hasErrors = (fields, errors) => {
+  return _.any((f) => {
+    const error = _.get(f)(errors);
+    return !_.isEmpty(error);
+  })(fields);
+};

package/src/components/dataViews/queryableProperties/GroupBy.js

@@ -2,7 +2,7 @@ import _ from "lodash/fp";
 import { use } from "react";
 import { useIntl } from "react-intl";
 import { useFieldArray, useFormState } from "react-hook-form";
-import { Button, Form, List, Popup } from "semantic-ui-react";
+import { Button, Form, List, Label } from "semantic-ui-react";
 import QxContext from "@truedat/qx/components/QxContext";
 import { calculateGroupByFieldId } from "../queryableFunctions";
 import SelectField, { newSelectField } from "./SelectField";
@@ -44,11 +44,6 @@ export default function GroupBy() {
     "aggregate"
   );
 
-  const addGroupFieldButton = (
-    <Button onClick={() => appendGroupField(newSelectField(nextGroupId))}>
-      {formatMessage({ id: "queryables.group_by.form.add_group_field" })}
-    </Button>
-  );
   return (
     <>
       <Form.Field required>
@@ -70,16 +65,15 @@ export default function GroupBy() {
             </List.Item>
           ))}
           <List.Item>
-            {requiredError ? (
-              <Popup
-                content={requiredError}
-                open
-                pinned
-                position="bottom center"
-                trigger={addGroupFieldButton}
+            <Button.Group basic size="medium">
+              <Button
+                icon="plus"
+                onClick={() => appendGroupField(newSelectField(nextGroupId))}
+                content={formatMessage({ id: "queryables.group_by.form.add_group_field" })}
               />
-            ) : (
-              addGroupFieldButton
+            </Button.Group>
+            {requiredError && (
+              <Label content={requiredError} prompt pointing="left" />
             )}
           </List.Item>
         </List>
@@ -104,18 +98,20 @@ export default function GroupBy() {
             </List.Item>
           ))}
           <List.Item>
-            <Button
-              onClick={() =>
-                appendAggregateField({
-                  ...newSelectField(nextAggregateId),
-                  expression: { shape: "function" },
-                })
-              }
-            >
-              {formatMessage({
-                id: "queryables.group_by.form.add_aggregate_field",
-              })}
-            </Button>
+            <Button.Group basic size="medium">
+              <Button
+                icon="plus"
+                content={formatMessage({
+                  id: "queryables.group_by.form.add_aggregate_field",
+                })}
+                onClick={() =>
+                  appendAggregateField({
+                    ...newSelectField(nextAggregateId),
+                    expression: { shape: "function" },
+                  })
+                }
+              />
+            </Button.Group>
           </List.Item>
         </List>
       </Form.Field>

package/src/components/dataViews/queryableProperties/Join.js

@@ -44,9 +44,6 @@ export default function Join() {
                 options={joinTypeOptions}
                 onChange={(_e, { value }) => onChange(value)}
                 onBlur={onBlur}
-                label={formatMessage({
-                  id: "dataViews.form.queryable.alias",
-                })}
               />
             </Form.Field>
           )}