@truedat/core 4.49.0 → 4.49.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## [4.49.3] 2022-07-29
+
+### Fixed
+
+- [TD-5094] Federated authentication fails if token is present in local storage
+
+## [4.49.1] 2022-07-28
+
+### Changed
+
+- [TD-5090] Support for single selection on `DomainSelector`
+
 ## [4.49.0] 2022-07-27
 
 ### Changed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/core",
-  "version": "4.49.0",
+  "version": "4.49.3",
   "description": "Truedat Web Core",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -89,7 +89,7 @@
   },
   "dependencies": {
     "@apollo/client": "^3.6.4",
-    "axios": "^0.19.2",
+    "axios": "^0.27.2",
     "immutable": "^4.0.0-rc.12",
     "is-hotkey": "^0.1.6",
     "is-url": "^1.2.4",
@@ -112,5 +112,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 0.88.2 < 2.1"
   },
-  "gitHead": "7260126df6067fe59b11c5dc2b94dbdd881fed7b"
+  "gitHead": "85dd5f00cb57a32c3707ecd126f8ac238ad8a71d"
 }

package/src/components/DomainSelector.js

@@ -8,9 +8,16 @@ import { stratify, flatten } from "../services/tree";
 import { DOMAINS_QUERY } from "../api/queries";
 import TreeSelector from "./TreeSelector";
 
