@truedat/auth 6.14.0 → 6.14.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/auth",
-  "version": "6.14.0",
+  "version": "6.14.2",
   "description": "Truedat Web Auth",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -34,7 +34,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.2.1",
-    "@truedat/test": "6.8.6",
+    "@truedat/test": "6.14.2",
     "babel-jest": "^28.1.0",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
@@ -86,7 +86,7 @@
     ]
   },
   "dependencies": {
-    "@truedat/core": "6.14.0",
+    "@truedat/core": "6.14.2",
     "auth0-js": "9.23.3",
     "decode-uri-component": "^0.2.2",
     "jwt-decode": "^2.2.0",
@@ -109,5 +109,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 2.0.3 < 2.2"
   },
-  "gitHead": "c93d6ae539fb9ecb3d43b63db5199726246d2024"
+  "gitHead": "753c6b170d39f136f655db597c695e4de3526615"
 }

package/src/groups/components/Group.js

@@ -2,7 +2,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { Header, Button, Icon, Grid } from "semantic-ui-react";
-import { FormattedMessage } from "react-intl";
+import { FormattedMessage, useIntl } from "react-intl";
 import { ConfirmModal, GroupActions } from "@truedat/core/components";
 import { deleteGroup } from "../routines";
 
@@ -36,6 +36,7 @@ ModalDelete.propTypes = {
 };
 
 export const Group = ({ group, groupLoading, deleteGroup }) => {
+  const { formatMessage } = useIntl();
   if (groupLoading || !group.id) return null;
   const actions = [
     {
@@ -54,7 +55,13 @@ export const Group = ({ group, groupLoading, deleteGroup }) => {
     <Grid>
       <Grid.Column width={12}>
         <Header as="h2">
-          <Icon circular name="group" />
+          <Icon
+            circular
+            name={formatMessage({
+              id: "group.header.icon",
+              defaultMessage: "users",
+            })}
+          />
           <Header.Content>
             {group.name}{" "}
             <Header.Subheader>{group.description}</Header.Subheader>

package/src/groups/components/NewGroup.js

@@ -2,28 +2,36 @@ import React from "react";
 import PropTypes from "prop-types";
 import { Header, Icon, Container, Segment } from "semantic-ui-react";
 import { connect } from "react-redux";
-import { FormattedMessage } from "react-intl";
+import { FormattedMessage, useIntl } from "react-intl";
 import { createGroup } from "../routines";
 import GroupForm from "./GroupForm";
 import GroupBreadcrumbs from "./GroupBreadcrumbs";
 
-const NewGroup = ({ createGroup }) => (
-  <>
-    <GroupBreadcrumbs name="groups.actions.create" />
-    <Container text as={Segment}>
-      <Header as="h2">
-        <Icon name="group" />
-        <Header.Content>
-          <FormattedMessage
-            id="groups.actions.create"
-            defaultMessage="New group"
+const NewGroup = ({ createGroup }) => {
+  const { formatMessage } = useIntl();
+  return (
+    <>
+      <GroupBreadcrumbs name="groups.actions.create" />
+      <Container text as={Segment}>
+        <Header as="h2">
+          <Icon
+            name={formatMessage({
+              id: "group.header.icon",
+              defaultMessage: "users",
+            })}
           />
-        </Header.Content>
-      </Header>
-      <GroupForm onSubmit={createGroup} />
-    </Container>
-  </>
-);
+          <Header.Content>
+            <FormattedMessage
+              id="groups.actions.create"
+              defaultMessage="New group"
+            />
+          </Header.Content>
+        </Header>
+        <GroupForm onSubmit={createGroup} />
+      </Container>
+    </>
+  );
+};
 
 NewGroup.propTypes = {
   createGroup: PropTypes.func,

package/src/groups/components/__tests__/Group.spec.js

@@ -1,12 +1,16 @@
 import React from "react";
-import { shallow } from "enzyme";
-import { Group } from "../Group";
+import { render } from "@truedat/test/render";
+import Group from "../Group";
+
+const group = { id: 2, name: "grupo1 ", description: "aaa bbb cc" };
+
+const renderOpts = {
+  state: { group, deleteGroup: jest.fn() },
+};
 
 describe("<Group />", () => {
   it("matches the latest snapshot", () => {
-    const group = { id: 2, name: "grupo1 ", description: "aaa bbb cc" };
-    const props = { group };
-    const wrapper = shallow(<Group {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const { container } = render(<Group />, renderOpts);
+    expect(container).toMatchSnapshot();
   });
 });

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

@@ -1,52 +1,61 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<Group /> matches the latest snapshot 1`] = `
-<Grid>
-  <GridColumn
-    width={12}
+<div>
+  <div
+    class="ui grid"
   >
-    <Header
-      as="h2"
+    <div
+      class="twelve wide column"
     >
-      <Icon
-        as="i"
-        circular={true}
-        name="group"
-      />
-      <HeaderContent>
-        grupo1 
-         
-        <HeaderSubheader>
-          aaa bbb cc
-        </HeaderSubheader>
-      </HeaderContent>
-    </Header>
-  </GridColumn>
-  <GridColumn
-    textAlign="right"
-    width={4}
-  >
-    <GroupActions
-      availableActions={
-        [
-          {
-            "active": false,
-            "as": [Function],
-            "deleteGroup": undefined,
-            "group": {
-              "description": "aaa bbb cc",
-              "id": 2,
-              "name": "grupo1 ",
-            },
-            "icon": "trash",
-            "key": "delete",
-            "selected": false,
-            "value": "delete",
-          },
-        ]
-      }
-      direction="left"
-    />
-  </GridColumn>
-</Grid>
+      <h2
+        class="ui header"
+      >
+        <i
+          aria-hidden="true"
+          class="users circular icon"
+        />
+        <div
+          class="content"
+        >
+          grupo1 
+           
+          <div
+            class="sub header"
+          >
+            aaa bbb cc
+          </div>
+        </div>
+      </h2>
+    </div>
+    <div
+      class="right aligned four wide column"
+    >
+      <div
+        aria-expanded="false"
+        class="ui floating dropdown button icon group-actions"
+        role="listbox"
+        tabindex="0"
+      >
+        <i
+          aria-hidden="true"
+          class="ellipsis vertical icon"
+        />
+        <div
+          class="left menu transition"
+        >
+          <button
+            class="ui button"
+          >
+            <i
+              aria-hidden="true"
+              class="trash icon"
+            />
+            Delete
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
 `;

package/src/roles/components/NewRole.js

@@ -2,21 +2,29 @@ import React from "react";
 import PropTypes from "prop-types";
 import { Header, Icon, Container, Segment } from "semantic-ui-react";
 import { connect } from "react-redux";
-import { FormattedMessage } from "react-intl";
+import { FormattedMessage, useIntl } from "react-intl";
 import { createRole } from "../routines";
 import RoleForm from "./RoleForm";
 
-const NewRole = ({ createRole }) => (
-  <Container text as={Segment}>
-    <Header as="h2">
-      <Icon name="student" />
-      <Header.Content>
-        <FormattedMessage id="role.new.role" />
-      </Header.Content>
-    </Header>
-    <RoleForm onSubmit={createRole} />
-  </Container>
-);
+const NewRole = ({ createRole }) => {
+  const { formatMessage } = useIntl();
+  return (
+    <Container text as={Segment}>
+      <Header as="h2">
+        <Icon
+          name={formatMessage({
+            id: "role.header.icon",
+            defaultMessage: "student",
+          })}
+        />
+        <Header.Content>
+          <FormattedMessage id="role.new.role" />
+        </Header.Content>
+      </Header>
+      <RoleForm onSubmit={createRole} />
+    </Container>
+  );
+};
 
 NewRole.propTypes = {
   createRole: PropTypes.func,

package/src/roles/components/Role.js

@@ -1,7 +1,7 @@
 import _ from "lodash/fp";
 import React from "react";
 import PropTypes from "prop-types";
-import { FormattedMessage } from "react-intl";
+import { FormattedMessage, useIntl } from "react-intl";
 import { Link } from "react-router-dom";
 import { connect } from "react-redux";
 import {
@@ -60,8 +60,15 @@ class RoleName extends React.Component {
   }
 }
 
-export const Role = ({ id, name, is_default, permissionGroups, updateRole }) =>
-  id && permissionGroups ? (
+export const Role = ({
+  id,
+  name,
+  is_default,
+  permissionGroups,
+  updateRole,
+}) => {
+  const { formatMessage } = useIntl();
+  return id && permissionGroups ? (
     <>
       <Breadcrumb>
         <Breadcrumb.Section as={Link} to={ROLES} active={false}>
@@ -72,7 +79,12 @@ export const Role = ({ id, name, is_default, permissionGroups, updateRole }) =>
       </Breadcrumb>
       <Segment>
         <Header as="h2">
-          <Icon name="student" />
+          <Icon
+            name={formatMessage({
+              id: "role.header.icon",
+              defaultMessage: "student",
+            })}
+          />
           <Header.Content>
             <RoleName
               name={name}
@@ -102,6 +114,7 @@ export const Role = ({ id, name, is_default, permissionGroups, updateRole }) =>
       </Segment>
     </>
   ) : null;
+};
 
 Role.propTypes = {
   id: PropTypes.number,

package/src/roles/components/Roles.js

@@ -2,33 +2,42 @@ import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { Button, Header, Segment, Icon } from "semantic-ui-react";
-import { FormattedMessage } from "react-intl";
+import { FormattedMessage, useIntl } from "react-intl";
 import { Link } from "react-router-dom";
 import { linkTo } from "@truedat/core/routes";
 import RoleCards from "./RoleCards";
 
-export const Roles = ({ roles, rolesLoading }) => (
-  <Segment loading={rolesLoading}>
-    <Header as="h2">
-      <Button
-        primary
-        floated="right"
-        as={Link}
-        to={linkTo.ROLES_NEW()}
-        content={<FormattedMessage id="roles.create" />}
-      />
-      <Icon circular name="student" />
-      <Header.Content>
-        <FormattedMessage id="roles.header" />
-        <Header.Subheader>
-          <FormattedMessage id="roles.subheader" />
-        </Header.Subheader>
-      </Header.Content>
-    </Header>
+export const Roles = ({ roles, rolesLoading }) => {
+  const { formatMessage } = useIntl();
+  return (
+    <Segment loading={rolesLoading}>
+      <Header as="h2">
+        <Button
+          primary
+          floated="right"
+          as={Link}
+          to={linkTo.ROLES_NEW()}
+          content={<FormattedMessage id="roles.create" />}
+        />
+        <Icon
+          circular
+          name={formatMessage({
+            id: "roles.header.icon",
+            defaultMessage: "student",
+          })}
+        />
+        <Header.Content>
+          <FormattedMessage id="roles.header" />
+          <Header.Subheader>
+            <FormattedMessage id="roles.subheader" />
+          </Header.Subheader>
+        </Header.Content>
+      </Header>
 
-    <RoleCards roles={roles} />
-  </Segment>
-);
+      <RoleCards roles={roles} />
+    </Segment>
+  );
+};
 
 Roles.propTypes = {
   roles: PropTypes.array,

package/src/roles/components/__tests__/Role.spec.js

@@ -1,6 +1,10 @@
 import React from "react";
-import { shallow } from "enzyme";
-import { Role } from "../Role";
+import { render } from "@truedat/test/render";
+import Role from "../Role";
+
+const renderOpts = {
+  state: { deleteRole: jest.fn(), updateRole: jest.fn() },
+};
 
 describe("<Role />", () => {
   const id = 1;
@@ -10,7 +14,7 @@ describe("<Role />", () => {
   const props = { id, name, rolePermissions, permissionGroups };
 
   it("matches the latest snapshot", () => {
-    const wrapper = shallow(<Role {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const { container } = render(<Role {...props} />, renderOpts);
+    expect(container).toMatchSnapshot();
   });
 });

package/src/roles/components/__tests__/__snapshots__/Role.spec.js.snap

@@ -1,83 +1,63 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<Role /> matches the latest snapshot 1`] = `
-<Fragment>
-  <Breadcrumb>
-    <BreadcrumbSection
-      active={false}
-      as={
-        {
-          "$$typeof": Symbol(react.forward_ref),
-          "displayName": "Link",
-          "propTypes": {
-            "innerRef": [Function],
-            "onClick": [Function],
-            "replace": [Function],
-            "target": [Function],
-            "to": [Function],
-          },
-          "render": [Function],
-        }
-      }
-      to="/roles"
+<div>
+  <div
+    class="ui breadcrumb"
+  >
+    <a
+      class="section"
+      href="/roles"
     >
-      <MemoizedFormattedMessage
-        id="navigation.members.roles"
-      />
-    </BreadcrumbSection>
-    <BreadcrumbDivider
-      icon="right angle"
+      Roles
+    </a>
+    <i
+      aria-hidden="true"
+      class="right angle icon divider"
     />
-    <BreadcrumbSection
-      active={true}
+    <div
+      class="active section"
     >
       Data Steward
-    </BreadcrumbSection>
-  </Breadcrumb>
-  <Segment>
-    <Header
-      as="h2"
+    </div>
+  </div>
+  <div
+    class="ui segment"
+  >
+    <h2
+      class="ui header"
     >
-      <Icon
-        as="i"
-        name="student"
+      <i
+        aria-hidden="true"
+        class="student icon"
       />
-      <HeaderContent>
-        <RoleName
-          name="Data Steward"
-          updateName={[Function]}
-        />
-        <HeaderSubheader>
-          <MemoizedFormattedMessage
-            id="role.subheader"
-          />
-        </HeaderSubheader>
-      </HeaderContent>
-    </Header>
-    <Checkbox
-      label={
-        {
-          "children": <Memo(MemoizedFormattedMessage)
-            id="roles.default"
-          />,
-        }
-      }
-      onChange={[Function]}
-      type="checkbox"
-    />
-    <Connect(PermissionGroup)
-      key="0"
-      name="Group1"
-      permissions={
-        [
-          {
-            "id": 1,
-            "name": "perm1",
-          },
-        ]
-      }
-      roleId={1}
-    />
-  </Segment>
-</Fragment>
+      <div
+        class="content"
+      >
+        <span>
+          Data Steward
+        </span>
+        <div
+          class="sub header"
+        >
+          Role
+        </div>
+      </div>
+    </h2>
+    <div
+      class="ui checkbox"
+    >
+      <input
+        class="hidden"
+        readonly=""
+        tabindex="0"
+        type="checkbox"
+        value=""
+      />
+      <label>
+        Default
+      </label>
+    </div>
+  </div>
+</div>
 `;

package/src/users/components/Password.js

@@ -2,10 +2,9 @@ import _ from "lodash/fp";
 import React from "react";
 import PropTypes from "prop-types";
 import { Container, Header, Icon, Segment } from "semantic-ui-react";
-import { FormattedMessage } from "react-intl";
+import { FormattedMessage, useIntl } from "react-intl";
 import { connect } from "react-redux";
 import { useForm, Controller } from "react-hook-form";
-import { useIntl } from "react-intl";
 import { Button, Form } from "semantic-ui-react";
 import { HistoryBackButton } from "@truedat/core/components";
 import { updatePassword } from "../routines";
@@ -50,7 +49,13 @@ export const Password = ({
   return (
     <Container text as={Segment}>
       <Header as="h2">
-        <Icon name="user" circular />
+        <Icon
+          circular
+          name={formatMessage({
+            id: "user.password.header.icon",
+            defaultMessage: "user",
+          })}
+        />
         <Header.Content>
           {_.isEmpty(userName) ? (
             <FormattedMessage id="user.password.header" />

package/src/users/components/User.js

@@ -3,21 +3,28 @@ import React from "react";
 import PropTypes from "prop-types";
 import { Divider, Header, Grid, Icon, Segment } from "semantic-ui-react";
 import { connect } from "react-redux";
-import { FormattedMessage } from "react-intl";
+import { FormattedMessage, useIntl } from "react-intl";
 import UserActions from "./UserActions";
 import UserAcls from "./UserAcls";
 import UserBreadcrumbs from "./UserBreadcrumbs";
 import UserGroupAcls from "./UserGroupAcls";
 
-export const User = ({ user }) =>
-  _.isEmpty(user) ? null : (
+export const User = ({ user }) => {
+  const { formatMessage } = useIntl();
+  return _.isEmpty(user) ? null : (
     <>
       <UserBreadcrumbs name={user.user_name} />
       <Segment>
         <Grid>
           <Grid.Column width={8}>
             <Header floated="left" as="h2">
-              <Icon name="user" circular />
+              <Icon
+                circular
+                name={formatMessage({
+                  id: "users.header.icon",
+                  defaultMessage: "users",
+                })}
+              />
               <Header.Content>
                 {user.user_name}
                 <Header.Subheader>
@@ -43,6 +50,7 @@ export const User = ({ user }) =>
       </Segment>
     </>
   );
+};
 
 User.propTypes = {
   user: PropTypes.object,

package/src/users/components/UsersAndGroups.js

@@ -2,32 +2,41 @@ import React from "react";
 import { connect } from "react-redux";
 import { Route, Switch } from "react-router-dom";
 import { Header, Icon, Segment } from "semantic-ui-react";
-import { FormattedMessage } from "react-intl";
+import { FormattedMessage, useIntl } from "react-intl";
 import { GROUPS, USERS } from "@truedat/core/routes";
 import GroupCards from "../../groups/components/GroupCards";
 import UserCards from "./UserCards";
 import UserTabs from "./UserTabs";
 
-export const UsersAndGroups = () => (
-  <Segment>
-    <Header as="h2">
-      <Icon name="users" circular />
-      <Header.Content>
-        <FormattedMessage id="users.header" />
-        <Header.Subheader>
-          <FormattedMessage id="users.subheader" />
-        </Header.Subheader>
-      </Header.Content>
-    </Header>
-    <UserTabs />
-    <Segment attached="bottom">
-      <Switch>
-        <Route path={USERS} render={() => <UserCards />} exact />
-        <Route path={GROUPS} render={() => <GroupCards />} exact />
-      </Switch>
+export const UsersAndGroups = () => {
+  const { formatMessage } = useIntl();
+  return (
+    <Segment>
+      <Header as="h2">
+        <Icon
+          circular
+          name={formatMessage({
+            id: "users.header.icon",
+            defaultMessage: "users",
+          })}
+        />
+        <Header.Content>
+          <FormattedMessage id="users.header" />
+          <Header.Subheader>
+            <FormattedMessage id="users.subheader" />
+          </Header.Subheader>
+        </Header.Content>
+      </Header>
+      <UserTabs />
+      <Segment attached="bottom">
+        <Switch>
+          <Route path={USERS} render={() => <UserCards />} exact />
+          <Route path={GROUPS} render={() => <GroupCards />} exact />
+        </Switch>
+      </Segment>
     </Segment>
-  </Segment>
-);
+  );
+};
 
 const mapStateToProps = ({ usersLoading }) => ({ usersLoading });
 

package/src/users/components/__tests__/User.spec.js

@@ -1,6 +1,6 @@
 import React from "react";
-import { shallow } from "enzyme";
-import { User } from "../User";
+import { render } from "@truedat/test/render";
+import User from "../User";
 
 describe("<User />", () => {
   const user = {
@@ -8,12 +8,15 @@ describe("<User />", () => {
     user_name: "joe",
     role: "admin",
     full_name: "Joe Bloggs",
-    email: "joe@bloggs.net"
+    email: "joe@bloggs.net",
+  };
+  const renderOpts = {
+    state: { user },
   };
-  const props = { user };
 
   it("matches the latest snapshot", () => {
-    const wrapper = shallow(<User {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const { container, debug } = render(<User />, renderOpts);
+    debug();
+    expect(container).toMatchSnapshot();
   });
 });

package/src/users/components/__tests__/UsersAndGroups.spec.js

@@ -1,10 +1,10 @@
 import React from "react";
-import { shallow } from "enzyme";
+import { render } from "@truedat/test/render";
 import { UsersAndGroups } from "../UsersAndGroups";
 
 describe("<UsersAndGroups />", () => {
   it("matches the latest snapshot", () => {
-    const wrapper = shallow(<UsersAndGroups />);
-    expect(wrapper).toMatchSnapshot();
+    const { container } = render(<UsersAndGroups />);
+    expect(container).toMatchSnapshot();
   });
 });

package/src/users/components/__tests__/__snapshots__/User.spec.js.snap

@@ -1,54 +1,123 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<User /> matches the latest snapshot 1`] = `
-<Fragment>
-  <UserBreadcrumbs
-    name="joe"
-  />
-  <Segment>
-    <Grid>
-      <GridColumn
-        width={8}
+<div>
+  <div
+    class="ui breadcrumb"
+  >
+    <a
+      class="section"
+      href="/users"
+    >
+      Users
+    </a>
+    <i
+      aria-hidden="true"
+      class="right angle icon divider"
+    />
+    <div
+      class="active section"
+    >
+      joe
+    </div>
+  </div>
+  <div
+    class="ui segment"
+  >
+    <div
+      class="ui grid"
+    >
+      <div
+        class="eight wide column"
       >
-        <Header
-          as="h2"
-          floated="left"
+        <h2
+          class="ui left floated header"
         >
-          <Icon
-            as="i"
-            circular={true}
-            name="user"
+          <i
+            aria-hidden="true"
+            class="users circular icon"
           />
-          <HeaderContent>
+          <div
+            class="content"
+          >
             joe
-            <HeaderSubheader>
-              <MemoizedFormattedMessage
-                id="user.type.admin"
-              />
-            </HeaderSubheader>
-          </HeaderContent>
-        </Header>
-      </GridColumn>
-      <GridColumn
-        textAlign="right"
-        width={8}
+            <div
+              class="sub header"
+            >
+              Administrator
+            </div>
+          </div>
+        </h2>
+      </div>
+      <div
+        class="right aligned eight wide column"
       >
-        <Connect(UserActions) />
-      </GridColumn>
-      <GridColumn
-        width={8}
+        <div
+          aria-expanded="false"
+          class="ui floating dropdown button icon group-actions"
+          role="listbox"
+          tabindex="0"
+        >
+          <i
+            aria-hidden="true"
+            class="ellipsis vertical icon"
+          />
+          <div
+            class="left menu transition"
+          >
+            <a
+              aria-checked="false"
+              aria-selected="false"
+              class="item"
+              href="/users/1/edit"
+              role="option"
+              style="pointer-events: all;"
+            >
+              <i
+                aria-hidden="true"
+                class="edit icon"
+              />
+              Edit
+            </a>
+            <a
+              aria-checked="false"
+              aria-selected="false"
+              class="item"
+              href="/users/1/password"
+              role="option"
+              style="pointer-events: all;"
+            >
+              <i
+                aria-hidden="true"
+                class="unlock alternate icon"
+              />
+              Change password
+            </a>
+            <button
+              class="ui button"
+            >
+              <i
+                aria-hidden="true"
+                class="trash icon"
+              />
+              Delete
+            </button>
+          </div>
+        </div>
+      </div>
+      <div
+        class="eight wide column"
       >
         Joe Bloggs
         <br />
         joe@bloggs.net
         <br />
-        <Divider
-          hidden={true}
+        
+        <div
+          class="ui hidden divider"
         />
-        <Connect(UserAcls) />
-        <Connect(UserGroupAcls) />
-      </GridColumn>
-    </Grid>
-  </Segment>
-</Fragment>
+      </div>
+    </div>
+  </div>
+</div>
 `;

package/src/users/components/__tests__/__snapshots__/UsersAndGroups.spec.js.snap

@@ -1,42 +1,47 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<UsersAndGroups /> matches the latest snapshot 1`] = `
-<Segment>
-  <Header
-    as="h2"
+<div>
+  <div
+    class="ui segment"
   >
-    <Icon
-      as="i"
-      circular={true}
-      name="users"
-    />
-    <HeaderContent>
-      <MemoizedFormattedMessage
-        id="users.header"
-      />
-      <HeaderSubheader>
-        <MemoizedFormattedMessage
-          id="users.subheader"
-        />
-      </HeaderSubheader>
-    </HeaderContent>
-  </Header>
-  <UserTabs />
-  <Segment
-    attached="bottom"
-  >
-    <Switch>
-      <Route
-        exact={true}
-        path="/users"
-        render={[Function]}
+    <h2
+      class="ui header"
+    >
+      <i
+        aria-hidden="true"
+        class="users circular icon"
       />
-      <Route
-        exact={true}
-        path="/groups"
-        render={[Function]}
-      />
-    </Switch>
-  </Segment>
-</Segment>
+      <div
+        class="content"
+      >
+        Users
+        <div
+          class="sub header"
+        >
+          Manage users and groups
+        </div>
+      </div>
+    </h2>
+    <div
+      class="ui pointing secondary top attached tabular menu"
+    >
+      <a
+        class="item"
+        href="/users"
+      >
+        Users
+      </a>
+      <a
+        class="item"
+        href="/groups"
+      >
+        Groups
+      </a>
+    </div>
+    <div
+      class="ui bottom attached segment"
+    />
+  </div>
+</div>
 `;