@truedat/qx 5.14.1 → 5.15.0

package/src/components/dataViews/queryableProperties/__tests__/__snapshots__/SelectField.spec.js.snap

@@ -0,0 +1,343 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<SelectField /> matches the latest snapshot for group_by 1`] = `
+<div>
+  <div>
+    <div
+      class="ui grid"
+    >
+      <div
+        class="row"
+      >
+        <div
+          class="column"
+        />
+        <div
+          class="nine wide column"
+        >
+          <div
+            class="ui grid"
+          >
+            <div
+              class="sixteen wide column"
+            >
+              <div
+                class="expression-container"
+              >
+                <div
+                  aria-expanded="false"
+                  class="ui top left pointing dropdown"
+                  role="listbox"
+                  tabindex="0"
+                >
+                  <div
+                    class="shape-selector-trigger"
+                  >
+                    f(x)
+                  </div>
+                  <div
+                    class="menu transition"
+                  >
+                    <div
+                      aria-checked="false"
+                      aria-selected="false"
+                      class="item"
+                      role="option"
+                      style="pointer-events: all;"
+                    >
+                      <div
+                        class="text flex-center"
+                      >
+                        <small
+                          style="margin-right: 5px;"
+                        >
+                          <b>
+                            <code>
+                              [π]
+                            </code>
+                          </b>
+                        </small>
+                        constant
+                      </div>
+                    </div>
+                    <div
+                      aria-checked="true"
+                      aria-selected="true"
+                      class="active selected item"
+                      role="option"
+                      style="pointer-events: all;"
+                    >
+                      <div
+                        class="text flex-center"
+                      >
+                        <small
+                          style="margin-right: 5px;"
+                        >
+                          <b>
+                            <code>
+                              f(x)
+                            </code>
+                          </b>
+                        </small>
+                        function
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="accordion ui fluid no-margin"
+                >
+                  <div
+                    class="active title no-padding"
+                  >
+                    <div
+                      class="flex-center"
+                    >
+                      <i
+                        aria-hidden="true"
+                        class="dropdown icon"
+                      />
+                      <div
+                        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 text"
+                          role="alert"
+                        >
+                          placeholder
+                        </div>
+                        <i
+                          aria-hidden="true"
+                          class="dropdown icon"
+                        />
+                        <div
+                          class="menu transition"
+                          role="listbox"
+                        >
+                          <div
+                            class="message"
+                          >
+                            No results found.
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="content active no-padding"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="six wide column"
+        >
+          <div
+            class="inline fields no-margin"
+          >
+            <div
+              class="field"
+            >
+              <div
+                class="ui input"
+              >
+                <input
+                  autocomplete="off"
+                  placeholder="alias"
+                  type="text"
+                  value=""
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<SelectField /> matches the latest snapshot for select 1`] = `
+<div>
+  <div>
+    <div
+      class="ui grid"
+    >
+      <div
+        class="row"
+      >
+        <div
+          class="column"
+        />
+        <div
+          class="nine wide column"
+        >
+          <div
+            class="ui grid"
+          >
+            <div
+              class="sixteen wide column"
+            >
+              <div
+                class="expression-container"
+              >
+                <div
+                  aria-expanded="false"
+                  class="ui top left pointing dropdown"
+                  role="listbox"
+                  tabindex="0"
+                >
+                  <div
+                    class="shape-selector-trigger"
+                  >
+                    f(x)
+                  </div>
+                  <div
+                    class="menu transition"
+                  >
+                    <div
+                      aria-checked="false"
+                      aria-selected="false"
+                      class="item"
+                      role="option"
+                      style="pointer-events: all;"
+                    >
+                      <div
+                        class="text flex-center"
+                      >
+                        <small
+                          style="margin-right: 5px;"
+                        >
+                          <b>
+                            <code>
+                              [π]
+                            </code>
+                          </b>
+                        </small>
+                        constant
+                      </div>
+                    </div>
+                    <div
+                      aria-checked="true"
+                      aria-selected="true"
+                      class="active selected item"
+                      role="option"
+                      style="pointer-events: all;"
+                    >
+                      <div
+                        class="text flex-center"
+                      >
+                        <small
+                          style="margin-right: 5px;"
+                        >
+                          <b>
+                            <code>
+                              f(x)
+                            </code>
+                          </b>
+                        </small>
+                        function
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="accordion ui fluid no-margin"
+                >
+                  <div
+                    class="active title no-padding"
+                  >
+                    <div
+                      class="flex-center"
+                    >
+                      <i
+                        aria-hidden="true"
+                        class="dropdown icon"
+                      />
+                      <div
+                        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 text"
+                          role="alert"
+                        >
+                          placeholder
+                        </div>
+                        <i
+                          aria-hidden="true"
+                          class="dropdown icon"
+                        />
+                        <div
+                          class="menu transition"
+                          role="listbox"
+                        >
+                          <div
+                            class="message"
+                          >
+                            No results found.
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="content active no-padding"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="six wide column"
+        >
+          <div
+            class="inline fields no-margin"
+          >
+            <div
+              class="field"
+            >
+              <div
+                class="ui input"
+              >
+                <input
+                  autocomplete="off"
+                  placeholder="alias"
+                  type="text"
+                  value=""
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

package/src/components/dataViews/queryableProperties/__tests__/__snapshots__/Where.spec.js.snap