-export const DomainSelector = ({ action, onLoad, value, ...props }) => {
+export const DomainSelector = ({
+  action,
+  multiple,
+  onLoad,
+  value,
+  ...props
+}) => {
   const { formatMessage } = useIntl();
   const { loading, error, data } = useQuery(DOMAINS_QUERY, {
+    fetchPolicy: "cache-and-network",
     variables: { action },
     onCompleted: onLoad,
   });
@@ -26,8 +33,13 @@ export const DomainSelector = ({ action, onLoad, value, ...props }) => {
   return (
     <TreeSelector
       options={options}
-      placeholder={formatMessage({ id: "domain.multiple.placeholder" })}
-      value={_.map(_.toString)(value)}
+      placeholder={formatMessage({
+        id: multiple
+          ? "domain.multiple.placeholder"
+          : "domain.selector.placeholder",
+      })}
+      value={multiple ? _.map(_.toString)(value) : _.toString(value)}
+      multiple={multiple}
       {...props}
     />
   );
@@ -35,6 +47,7 @@ export const DomainSelector = ({ action, onLoad, value, ...props }) => {
 
 DomainSelector.propTypes = {
   action: PropTypes.string,
+  multiple: PropTypes.bool,
   onLoad: PropTypes.func,
   value: PropTypes.array,
 };

package/src/components/DropdownMenuItem.js

@@ -6,30 +6,30 @@ export const DropdownMenuItem = ({
   id,
   canOpen,
   check = true,
-  handleOpen,
-  handleClick,
+  onOpen,
+  onClick,
   selected,
   open,
   name,
   level,
 }) => {
-  const doHandleOpen = (e) => {
+  const handleOpen = (e) => {
     e && e.preventDefault();
     e && e.stopPropagation();
-    handleOpen(id);
+    onOpen(id);
   };
 
-  const doHandleClick = (e) => {
+  const handleClick = (e) => {
     e && e.preventDefault();
     e && e.stopPropagation();
-    handleClick(e, id);
+    onClick(e, id);
   };
 
   return (
-    <Dropdown.Item onClick={doHandleClick} selected={!check && selected}>
+    <Dropdown.Item onClick={handleClick} selected={!check && selected}>
       <div style={{ marginLeft: `${8 * level}px` }}>
         {canOpen ? (
-          <Icon name={open ? "minus" : "plus"} onClick={doHandleOpen} />
+          <Icon name={open ? "minus" : "plus"} onClick={handleOpen} />
         ) : (
           <Icon />
         )}
@@ -46,8 +46,8 @@ DropdownMenuItem.propTypes = {
   id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   canOpen: PropTypes.bool,
   check: PropTypes.bool,
-  handleOpen: PropTypes.func,
-  handleClick: PropTypes.func,
+  onOpen: PropTypes.func,
+  onClick: PropTypes.func,
   selected: PropTypes.bool,
   open: PropTypes.bool,
   name: PropTypes.string,

package/src/components/FilterMultilevelDropdown.js

@@ -172,8 +172,8 @@ export const FilterMultilevelDropdown = ({
             {_.map.convert({ cap: false })((option, i) => (
               <DropdownMenuItem
                 key={i}
-                handleOpen={handleOpen}
-                handleClick={handleClick}
+                onOpen={handleOpen}
+                onClick={handleClick}
                 open={_.contains(option.id)(open)}
                 canOpen={_.negate(_.isEmpty)(option.children)}
                 selected={_.contains(option.id)(selected)}

package/src/components/TreeSelector.js

@@ -12,18 +12,57 @@ export const match =
     _.contains(query)(lowerDeburr(name));
 export const matchAny = recursiveMatch(match);
 
+export const SelectedLabels = ({ onClick, options, placeholder, value }) =>
+  _.isEmpty(value) ? (
+    <label>{placeholder}</label>
+  ) : (
+    _.map((id) => (
+      <Label key={id}>
+        {_.flow(_.find({ id }), _.prop("name"))(options)}
+        <Icon
+          name="delete"
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            onClick(e, id);
+          }}
+        />
+      </Label>
+    ))(value)
+  );
+
+SelectedLabels.propTypes = {
+  onClick: PropTypes.func,
+  options: PropTypes.array,
+  placeholder: PropTypes.string,
+  value: PropTypes.array,
+};
+
+const toggle = (id) => (value) =>
+  _.includes(id)(value) ? _.without([id])(value) : _.union([id])(value);
+
+const labelValues = _.cond([
+  [_.isArray, _.identity],
+  [_.isEmpty, _.constant([])],
+  [_.isString, _.castArray],
+  [_.stubTrue, _.constant([])],
+]);
+
 export const TreeSelector = ({
-  options,
   error,
   label,
+  multiple = false,
   name,
   onBlur,
   onChange,
-  required = false,
+  options,
   placeholder,
-  value: initialValue = [],
+  required = false,
+  value: initialValue,
 }) => {
-  const [value, setValue] = useState(initialValue);
+  const [value, setValue] = useState(
+    _.defaultTo(multiple ? [] : null)(initialValue)
+  );
   const [query, setQuery] = useState();
   const [open, setOpen] = useState([]);
   const [displayed, setDisplayed] = useState([]);
@@ -63,11 +102,9 @@ export const TreeSelector = ({
   };
 
   const handleClick = (e, id) => {
-    const ids = _.includes(id)(value)
-      ? _.without([id])(value)
-      : _.union([id])(value);
-    setValue(ids);
-    onChange && onChange(e, { value: ids });
+    const nextValue = multiple ? toggle(id)(value) : value === id ? null : id;
+    setValue(nextValue);
+    onChange && onChange(e, { value: nextValue });
   };
 
   const filterSearch = query ? _.filter(matchAny(query)) : _.identity;
@@ -76,22 +113,13 @@ export const TreeSelector = ({
     ({ id, level }) => level === 0 || _.includes(id)(displayed)
   );
 
-  const trigger = _.isEmpty(value) ? (
-    <label>{placeholder}</label>
-  ) : (
-    _.map((id) => (
-      <Label key={id}>
-        {_.flow(_.find({ id }), _.prop("name"))(options)}
-        <Icon
-          name="delete"
-          onClick={(e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            handleClick(e, id);
-          }}
-        />
-      </Label>
-    ))(value)
+  const trigger = (
+    <SelectedLabels
+      placeholder={placeholder}
+      options={options}
+      onClick={handleClick}
+      value={labelValues(value)}
+    />
   );
 
   const items = _.flow(
@@ -101,11 +129,11 @@ export const TreeSelector = ({
       <DropdownMenuItem
         key={option?.id}
         check={false}
-        handleOpen={handleOpen}
-        handleClick={handleClick}
+        onOpen={handleOpen}
+        onClick={handleClick}
         open={_.contains(option.id)(open)}
         canOpen={!_.isEmpty(option.children)}
-        selected={_.contains(option.id)(value)}
+        selected={multiple ? _.contains(option.id)(value) : value === option.id}
         {...option}
       />
     ))
@@ -116,12 +144,12 @@ export const TreeSelector = ({
       error={error}
       floating
       label={label}
+      multiple={multiple}
       name={name}
       onBlur={onBlur}
-      upward={false}
       required={required}
       trigger={trigger}
-      multiple
+      upward={false}
       value={value}
     >
       <Dropdown.Menu>
@@ -149,13 +177,14 @@ export const TreeSelector = ({
 TreeSelector.propTypes = {
   error: PropTypes.bool,
   label: PropTypes.string,
+  multiple: PropTypes.bool,
   name: PropTypes.string,
   onBlur: PropTypes.func,
   onChange: PropTypes.func,
   options: PropTypes.array,
   placeholder: PropTypes.string,
   required: PropTypes.bool,
-  value: PropTypes.array,
+  value: PropTypes.oneOfType([PropTypes.array, PropTypes.string]),
 };
 
 export default TreeSelector;

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

@@ -36,7 +36,7 @@ describe("<DomainSelector />", () => {
   });
 
   it("calls onChange with selected values", async () => {
-    const props = { action, onChange: jest.fn() };
+    const props = { action, onChange: jest.fn(), multiple: true };
     const { getByText, getByRole } = render(
       <DomainSelector {...props} />,
       renderOpts

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

@@ -1,21 +1,21 @@
 import React from "react";
 import { waitFor } from "@testing-library/react";
-import userEvent, { specialChars } from "@testing-library/user-event";
+import userEvent from "@testing-library/user-event";
 import { render } from "@truedat/test/render";
 import { DropdownMenuItem } from "../DropdownMenuItem";
 
 describe("<DropdownMenuItem />", () => {
   const canOpen = true;
-  const handleOpen = jest.fn();
-  const handleClick = jest.fn();
+  const onOpen = jest.fn();
+  const onClick = jest.fn();
   const id = 1;
   const open = false;
   const name = "foo";
 
   const props = {
     canOpen,
-    handleOpen,
-    handleClick,
+    onOpen,
+    onClick,
     id,
     open,
     name,
@@ -35,7 +35,7 @@ describe("<DropdownMenuItem />", () => {
 
     userEvent.click(container.querySelector('[class="plus icon"]'));
     await waitFor(() => {
-      expect(handleOpen).toHaveBeenCalledWith(id);
+      expect(onOpen).toHaveBeenCalledWith(id);
     });
     rerender(<DropdownMenuItem {...{ ...props, open: true }} />);
 
@@ -55,7 +55,7 @@ describe("<DropdownMenuItem />", () => {
     userEvent.click(getByRole("option"));
 
     await waitFor(() => {
-      expect(handleClick.mock.calls[0][1]).toBe(id);
+      expect(onClick.mock.calls[0][1]).toBe(id);
     });
 
     rerender(<DropdownMenuItem {...{ ...props, selected: true }} />);

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

@@ -10,16 +10,42 @@ const foo = { id: "1", level: 0, name: "foo", children: [bar] };
 const options = [foo, bar, baz];
 
 const renderOpts = {};
-const onChange = jest.fn();
-const props = { options, placeholder: "Select a domain", onChange };
 
 describe("<TreeSelector />", () => {
   it("matches latest snapshot", () => {
+    const props = { options, placeholder: "Select a domain" };
     const { container } = render(<TreeSelector {...props} />, renderOpts);
     expect(container).toMatchSnapshot();
   });
 
-  it("calls onChange with selected values", async () => {
+  it("calls onChange with selected values (multiple)", async () => {
+    const props = {
+      onChange: jest.fn(),
+      options,
+      placeholder: "Select a domain",
+    };
+    const { getByText, getByRole } = render(
+      <TreeSelector multiple {...props} />,
+      renderOpts
+    );
+
+    userEvent.click(getByText("Select a domain"));
+
+    await waitFor(() => {
+      expect(getByRole("option", { name: /foo/i })).toBeTruthy();
+    });
+
+    userEvent.click(getByRole("option", { name: /foo/i }));
+    expect(props.onChange.mock.calls.length).toBe(1);
+    expect(props.onChange.mock.calls[0][1]).toEqual({ value: ["1"] });
+  });
+
+  it("calls onChange with selected values (single)", async () => {
+    const props = {
+      onChange: jest.fn(),
+      options,
+      placeholder: "Select a domain",
+    };
     const { getByText, getByRole } = render(
       <TreeSelector {...props} />,
       renderOpts
@@ -32,7 +58,7 @@ describe("<TreeSelector />", () => {
     });
 
     userEvent.click(getByRole("option", { name: /foo/i }));
-    expect(onChange.mock.calls.length).toBe(1);
-    expect(onChange.mock.calls[0][1]).toEqual({ value: ["1"] });
+    expect(props.onChange.mock.calls.length).toBe(1);
+    expect(props.onChange.mock.calls[0][1]).toEqual({ value: "1" });
   });
 });

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

@@ -7,8 +7,8 @@ exports[`<TreeSelector /> matches latest snapshot 1`] = `
   >
     <div
       aria-expanded="false"
-      aria-multiselectable="true"
-      class="ui floating multiple dropdown"
+      aria-multiselectable="false"
+      class="ui floating dropdown"
       role="listbox"
       tabindex="0"
     >

package/src/services/__tests__/api.spec.js

@@ -7,7 +7,7 @@ describe("authJsonOpts", () => {
 
   it("should include an authorization header with the bearer token", () => {
     const token = "foo";
-    const authorization = `Bearer ${token}`;
-    expect(authJsonOpts(token)).toMatchObject({ headers: { authorization } });
+    const Authorization = `Bearer ${token}`;
+    expect(authJsonOpts(token)).toMatchObject({ headers: { Authorization } });
   });
 });

package/src/services/api.js

@@ -15,7 +15,7 @@ const UPLOAD_JSON_OPTS = {
 
 const authJsonOpts = (token) =>
   token
-    ? { headers: { ...JSON_HEADERS, authorization: `Bearer ${token}` } }
+    ? { headers: { ...JSON_HEADERS, Authorization: `Bearer ${token}` } }
     : JSON_OPTS;
 
 const apiJson = (url, opts) =>

package/src/services/axios.js

@@ -1,22 +1,35 @@
+import _ from "lodash/fp";
 import axios from "axios";
-import { readToken } from "./storage";
+import { clearToken, readToken } from "./storage";
 
-axios.interceptors.request.use(
-  function (config) {
+// If no authorization header is present and token exists in local storage, put
+// the bearer token authorization header
+const maybePutAuthorization = (config) => {
+  if (config.headers["Authorization"] || config.headers["authorization"]) {
+    return config;
+  } else {
     const token = readToken();
     return token === null
-      ? config
+      ? token
       : {
           ...config,
           headers: {
             ...config.headers,
-            Authorization: `Bearer ${token}`,
+            authorization: `Bearer ${token}`,
           },
         };
-  },
-  function (err) {
-    return Promise.reject(err);
   }
-);
+};
+
+// If an unauthorized response is received, remove token from local storage
+const maybeClearToken = (error) => {
+  if (error?.response?.status === 401) {
+    clearToken();
+  }
+  return Promise.reject(error);
+};
+
+axios.interceptors.request.use(maybePutAuthorization, Promise.reject);
+axios.interceptors.response.use(_.identity, maybeClearToken);
 
 export default axios;