@truedat/auth 7.5.7 → 7.5.10

package/src/groups/components/__tests__/__snapshots__/GroupUsersTable.spec.js.snap

@@ -1,231 +1,139 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<GroupUsersTable /> matches the latest snapshot 1`] = `
-<Table
-  as="table"
-  sortable={true}
->
-  <TableHeader
-    as="thead"
+<div>
+  <table
+    class="ui sortable table"
   >
-    <TableRow
-      as="tr"
-      cellAs="td"
+    <thead
+      class=""
     >
-      <TableHeaderCell
-        as="th"
-        className=""
-        content="user.props.full_name"
-        key="0"
-        onClick={[Function]}
-        sorted="ascending"
-        width={2}
-      />
-      <TableHeaderCell
-        as="th"
-        className=""
-        content="user.props.user_name"
-        key="1"
-        onClick={[Function]}
-        sorted={null}
-        width={2}
-      />
-      <TableHeaderCell
-        as="th"
-        className=""
-        content="user.props.email"
-        key="2"
-        onClick={[Function]}
-        sorted={null}
-        width={2}
-      />
-      <TableHeaderCell
-        as="th"
-        key="delete_action"
-        width={1}
-      />
-    </TableRow>
-  </TableHeader>
-  <TableBody
-    as="tbody"
-  >
-    <TableRow
-      as="tr"
-      cellAs="td"
-      key="4_0"
+      <tr
+        class=""
+      >
+        <th
+          class="two wide ascending sorted"
+        >
+          user.props.full_name
+        </th>
+        <th
+          class="two wide"
+        >
+          user.props.user_name
+        </th>
+        <th
+          class="two wide"
+        >
+          user.props.email
+        </th>
+        <th
+          class="one wide"
+        />
+      </tr>
+    </thead>
+    <tbody
+      class=""
     >
-      <TableCell
-        as="td"
-        className="pointer"
-        content={
+      <tr
+        class=""
+      >
+        <td
+          class="two wide pointer"
+        >
           <a>
             a user 3
           </a>
-        }
-        key="0"
-        onClick={[Function]}
-        width={2}
-      />
-      <TableCell
-        as="td"
-        content="auser_3"
-        key="1"
-        width={2}
-      />
-      <TableCell
-        as="td"
-        content="test3@test.com"
-        key="2"
-        width={2}
-      />
-      <TableCell
-        as="td"
-        className="pointer"
-        textAlign="center"
+        </td>
+        <td
+          class="two wide"
+        >
+          auser_3
+        </td>
+        <td
+          class="two wide"
+        >
+          test3@test.com
+        </td>
+        <td
+          class="center aligned pointer"
+        >
+          <button
+            class="ui red mini basic icon button"
+          >
+            <i
+              aria-hidden="true"
+              class="red trash alternate outline icon"
+            />
+          </button>
+        </td>
+      </tr>
+      <tr
+        class=""
       >
-        <ConfirmModal
-          content="groupUsers.actions.delete.confirmation.content"
-          header="groupUsers.actions.delete.confirmation.header"
-          icon="trash"
-          onClose={[Function]}
-          onConfirm={[Function]}
-          onOpen={[Function]}
-          trigger={
-            <Button
-              as="button"
-              basic={true}
-              color="red"
-              icon={true}
-              size="mini"
-            >
-              <Icon
-                as="i"
-                color="red"
-                name="trash alternate outline"
-              />
-            </Button>
-          }
-        />
-      </TableCell>
-    </TableRow>
-    <TableRow
-      as="tr"
-      cellAs="td"
-      key="9_1"
-    >
-      <TableCell
-        as="td"
-        className="pointer"
-        content={
+        <td
+          class="two wide pointer"
+        >
           <a>
             user 1
           </a>
-        }
-        key="0"
-        onClick={[Function]}
-        width={2}
-      />
-      <TableCell
-        as="td"
-        content="user 1"
-        key="1"
-        width={2}
-      />
-      <TableCell
-        as="td"
-        content="test1@test.com"
-        key="2"
-        width={2}
-      />
-      <TableCell
-        as="td"
-        className="pointer"
-        textAlign="center"
+        </td>
+        <td
+          class="two wide"
+        >
+          user 1
+        </td>
+        <td
+          class="two wide"
+        >
+          test1@test.com
+        </td>
+        <td
+          class="center aligned pointer"
+        >
+          <button
+            class="ui red mini basic icon button"
+          >
+            <i
+              aria-hidden="true"
+              class="red trash alternate outline icon"
+            />
+          </button>
+        </td>
+      </tr>
+      <tr
+        class=""
       >
