@truedat/lm 6.15.2 → 6.16.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/lm",
-  "version": "6.15.2",
+  "version": "6.16.3",
   "description": "Truedat Link Manager",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -107,5 +107,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 2.0.3 < 2.2"
   },
-  "gitHead": "15b38541393160ff92c8ecf96814c3218786a461"
+  "gitHead": "9ac7bd2ddab3f16be28269b3203e568c269cbd0e"
 }

package/src/components/RelationTagCards.js

@@ -1,52 +1,79 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
-import { Button, Card } from "semantic-ui-react";
-import { FormattedMessage } from "react-intl";
+import { Button, Card, Checkbox } from "semantic-ui-react";
+import { FormattedMessage, useIntl } from "react-intl";
 import { ConfirmModal } from "@truedat/core/components";
-import { deleteRelationTag } from "../routines";
+import { deleteRelationTag, updateRelationTag } from "../routines";
 
 export const RelationTagCards = ({
   deleteRelationTag,
+  updateRelationTag,
   relationTags,
   relationTagsLoading,
 }) => {
+  const { formatMessage } = useIntl();
+
   if (relationTagsLoading) return <div />;
 
   return (
     <>
       <Card.Group>
-        {relationTags.map((tag, i) => (
-          <Card key={i}>
-            <Card.Content>
-              <Card.Header>
-                <FormattedMessage
-                  id={`${"source"}.${tag.value.type}`}
-                  defaultMessage={tag.value.type}
-                />
-              </Card.Header>
-              <Card.Description>{tag.value.target_type}</Card.Description>
-            </Card.Content>
-            <Card.Content extra>
-              <div className="ui actions">
-                <ConfirmModal
-                  icon="trash"
-                  trigger={<Button icon="trash" basic color="red" />}
-                  header={
-                    <FormattedMessage id="relationTag.actions.delete.confirmation.header" />
-                  }
-                  content={
-                    <FormattedMessage
-                      id="relationTag.actions.delete.confirmation.content"
-                      values={{ type: <i>{tag.value.type}</i> }}
+        {relationTags.map((tag, i) => {
+          const ref = React.createRef(); // Crea una referencia para el checkbox
+          return (
+            <Card key={i}>
+              <Card.Content>
+                <Card.Header>
+                  <FormattedMessage
+                    id={`${"source"}.${tag.value.type}`}
+                    defaultMessage={tag.value.type}
+                  />
+                </Card.Header>
+                <Card.Description>{tag.value.target_type}</Card.Description>
+                {tag.value.target_type == "business_concept" ? (
+                  <Card.Meta>
+                    <Checkbox
+                      toggle
+                      ref={ref}
+                      label={formatMessage({
+                        id: "relationTags.props.expandable",
+                      })}
+                      defaultChecked={tag.value.expandable}
+                      onChange={(_e, { checked }) =>
+                        updateRelationTag({
+                          ...tag,
+                          value: {
+                            ...tag.value,
+                            expandable: checked,
+                          },
+                        })
+                      }
                     />
-                  }
-                  onConfirm={() => deleteRelationTag({ id: tag.id })}
-                />
-              </div>
-            </Card.Content>
-          </Card>
-        ))}
+                  </Card.Meta>
+                ) : null}
+              </Card.Content>
+              <Card.Content extra>
+                <div className="ui actions">
+                  <ConfirmModal
+                    icon="trash"
+                    trigger={<Button icon="trash" basic color="red" />}
+                    header={
+                      <FormattedMessage id="relationTag.actions.delete.confirmation.header" />
+                    }
+                    content={
+                      <FormattedMessage
+                        id="relationTag.actions.delete.confirmation.content"
+                        values={{ type: <i>{tag.value.type}</i> }}
+                      />
+                    }
+                    onConfirm={() => deleteRelationTag({ id: tag.id })}
+                  />
+                </div>
+              </Card.Content>
+            </Card>
+          );
+        })}
       </Card.Group>
     </>
   );
@@ -54,6 +81,9 @@ export const RelationTagCards = ({
 
 RelationTagCards.propTypes = {
   relationTags: PropTypes.array,
+  deleteRelationTag: PropTypes.func,
+  updateRelationTag: PropTypes.func,
+  relationTagsLoading: PropTypes.bool,
 };
 
 const mapStateToProps = ({ relationTags, relationTagsLoading }) => ({
@@ -61,6 +91,7 @@ const mapStateToProps = ({ relationTags, relationTagsLoading }) => ({
   relationTagsLoading,
 });
 
-export default connect(mapStateToProps, { deleteRelationTag })(
-  RelationTagCards
-);
+export default connect(mapStateToProps, {
+  deleteRelationTag,
+  updateRelationTag,
+})(RelationTagCards);

package/src/components/RelationTagForm.js

@@ -8,11 +8,12 @@ import { HistoryBackButton } from "@truedat/core/components";
 
 export const RelationTagForm = ({ relationTag, isSubmitting, onSubmit }) => {
   const { formatMessage } = useIntl();
-  const { handleSubmit, control, formState } = useForm({
+  const { handleSubmit, control, formState, watch } = useForm({
     mode: "all",
     defaultValues: {
       type: "",
       target_type: "",
+      expandable: false,
       ...relationTag,
     },
   });
@@ -32,6 +33,7 @@ export const RelationTagForm = ({ relationTag, isSubmitting, onSubmit }) => {
       text: formatMessage({ id: "target_type.data_field" }),
     },
   ];
+  const currentTargetType = watch("target_type");
   return (
     <Form onSubmit={handleSubmit(onSubmit)}>
       <Controller
@@ -72,26 +74,54 @@ export const RelationTagForm = ({ relationTag, isSubmitting, onSubmit }) => {
           ),
         }}
         render={({ field: { onBlur, onChange, value } }) => (
-          <Form.Dropdown
-            id="target_type"
-            autoComplete="off"
-            error={errors.target_type?.message}
-            label={{
-              children: formatMessage({ id: "relationTags.props.target_type" }),
-              htmlFor: "target_type",
-            }}
-            onBlur={onBlur}
-            onChange={(_e, { value }) => onChange(value)}
-            placeholder={formatMessage({
-              id: "relationTags.props.target_type.placeholder",
-            })}
-            value={value || ""}
-            selection
-            options={targetTypeOptions}
-            required
-          />
+          <>
+            <Form.Dropdown
+              id="target_type"
+              autoComplete="off"
+              error={errors.target_type?.message}
+              label={{
+                children: formatMessage({
+                  id: "relationTags.props.target_type",
+                }),
+                htmlFor: "target_type",
+              }}
+              onBlur={onBlur}
+              onChange={(_e, { value }) => onChange(value)}
+              placeholder={formatMessage({
+                id: "relationTags.props.target_type.placeholder",
+              })}
+              value={value}
+              selection
+              options={targetTypeOptions}
+              required
+            />
+          </>
         )}
       />
+      {currentTargetType == "business_concept" ? (
+        <Controller
+          control={control}
+          name="expandable"
+          render={({ field: { onBlur, onChange, value } }) => (
+            <Form.Field>
+              <Form.Checkbox
+                id="expandable"
+                toggle
+                onBlur={onBlur}
+                label={{
+                  htmlFor: "expandable",
+                  children: formatMessage({
+                    id: "relationTags.props.expandable",
+                  }),
+                }}
+                checked={value}
+                onChange={(_e, { checked }) => onChange(checked)}
+              />
+            </Form.Field>
+          )}
+        />
+      ) : null}
+
       <div className="actions">
         <Button
           content={formatMessage({ id: "actions.create" })}

package/src/components/__tests__/RelationTagCards.spec.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { shallow } from "enzyme";
+import { render } from "@truedat/test/render";
 import { RelationTagCards } from "../RelationTagCards";
 
 describe("<RelationTagCards />", () => {
@@ -7,10 +7,11 @@ describe("<RelationTagCards />", () => {
     const relationTags = [
       { id: 1, value: { type: "tag1", target_type: "business_concept" } },
       { id: 2, value: { type: "tag2", target_type: "data_field" } },
-      { id: 3, value: { type: "tag3", target_type: "ingest" } }
+      { id: 3, value: { type: "tag3", target_type: "ingest" } },
     ];
     const props = { relationTags };
-    const wrapper = shallow(<RelationTagCards {...props} />);
-    expect(wrapper).toMatchSnapshot();
+
+    const { container } = render(<RelationTagCards {...props} />);
+    expect(container).toMatchSnapshot();
   });
 });

package/src/components/__tests__/RelationTagForm.spec.js

@@ -49,6 +49,12 @@ describe("<RelationTagForm />", () => {
     userEvent.click(await findByText("target"));
     userEvent.click(await findByRole("option", { name: "concept" }));
 
+    //expandable
+    const expandableCheckbox = await findByRole("checkbox", {
+      name: /expandable/,
+    });
+    userEvent.click(expandableCheckbox);
+
     // Submit button should now be enabled
     await waitFor(() =>
       expect(getByRole("button", { name: /create/ })).not.toBeDisabled()
@@ -61,6 +67,7 @@ describe("<RelationTagForm />", () => {
       expect(onSubmit).toHaveBeenCalledWith({
         type: "foo",
         target_type: "business_concept",
+        expandable: true,
       })
     );
   });

package/src/components/__tests__/__snapshots__/RelationTagCards.spec.js.snap

@@ -1,164 +1,130 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<RelationTagCards /> matches the latest snapshot 1`] = `
-<Fragment>
-  <CardGroup>
-    <Card
-      key="0"
+<div>
+  <div
+    class="ui cards"
+  >
+    <div
+      class="ui card"
     >
-      <CardContent>
-        <CardHeader>
-          <MemoizedFormattedMessage
-            defaultMessage="tag1"
-            id="source.tag1"
-          />
-        </CardHeader>
-        <CardDescription>
+      <div
+        class="content"
+      >
+        <div
+          class="header"
+        >
+          tag1
+        </div>
+        <div
+          class="description"
+        >
           business_concept
-        </CardDescription>
-      </CardContent>
-      <CardContent
-        extra={true}
+        </div>
+        <div
+          class="meta"
+        >
+          <div
+            class="ui toggle checkbox"
+          >
+            <input
+              class="hidden"
+              readonly=""
+              tabindex="0"
+              type="checkbox"
+              value=""
+            />
+            <label>
+              relationTags.props.expandable
+            </label>
+          </div>
+        </div>
+      </div>
+      <div
+        class="extra content"
       >
         <div
-          className="ui actions"
+          class="ui actions"
         >
-          <ConfirmModal
-            content={
-              <Memo(MemoizedFormattedMessage)
-                id="relationTag.actions.delete.confirmation.content"
-                values={
-                  {
-                    "type": <i>
-                      tag1
-                    </i>,
-                  }
-                }
-              />
-            }
-            header={
-              <Memo(MemoizedFormattedMessage)
-                id="relationTag.actions.delete.confirmation.header"
-              />
-            }
-            icon="trash"
-            onConfirm={[Function]}
-            trigger={
-              <Button
-                as="button"
-                basic={true}
-                color="red"
-                icon="trash"
-              />
-            }
-          />
+          <button
+            class="ui red basic icon button"
+          >
+            <i
+              aria-hidden="true"
+              class="trash icon"
+            />
+          </button>
         </div>
-      </CardContent>
-    </Card>
-    <Card
-      key="1"
+      </div>
+    </div>
+    <div
+      class="ui card"
     >
-      <CardContent>
-        <CardHeader>
-          <MemoizedFormattedMessage
-            defaultMessage="tag2"
-            id="source.tag2"
-          />
-        </CardHeader>
-        <CardDescription>
+      <div
+        class="content"
+      >
+        <div
+          class="header"
+        >
+          tag2
+        </div>
+        <div
+          class="description"
+        >
           data_field
-        </CardDescription>
-      </CardContent>
-      <CardContent
-        extra={true}
+        </div>
+      </div>
+      <div
+        class="extra content"
       >
         <div
-          className="ui actions"
+          class="ui actions"
         >
-          <ConfirmModal
-            content={
-              <Memo(MemoizedFormattedMessage)
-                id="relationTag.actions.delete.confirmation.content"
-                values={
-                  {
-                    "type": <i>
-                      tag2
-                    </i>,
-                  }
-                }
-              />
-            }
-            header={
-              <Memo(MemoizedFormattedMessage)
-                id="relationTag.actions.delete.confirmation.header"
-              />
-            }
-            icon="trash"
-            onConfirm={[Function]}
-            trigger={
-              <Button
-                as="button"
-                basic={true}
-                color="red"
-                icon="trash"
-              />
-            }
-          />
+          <button
+            class="ui red basic icon button"
+          >
+            <i
+              aria-hidden="true"
+              class="trash icon"
+            />
+          </button>
         </div>
-      </CardContent>
-    </Card>
-    <Card
-      key="2"
+      </div>
+    </div>
+    <div
+      class="ui card"
     >
-      <CardContent>
-        <CardHeader>
-          <MemoizedFormattedMessage
-            defaultMessage="tag3"
-            id="source.tag3"
-          />
-        </CardHeader>
-        <CardDescription>
+      <div
+        class="content"
+      >
+        <div
+          class="header"
+        >
+          tag3
+        </div>
+        <div
+          class="description"
+        >
           ingest
-        </CardDescription>
-      </CardContent>
-      <CardContent
-        extra={true}
+        </div>
+      </div>
+      <div
+        class="extra content"
       >
         <div
-          className="ui actions"
+          class="ui actions"
         >
-          <ConfirmModal
-            content={
-              <Memo(MemoizedFormattedMessage)
-                id="relationTag.actions.delete.confirmation.content"
-                values={
-                  {
-                    "type": <i>
-                      tag3
-                    </i>,
-                  }
-                }
-              />
-            }
-            header={
-              <Memo(MemoizedFormattedMessage)
-                id="relationTag.actions.delete.confirmation.header"
-              />
-            }
-            icon="trash"
-            onConfirm={[Function]}
-            trigger={
-              <Button
-                as="button"
-                basic={true}
-                color="red"
-                icon="trash"
-              />
-            }
-          />
+          <button
+            class="ui red basic icon button"
+          >
+            <i
+              aria-hidden="true"
+              class="trash icon"
+            />
+          </button>
         </div>
-      </CardContent>
-    </Card>
-  </CardGroup>
-</Fragment>
+      </div>
+    </div>
+  </div>
+</div>
 `;

package/src/components/__tests__/__snapshots__/RelationTags.spec.js.snap

@@ -49,6 +49,24 @@ exports[`<RelationTags /> matches the latest snapshot 1`] = `
           >
             business_concept
           </div>
+          <div
+            class="meta"
+          >
+            <div
+              class="ui toggle checkbox"
+            >
+              <input
+                class="hidden"
+                readonly=""
+                tabindex="0"
+                type="checkbox"
+                value=""
+              />
+              <label>
+                relationTags.props.expandable
+              </label>
+            </div>
+          </div>
         </div>
         <div
           class="extra content"

package/src/hooks/useTags.js

@@ -0,0 +1,10 @@
+import _ from "lodash/fp";
+import { compile } from "path-to-regexp";
+import useSWRMutations from "swr/mutation";
+import { apiJsonPatch } from "@truedat/core/services/api";
+import { API_TAG } from "../api";
+
+export const useTagUpdate = (id) => {
+  const url = compile(API_TAG)({ id });
+  return useSWRMutations(url, (url, { arg }) => apiJsonPatch(url, arg));
+};

package/src/routines.js

@@ -17,6 +17,7 @@ export const clearSelectedRelationTags = createRoutine(
 export const clearStructures = createRoutine("CLEAR_STRUCTURES");
 
 export const createRelationTag = createRoutine("CREATE_RELATION_TAG");
+export const updateRelationTag = createRoutine("UPDATE_RELATION_TAG");
 export const deleteRelationTag = createRoutine("DELETE_RELATION_TAG");
 
 // Redefined here to remove dependency on bg

package/src/sagas/createRelation.js

@@ -12,7 +12,7 @@ export function* createRelationSaga({ payload }) {
       "source_type",
       "target_id",
       "target_type",
-      "tag_ids"
+      "tag_ids",
     ])(payload);
 
     const redirectUrl = _.prop("redirectUrl")(payload);

package/src/sagas/createRelationTag.js

@@ -7,11 +7,15 @@ import { API_TAGS } from "../api";
 export function* createRelationTagSaga({ payload }) {
   try {
     const { relationTag } = payload;
-    const relationTagValue = _.pick(["type", "target_type"])(relationTag);
+    const relationTagValue = _.pick(["type", "target_type", "expandable"])(
+      relationTag
+    );
 
     const redirectUrl = _.prop("redirectUrl")(payload);
     const meta = { redirectUrl };
-    const requestData = { tag: { value: relationTagValue } };
+    const requestData = {
+      tag: { value: relationTagValue },
+    };
 
     yield put({ meta, ...createRelationTag.request() });
     const { data } = yield call(apiJsonPost, API_TAGS, requestData, JSON_OPTS);

package/src/sagas/index.js

@@ -5,6 +5,7 @@ import { createRelationRequestSaga } from "./createRelation";
 import { deleteRelationRequestSaga } from "./deleteRelation";
 import { deleteRelationTagRequestSaga } from "./deleteRelationTag";
 import { createRelationTagRequestSaga } from "./createRelationTag";
+import { updateRelationTagRequestSaga } from "./updateRelationTag";
 
 export {
   fetchRelationTagsRequestSaga,
@@ -13,7 +14,8 @@ export {
   createRelationRequestSaga,
   deleteRelationRequestSaga,
   deleteRelationTagRequestSaga,
-  createRelationTagRequestSaga
+  createRelationTagRequestSaga,
+  updateRelationTagRequestSaga,
 };
 
 export default [
@@ -23,5 +25,6 @@ export default [
   createRelationRequestSaga(),
   deleteRelationRequestSaga(),
   deleteRelationTagRequestSaga(),
-  createRelationTagRequestSaga()
+  createRelationTagRequestSaga(),
+  updateRelationTagRequestSaga(),
 ];

package/src/sagas/updateRelationTag.js

@@ -0,0 +1,37 @@
+import _ from "lodash/fp";
+import { compile } from "path-to-regexp";
+import { call, put, takeLatest } from "redux-saga/effects";
+import { apiJsonPatch, JSON_OPTS } from "@truedat/core/services/api";
+import { updateRelationTag } from "../routines";
+import { API_TAG } from "../api";
+
+export function* updateRelationTagSaga({ payload }) {
+  try {
+    const relationTagValue = _.pick(["type", "target_type", "expandable"])(
+      payload.value
+    );
+
+    const url = compile(API_TAG)(payload);
+
+    const requestData = {
+      tag: { value: relationTagValue },
+    };
+
+    yield put(updateRelationTag.request());
+    const { data } = yield call(apiJsonPatch, url, requestData, JSON_OPTS);
+    yield put(updateRelationTag.success(data));
+  } catch (error) {
+    if (error.response) {
+      const { status, data } = error.response;
+      yield put(updateRelationTag.failure({ status, data }));
+    } else {
+      yield put(updateRelationTag.failure(error.message));
+    }
+  } finally {
+    yield put(updateRelationTag.fulfill());
+  }
+}
+
+export function* updateRelationTagRequestSaga() {
+  yield takeLatest(updateRelationTag.TRIGGER, updateRelationTagSaga);
+}