@truedat/qx 8.10.2 → 8.10.4

package/src/hooks/useFunctions.js

@@ -31,3 +31,9 @@ export const useFunctionDelete = (func) => {
   const url = compile(API_FUNCTION)({ id: `${id}` });
   return useSWRMutations(url, (url, { arg }) => apiJsonDelete(url, arg));
 };
+
+export const useFunctionFetch = (id) => {
+  const url = id ? compile(API_FUNCTION)({ id: `${id}` }) : null;
+  const { data, error } = useSWR(url, apiJson);
+  return { data: data?.data, error, loading: !error && !data };
+};

package/src/styles/Expression.less

@@ -30,21 +30,33 @@
   display: flex;
   flex-direction: row;
   align-items: flex-start;
+
+  .expression-content {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+  }
 }
 
-.shape-selector-trigger {
+.shape-selector-trigger,
+.type-selector-trigger {
   width: 38px;
   height: 38px;
   border: 1px solid rgba(34, 36, 38, 0.15);
   border-radius: 4px;
-  font-size: 12px;
-  font-weight: bold;
-  font-family: monospace;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
+.shape-selector-trigger {
+  font-size: 12px;
+  font-weight: bold;
+  font-family: monospace;
+}
+
 .shape-icon {
   font-size: 12px;
   font-weight: bold;
@@ -127,8 +139,26 @@ ul.function-tree {
 
 .condition-row {
   display: flex;
-  justify-content: space-evenly;
-  align-items: center;
+  align-items: flex-start;
+  gap: 4px;
+
+  .condition-fields {
+    flex: 1;
+    display: flex;
+    flex-direction: row;
+    gap: 4px;
+    min-width: 0;
+  }
+
+  .condition-arg-field {
+    flex: 1 1 0;
+    min-width: 0;
+  }
+
+  .condition-operator-field {
+    flex: 0 0 12%;
+    min-width: 0;
+  }
 }
 
 .condition-operator-trigger {
@@ -156,6 +186,9 @@ ul.function-tree {
   display: flex;
   align-items: center;
   justify-content: flex-end;
+  flex-shrink: 0;
+  width: 2rem;
+  padding-top: 2px;
 }
 
 .join_type {

package/src/components/functions/Functions.js

@@ -1,143 +0,0 @@
-import _ from "lodash/fp";
-import { useState } from "react";
-import { useIntl, FormattedMessage } from "react-intl";
-import {
-  Button,
-  Grid,
-  GridColumn,
-  Header,
-  Icon,
-  List,
-  Segment,
-} from "semantic-ui-react";
-
-import { typeLabel } from "@truedat/qx/types";
-import {
-  useFunctions,
-  useFunctionCreate,
-  useFunctionDelete,
-  useFunctionUpdate,
-} from "@truedat/qx/hooks/useFunctions";
-import FunctionEditor from "./FunctionEditor";
-
-const NEW_FUNCTION = {
-  name: "",
-  description: "",
-  type: "boolean",
-  params: [],
-  expression: { shape: "function", value: null },
-};
-
-export default function Functions() {
-  const { formatMessage } = useIntl();
-  const { data, loading, mutate } = useFunctions();
-  const [selectedFunction, setSelectedFunction] = useState();
-  const [isDirty, setDirty] = useState(false);
-
-  const functions = data?.data;
-  const userFunctions = _.reject(({ expression }) => _.isNil(expression))(
-    functions,
-  );
-
-  const changeSelectedFunction = (selection) => {
-    setSelectedFunction(null);
-    setSelectedFunction(selection);
-  };
-  const setStateNewFunction = () => changeSelectedFunction(NEW_FUNCTION);
-  const clearForm = () => {
-    setSelectedFunction(null);
-    setDirty(false);
-  };
-
-  const { trigger: createFunction, isMutating: isCreating } =
-    useFunctionCreate();
-
-  const { trigger: updateFunction, isMutating: isUpdating } =
-    useFunctionUpdate(selectedFunction);
-
-  const { trigger: deleteFunction, isMutating: isDeleting } =
-    useFunctionDelete(selectedFunction);
-
-  const isSubmitting = isCreating || isUpdating || isDeleting;
-  const onFunctionCreate = (func) => {
-    const mutateFunction = selectedFunction?.id
-      ? updateFunction
-      : createFunction;
-    mutateFunction({ function: func }).then(() => {
-      clearForm();
-      mutate();
-    });
-  };
-  const onFunctionDelete = (func) => {
-    deleteFunction({ function: func }).then(() => {
-      clearForm();
-      mutate();
-    });
-  };
-  return (
-    <Segment loading={loading}>
-      <Header as="h2">
-        <Icon circular name="archive" />
-        <Header.Content>
-          <FormattedMessage id="functions.header" />
-          <Header.Subheader>
-            <FormattedMessage id="functions.subheader" />
-          </Header.Subheader>
-        </Header.Content>
-      </Header>
-      <Grid>
-        <GridColumn width={4}>
-          <Button fluid onClick={setStateNewFunction} disabled={isDirty}>
-            {formatMessage({ id: "functions.action.new" })}
-          </Button>
-          <List divided selection={!isDirty}>
-            {!_.isEmpty(userFunctions) ? (
-              userFunctions.map((func, key) => (
-                <List.Item
-                  key={key}
-                  onClick={() => !isDirty && changeSelectedFunction(func)}
-                >
-                  <List.Content>
-                    <List.Header>
-                      {typeLabel(func.type)}
-                      {func.name || "Function"}/{func.params.length}
-                    </List.Header>
-                  </List.Content>
-                </List.Item>
-              ))
-            ) : (
-              <List.Item>
-                <List.Content>
-                  <List.Header>
-                    {formatMessage({ id: "functions.empty_list" })}
-                  </List.Header>
-                </List.Content>
-              </List.Item>
-            )}
-          </List>
-        </GridColumn>
-        <GridColumn width={11}>
-          {selectedFunction ? (
-            <FunctionEditor
-              key={selectedFunction?.id || "new"}
-              selectedFunction={selectedFunction}
-              functions={functions}
-              onCancel={clearForm}
-              onSubmit={onFunctionCreate}
-              onDelete={selectedFunction?.id ? onFunctionDelete : null}
-              isSubmitting={isSubmitting}
-              setDirty={setDirty}
-            />
-          ) : (
-            <Header as="h2" icon textAlign="center">
-              <Icon name="hand pointer outline" />
-              <Header.Subheader>
-                {formatMessage({ id: "functions.no_selection" })}
-              </Header.Subheader>
-            </Header>
-          )}
-        </GridColumn>
-      </Grid>
-    </Segment>
-  );
-}

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

@@ -1,56 +0,0 @@
-import userEvent from "@testing-library/user-event";
-import { render, waitForLoad } from "@truedat/test/render";
-import Functions from "../Functions";
-
-jest.mock("@truedat/qx/hooks/useFunctions", () => {
-  const originalModule = jest.requireActual("@truedat/qx/hooks/useFunctions");
-
-  return {
-    __esModule: true,
-    ...originalModule,
-    useFunctions: jest.fn(() => ({
-      data: {
-        data: [
-          {
-            name: "eq",
-            type: "boolean",
-            params: [
-              { name: "arg1", type: "any" },
-              { name: "arg2", type: "any" },
-            ],
-          },
-          {
-            name: "user_false",
-            type: "boolean",
-            params: [],
-            expression: {
-              shape: "constant",
-              value: { type: "boolean", value: "false" },
-            },
-          },
-        ],
-      },
-      loading: false,
-    })),
-    useFunctionCreate: jest.fn(() => ({
-      trigger: jest.fn(() => new Promise(() => {})),
-      isMutating: false,
-    })),
-    useFunctionDelete: jest.fn(() => ({
-      trigger: jest.fn(() => new Promise(() => {})),
-      isMutating: false,
-    })),
-    useFunctionUpdate: jest.fn(() => ({
-      trigger: jest.fn(() => new Promise(() => {})),
-      isMutating: false,
-    })),
-  };
-});
-
-describe("<Functions />", () => {
-  it("matches the latest snapshot", async () => {
-    const rendered = render(<Functions />);
-    await waitForLoad(rendered);
-    expect(rendered.container).toMatchSnapshot();
-  });
-});

package/src/components/functions/__tests__/__snapshots__/Functions.spec.js.snap

@@ -1,85 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<Functions /> matches the latest snapshot 1`] = `
-<div>
-  <div
-    class="ui segment"
-  >
-    <h2
-      class="ui header"
-    >
-      <i
-        aria-hidden="true"
-        class="archive circular icon"
-      />
-      <div
-        class="content"
-      >
-        functions.header
-        <div
-          class="sub header"
-        >
-          functions.subheader
-        </div>
-      </div>
-    </h2>
-    <div
-      class="ui grid"
-    >
-      <div
-        class="four wide column"
-      >
-        <button
-          class="ui fluid button"
-        >
-          functions.action.new
-        </button>
-        <div
-          class="ui divided selection list"
-          role="list"
-        >
-          <div
-            class="item"
-            role="listitem"
-          >
-            <div
-              class="content"
-            >
-              <div
-                class="header"
-              >
-                <div
-                  class="ui teal tiny circular label"
-                  width="100px"
-                >
-                  b
-                </div>
-                user_false
-                /
-                0
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="eleven wide column"
-      >
-        <h2
-          class="ui icon center aligned header"
-        >
-          <i
-            aria-hidden="true"
-            class="hand pointer outline icon"
-          />
-          <div
-            class="sub header"
-          >
-            functions.no_selection
-          </div>
-        </h2>
-      </div>
-    </div>
-  </div>
-</div>
-`;