-        <ConfirmModal
-          content="groupUsers.actions.delete.confirmation.content"
-          header="groupUsers.actions.delete.confirmation.header"
-          icon="trash"
-          onClose={[Function]}
-          onConfirm={[Function]}
-          onOpen={[Function]}
-          trigger={
-            <Button
-              as="button"
-              basic={true}
-              color="red"
-              icon={true}
-              size="mini"
-            >
-              <Icon
-                as="i"
-                color="red"
-                name="trash alternate outline"
-              />
-            </Button>
-          }
-        />
-      </TableCell>
-    </TableRow>
-    <TableRow
-      as="tr"
-      cellAs="td"
-      key="3_2"
-    >
-      <TableCell
-        as="td"
-        className="pointer"
-        content={
+        <td
+          class="two wide pointer"
+        >
           <a>
             user 2
           </a>
-        }
-        key="0"
-        onClick={[Function]}
-        width={2}
-      />
-      <TableCell
-        as="td"
-        content="user 2"
-        key="1"
-        width={2}
-      />
-      <TableCell
-        as="td"
-        content="test2@test.com"
-        key="2"
-        width={2}
-      />
-      <TableCell
-        as="td"
-        className="pointer"
-        textAlign="center"
-      >
-        <ConfirmModal
-          content="groupUsers.actions.delete.confirmation.content"
-          header="groupUsers.actions.delete.confirmation.header"
-          icon="trash"
-          onClose={[Function]}
-          onConfirm={[Function]}
-          onOpen={[Function]}
-          trigger={
-            <Button
-              as="button"
-              basic={true}
-              color="red"
-              icon={true}
-              size="mini"
-            >
-              <Icon
-                as="i"
-                color="red"
-                name="trash alternate outline"
-              />
-            </Button>
-          }
-        />
-      </TableCell>
-    </TableRow>
-  </TableBody>
-</Table>
+        </td>
+        <td
+          class="two wide"
+        >
+          user 2
+        </td>
+        <td
+          class="two wide"
+        >
+          test2@test.com
+        </td>
+        <td
+          class="center aligned pointer"
+        >
+          <button
+            class="ui red mini basic icon button"
+          >
+            <i
+              aria-hidden="true"
+              class="red trash alternate outline icon"
+            />
+          </button>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
 `;

package/src/groups/components/index.js

@@ -21,5 +21,5 @@ export {
   GroupUsersTable,
   GroupsLoader,
   GroupsSearchLoader,
-  NewGroup
+  NewGroup,
 };

package/src/groups/sagas/__tests__/deleteGroupUser.spec.js

@@ -4,7 +4,7 @@ import { testSaga } from "redux-saga-test-plan";
 import { apiJsonPut, JSON_OPTS } from "@truedat/core/services/api";
 import {
   deleteGroupUserSaga,
-  deleteGroupUserRequestSaga
+  deleteGroupUserRequestSaga,
 } from "../deleteGroupUser";
 import { deleteGroupUser } from "../../routines";
 import { API_GROUP } from "../../api";
@@ -30,16 +30,16 @@ describe("sagas: deleteGroupUserRequestSaga", () => {
 });
 
 describe("sagas: deleteGroupUserSaga", () => {
-  const group = { id: 1, name: "g1" };
-  const user = { id: 2 };
-  const groupUsers = [{ id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }];
+  const group = { id: "1", name: "g1" };
+  const user = { id: "2" };
+  const groupUsers = [{ id: "2" }, { id: "3" }, { id: "4" }, { id: "5" }];
   const payload = { group, user, groupUsers };
 
-  const url = compile(API_GROUP)({ id: group.id });
+  const url = compile(API_GROUP)({ id: `${group.id}` });
   const meta = { group_id: group.id };
   const updatedGroup = {
     ...group,
-    user_ids: _.map("id")(_.differenceBy("id", groupUsers, [user]))
+    user_ids: _.map("id")(_.differenceBy("id", groupUsers, [user])),
   };
   const requestData = { group: updatedGroup };
 

package/src/groups/sagas/deleteGroup.js

@@ -9,7 +9,7 @@ const toApiPath = compile(API_GROUP);
 export function* deleteGroupSaga({ payload }) {
   try {
     const group = payload;
-    const url = toApiPath(group);
+    const url = toApiPath({ id: `${group.id}` });
     yield put(deleteGroup.request());
     const { data } = yield call(apiJsonDelete, url, JSON_OPTS);
     yield put(deleteGroup.success(data));

package/src/groups/sagas/deleteGroupUser.js

@@ -10,9 +10,9 @@ export function* deleteGroupUserSaga({ payload }) {
     const { group, user, groupUsers } = payload;
     const updatedGroup = {
       ...group,
-      user_ids: _.map("id")(_.differenceBy("id", groupUsers, [user]))
+      user_ids: _.map("id")(_.differenceBy("id", groupUsers, [user])),
     };
-    const url = compile(API_GROUP)(group);
+    const url = compile(API_GROUP)({ id: `${group.id}` });
     const requestData = { group: updatedGroup };
     const meta = { group_id: group.id };
     yield put({ meta, ...deleteGroupUser.request() });

package/src/groups/sagas/fetchGroup.js

@@ -9,7 +9,7 @@ const toApiPath = compile(API_GROUP);
 export function* fetchGroupSaga({ payload }) {
   try {
     const { id } = payload;
-    const url = toApiPath({ id });
+    const url = toApiPath({ id: `${id}` });
     yield put(fetchGroup.request());
     const { data } = yield call(apiJson, url, JSON_OPTS);
     yield put(fetchGroup.success(data));

package/src/groups/sagas/updateGroup.js

@@ -6,7 +6,7 @@ import { API_GROUP } from "../api";
 
 export function* updateGroupSaga({ payload: group }) {
   try {
-    const url = compile(API_GROUP)(group);
+    const url = compile(API_GROUP)({ id: `${group.id}` });
     const requestData = { group };
     yield put(updateGroup.request());
     const { data } = yield call(apiJsonPut, url, requestData, JSON_OPTS);

package/src/roles/components/NewRole.js

@@ -1,4 +1,3 @@
-import React from "react";
 import PropTypes from "prop-types";
 import { Header, Icon, Container, Segment } from "semantic-ui-react";
 import { connect } from "react-redux";

package/src/roles/components/PermissionGroup.js

@@ -1,5 +1,4 @@
 import _ from "lodash/fp";
-import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { Header, List, Checkbox, Segment } from "semantic-ui-react";

package/src/roles/components/Role.js

@@ -1,8 +1,8 @@
 import _ from "lodash/fp";
-import React from "react";
+import { Component } from "react";
 import PropTypes from "prop-types";
 import { FormattedMessage, useIntl } from "react-intl";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { connect } from "react-redux";
 import {
   Form,
@@ -16,24 +16,29 @@ import { ROLES } from "@truedat/core/routes";
 import { deleteRole, updateRole } from "../routines";
 import PermissionGroup from "./PermissionGroup";
 
-class RoleName extends React.Component {
+class RoleName extends Component {
   state = {
     editing: false,
     name: null,
   };
+
   componentDidMount() {
     this.setState(this.props);
   }
+
   handleChange = (_, { value }) => this.setState({ name: value });
+
   handleSubmit = () => {
     this.props.updateName(this.state.name);
     this.setState({ editing: false });
   };
+
   handleKeyDown = (e) => {
     if (e.key === "Escape") {
       this.setState({ editing: false, name: this.props.name });
     }
   };
+
   render() {
     const { name, editing } = this.state;
     return editing ? (

package/src/roles/components/RoleCards.js

@@ -1,8 +1,7 @@
-import React from "react";
 import PropTypes from "prop-types";
 import { Button, Card, Label, Icon } from "semantic-ui-react";
 import { connect } from "react-redux";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { FormattedMessage } from "react-intl";
 import { ConfirmModal } from "@truedat/core/components";
 import { linkTo } from "@truedat/core/routes";
@@ -10,7 +9,7 @@ import { deleteRole } from "../routines";
 
 export const RoleCards = ({ deleteRole, roles }) => (
   <Card.Group>
-    {roles.map((role, i) => (
+    {roles?.map((role, i) => (
       <Card key={i}>
         <Card.Content>
           <Card.Header as={Link} to={linkTo.ROLE({ id: role.id })}>

package/src/roles/components/RoleForm.js

@@ -1,6 +1,5 @@
 import _ from "lodash/fp";
 import PropTypes from "prop-types";
-import React from "react";
 import { useForm, Controller } from "react-hook-form";
 import { Button, Form } from "semantic-ui-react";
 import { useIntl } from "react-intl";
@@ -17,6 +16,7 @@ export const RoleForm = ({ role, isSubmitting, onSubmit }) => {
     },
   });
   const { errors, isDirty, isValid } = formState;
+
   return (
     <Form onSubmit={handleSubmit(onSubmit)}>
       <Controller

package/src/roles/components/RoleLoader.js

@@ -1,8 +1,7 @@
-import React from "react";
+import { useEffect } from "react";
 import PropTypes from "prop-types";
-import { compose } from "redux";
-import { connect } from "react-redux";
-import { withRouter } from "react-router-dom";
+import { useParams } from "react-router";
+import { useDispatch, useSelector } from "react-redux";
 import { Loading } from "@truedat/core/components";
 import {
   fetchPermissions,
@@ -11,44 +10,32 @@ import {
   clearRoles,
 } from "../routines";
 
-class RoleLoader extends React.Component {
-  static propTypes = {
-    fetchPermissions: PropTypes.func,
-    fetchRole: PropTypes.func,
-    fetchRolePermissions: PropTypes.func,
-    roleLoading: PropTypes.bool,
-    match: PropTypes.object,
-  };
+const RoleLoader = () => {
+  const dispatch = useDispatch();
+  const roleLoading = useSelector((state) => state.roleLoading);
+  const { id } = useParams();
 
-  componentDidMount() {
-    const { fetchPermissions, fetchRole, fetchRolePermissions, match } =
-      this.props;
-    const { id } = match.params;
+  useEffect(() => {
     if (id) {
-      fetchPermissions();
-      fetchRole({ id });
-      fetchRolePermissions({ id });
+      dispatch(fetchPermissions());
+      dispatch(fetchRole({ id }));
+      dispatch(fetchRolePermissions({ id }));
     }
-  }
 
-  render() {
-    const { roleLoading } = this.props;
-    if (roleLoading) {
-      return <Loading />;
-    } else {
-      return null;
-    }
-  }
-}
+    return () => {
+      dispatch(clearRoles());
+    };
+  }, [dispatch, id]);
+
+  return roleLoading ? <Loading /> : null;
+};
 
-const mapStateToProps = ({ roleLoading }) => ({ roleLoading });
+RoleLoader.propTypes = {
+  fetchPermissions: PropTypes.func,
+  fetchRole: PropTypes.func,
+  fetchRolePermissions: PropTypes.func,
+  roleLoading: PropTypes.bool,
+  match: PropTypes.object,
+};
 
-export default compose(
-  withRouter,
-  connect(mapStateToProps, {
-    fetchPermissions,
-    fetchRole,
-    fetchRolePermissions,
-    clearRoles,
-  })
-)(RoleLoader);
+export default RoleLoader;

package/src/roles/components/RoleRoutes.js

@@ -1,41 +1,38 @@
 import React from "react";
-import { Route, Switch } from "react-router-dom";
-import { Unauthorized } from "@truedat/core/components";
-import { useAuthorized } from "@truedat/core/hooks";
-import { ROLE, ROLES, ROLES_NEW } from "@truedat/core/routes";
+import { Route, Routes } from "react-router";
+import { ProtectedRoute } from "@truedat/core/router";
+import { path } from "@truedat/core/routesTree";
 import NewRole from "./NewRole";
 import Roles from "./Roles";
 import Role from "./Role";
 import RolesLoader from "./RolesLoader";
 import RoleLoader from "./RoleLoader";
 
-const AuthorizedRoutes = () => (
-  <>
-    <Route path={ROLES} component={RolesLoader} exact />
-    <Route path={ROLES} component={Roles} exact />
-    <Switch>
-      <Route path={ROLES_NEW} render={() => <NewRole />} exact />
-      <Route
-        path={ROLE}
-        render={() => (
-          <>
-            <RoleLoader />
-            <Role />
-          </>
-        )}
-      />
-    </Switch>
-  </>
-);
-
-export const RoleRoutes = () => {
-  const authorized = useAuthorized();
+export default function RoleRoutes() {
   return (
-    <Route
-      path={ROLES}
-      render={() => (authorized ? <AuthorizedRoutes /> : <Unauthorized />)}
-    />
+    <Routes>
+      <Route path={path("roles")} element={<ProtectedRoute />}>
+        <Route
+          index
+          element={
+            <>
+              <RolesLoader />
+              <Roles />
+            </>
+          }
+        />
+        <Route path={path("roles/new")} element={<NewRole />} />
+        <Route
+          path={path("roles/:id")}
+          element={
+            <>
+              <RoleLoader />
+              <Role />
+            </>
+          }
+        />
+      </Route>
+      <Route path="*" element={null} />
+    </Routes>
   );
-};
-
-export default RoleRoutes;
+}