@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Where /> matches the latest snapshot 1`] = `
+<div>
+  <div
+    class="field"
+  >
+    <label>
+      Clause
+    </label>
+    <div
+      class="ui horizontal divider"
+    >
+      <button
+        class="ui mini button"
+      >
+        Add Group
+      </button>
+    </div>
+  </div>
+</div>
+`;

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

@@ -0,0 +1,7 @@
+import From from "./From";
+import GroupBy from "./GroupBy";
+import Join from "./Join";
+import Select from "./Select";
+import Where from "./Where";
+
+export { From, GroupBy, Join, Select, Where };

package/src/components/functions/FunctionEditor.js

@@ -15,7 +15,7 @@ import { ConfirmModal } from "@truedat/core/components";
 import QxContext from "@truedat/qx/components/QxContext";
 import { typeToColor } from "@truedat/qx/types";
 import { DescriptionInput, TypeSelector } from "@truedat/qx/components/common";
-import Expression from "./expressions/Expression";
+import { Expression } from "@truedat/qx/components/common/expressions";
 
 import FunctionParams from "./FunctionParams";
 
@@ -51,7 +51,9 @@ export default function FunctionEditor({
         <Form>
           <Header as="h3" dividing>
             {watch("name") || "Function"}/{params.length}
-            <Label color={typeToColor(type)}>{type}</Label>
+            <Label color={typeToColor(type)}>
+              {formatMessage({ id: `expressions.data_type.${type}` })}
+            </Label>
           </Header>
           <Grid>
             <GridColumn>
@@ -129,59 +131,58 @@ export default function FunctionEditor({
           </QxContext.Provider>
           <Divider hidden />
           <div className="actions">
-            {onDelete ? (
+            <Button
+              onClick={handleSubmit(onSubmit)}
+              primary
+              loading={isSubmitting}
+              disabled={!isValid || !isDirty}
+              content={formatMessage({ id: "actions.save" })}
+            />
+            {isDirty ? (
               <ConfirmModal
                 trigger={
                   <Button
-                    color="red"
-                    content={formatMessage({ id: "actions.delete" })}
+                    content={formatMessage({ id: "actions.cancel" })}
                     disabled={isSubmitting}
                   />
                 }
                 header={formatMessage({
-                  id: "functions.action.delete.header",
+                  id: "actions.discard.confirmation.header",
                 })}
                 content={formatMessage({
-                  id: "functions.action.delete.content",
+                  id: "actions.discard.confirmation.content",
                 })}
-                onConfirm={onDelete}
+                onConfirm={onCancel}
                 onOpen={(e) => e.stopPropagation()}
                 onClose={(e) => e.stopPropagation()}
               />
-            ) : null}
-            {isDirty ? (
+            ) : (
+              <Button
+                content={formatMessage({ id: "actions.cancel" })}
+                disabled={isSubmitting}
+                onClick={onCancel}
+              />
+            )}
+            {onDelete ? (
               <ConfirmModal
                 trigger={
                   <Button
-                    content={formatMessage({ id: "actions.cancel" })}
+                    color="red"
+                    content={formatMessage({ id: "actions.delete" })}
                     disabled={isSubmitting}
                   />
                 }
                 header={formatMessage({
-                  id: "actions.discard.confirmation.header",
+                  id: "functions.action.delete.header",
                 })}
                 content={formatMessage({
-                  id: "actions.discard.confirmation.content",
+                  id: "functions.action.delete.content",
                 })}
-                onConfirm={onCancel}
+                onConfirm={onDelete}
                 onOpen={(e) => e.stopPropagation()}
                 onClose={(e) => e.stopPropagation()}
               />
-            ) : (
-              <Button
-                content={formatMessage({ id: "actions.cancel" })}
-                disabled={isSubmitting}
-                onClick={onCancel}
-              />
-            )}
-
-            <Button
-              onClick={handleSubmit(onSubmit)}
-              primary
-              loading={isSubmitting}
-              disabled={!isValid || !isDirty}
-              content={formatMessage({ id: "actions.save" })}
-            />
+            ) : null}
           </div>
         </Form>
       </FormProvider>

package/src/components/functions/Functions.js

@@ -7,12 +7,11 @@ import {
   GridColumn,
   Header,
   Icon,
-  Label,
   List,
   Segment,
 } from "semantic-ui-react";
 
-import { typeToColor } from "@truedat/qx/types";
+import { typeLabel } from "@truedat/qx/types";
 import {
   useFunctions,
   useFunctionCreate,
@@ -101,15 +100,8 @@ export default function Functions() {
                 >
                   <List.Content>
                     <List.Header>
-                      <Label
-                        size="tiny"
-                        circular
-                        color={typeToColor(func.type)}
-                        width="100px"
-                      >
-                        {func.type[0]}
-                      </Label>{" "}
-                      {func.name || "Function"}/{func.params.length}
+                      {typeLabel(func.type)} {func.name || "Function"}/
+                      {func.params.length}
                     </List.Header>
                   </List.Content>
                 </List.Item>

package/src/components/functions/__tests__/FunctionEditor.spec.js

@@ -31,6 +31,12 @@ const renderOpts = {
       "functions.expression.constant.false": "false",
       "functions.expression.constant.true": "true",
       "functions.form.description": "description",
+      "expressions.data_type.timestamp": "timestamp",
+      "expressions.data_type.date": "date",
+      "expressions.data_type.number": "number",
+      "expressions.data_type.string": "string",
+      "expressions.data_type.boolean": "boolean",
+      "expressions.data_type.any": "any",
     },
   },
   fallback: "lazy",

package/src/components/functions/__tests__/FunctionParams.spec.js

@@ -13,6 +13,12 @@ const renderOpts = {
       "functions.form.name": "name",
       "functions.form.add_param": "add_param",
       "functions.form.description": "description",
+      "expressions.data_type.timestamp": "timestamp",
+      "expressions.data_type.date": "date",
+      "expressions.data_type.number": "number",
+      "expressions.data_type.string": "string",
+      "expressions.data_type.boolean": "boolean",
+      "expressions.data_type.any": "any",
     },
   },
   fallback: "lazy",