@truedat/auth 8.14.4 → 8.14.5

package/src/styles/UserCard.less

@@ -1,14 +1,8 @@
 .td-card--user {
   --uc-bottom-right-radius: 1.5rem;
   --uc-bottom-left-radius: 0.25rem;
-  --uc-top-left-radius: 1.25rem;
+  --uc-top-left-radius: 0;
   --uc-top-right-radius: 0.5rem;
-  --uc-motion-duration: 300ms;
-  --uc-color-motion-duration: 140ms;
-  --uc-highlight-motion-duration: 180ms;
-  --uc-actions-motion-duration: 420ms;
-  --uc-actions-hide-delay: 160ms;
-  --uc-motion-easing: cubic-bezier(0.22, 1, 0.36, 1);
   width: 330px;
 
   @media (max-width: 767px) {
@@ -17,53 +11,14 @@
   }
 }
 
-.td-card--user::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  border-left: 8px solid var(--card-accent-color);
-  border-radius: inherit;
-  opacity: 0;
-  pointer-events: none;
-  transform: translateX(-8px);
-  transition:
-    opacity var(--uc-motion-duration) var(--uc-motion-easing),
-    transform var(--uc-motion-duration) var(--uc-motion-easing);
-  z-index: 1;
-}
-
-.td-card--user:hover::before,
-.td-card--user:focus-within::before {
-  opacity: 1;
-  transform: translateX(0);
-}
-
 .ui.card.td-card-base.td-card--user {
-  --uc-action-tint: var(--card-accent-soft, rgba(100, 116, 139, 0.07));
-  min-height: 160px;
-  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.15);
-
-  &::after {
-    content: "";
-    position: absolute;
-    inset: 0;
-    width: auto;
-    height: auto;
-    border-radius: inherit;
-    background: linear-gradient(270deg, var(--uc-action-tint), transparent 75%);
-    opacity: 0;
-    pointer-events: none;
-    transition: opacity var(--uc-highlight-motion-duration) ease;
-  }
-
-  &:hover,
-  &:focus-within {
-    box-shadow: 0 5px 14px rgba(15, 23, 42, 0.18);
+  min-height: 152px;
+}
 
-    &::after {
-      opacity: 1;
-    }
-  }
+.td-card--user:hover .uc-avatar,
+.td-card--user:focus-within .uc-avatar {
+  background: @primaryColor;
+  color: #fff;
 }
 
 .td-card--user .uc-card-link::after {
@@ -87,34 +42,13 @@
   flex-direction: column;
   align-items: flex-end;
   gap: 0.25rem;
-  opacity: 0;
-  transform: translateX(0.45rem);
   visibility: hidden;
-  transition:
-    opacity var(--uc-actions-motion-duration) var(--uc-motion-easing)
-      var(--uc-actions-hide-delay),
-    transform var(--uc-actions-motion-duration) var(--uc-motion-easing)
-      var(--uc-actions-hide-delay),
-    visibility 0ms linear
-      calc(var(--uc-actions-motion-duration) + var(--uc-actions-hide-delay));
   z-index: 12;
-  pointer-events: none;
 }
 
 .td-card--user:hover .uc-actions,
-.td-card--user:focus-within .uc-actions,
-.td-card--user .uc-actions:hover,
-.td-card--user .uc-actions:focus-within {
-  opacity: 1;
-  transform: translateX(0);
+.td-card--user:focus-within .uc-actions {
   visibility: visible;
-  pointer-events: auto;
-  transition-delay: 0ms, 0ms, 0ms;
-}
-
-.td-card--user .uc-actions:hover,
-.td-card--user .uc-actions:focus-within {
-  --uc-action-color: #64748b;
 }
 
 .td-card--user .uc-action-btn {
@@ -125,36 +59,41 @@
   max-width: 1.75rem;
   height: 1.75rem;
   padding: 0;
-  background: #ffffff;
+  background: #fff;
   border: 1px solid #64748b;
+  border-right: 0;
   border-radius: 0.5rem 0 0 0.5rem;
-  border-right-width: 0;
-  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.14);
-  color: var(--uc-action-color, #9ca3af);
-  backface-visibility: hidden;
-  transition:
-    max-width var(--uc-actions-motion-duration) var(--uc-motion-easing),
-    padding var(--uc-actions-motion-duration) var(--uc-motion-easing),
-    color var(--uc-color-motion-duration) ease 0ms,
-    background-color var(--uc-color-motion-duration) ease 0ms,
-    border-color var(--uc-color-motion-duration) ease 0ms,
-    box-shadow var(--uc-color-motion-duration) ease 0ms;
+  color: #64748b;
   cursor: pointer;
   overflow: hidden;
   white-space: nowrap;
+  transition:
+    max-width 420ms cubic-bezier(0.22, 1, 0.36, 1),
+    padding 420ms cubic-bezier(0.22, 1, 0.36, 1);
 
   &:hover,
   &:focus-visible {
     max-width: 14rem;
     padding: 0 1rem 0 0.08rem;
-    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.14);
+    .uc-action-label {
+      max-width: 11rem;
+      opacity: 1;
+    }
+    background: var(--card-accent-color);
+    border-color: var(--card-accent-color);
+    color: #fff;
+  }
+
+  &:focus-visible {
+    outline: 2px solid currentColor;
+    outline-offset: -3px;
   }
 
   i.icon {
     flex: 0 0 1.75rem;
-    margin: 0;
     width: 1.75rem;
-    font-size: 0.8rem;
+    margin: 0;
+    font-size: 1rem;
     line-height: 1;
   }
 }
@@ -167,62 +106,20 @@
   font-weight: 800;
   line-height: 1;
   transition:
-    max-width var(--uc-actions-motion-duration) var(--uc-motion-easing),
-    opacity var(--uc-actions-motion-duration) var(--uc-motion-easing);
-}
-
-.td-card--user .uc-action-btn:hover .uc-action-label,
-.td-card--user .uc-action-btn:focus-visible .uc-action-label {
-  max-width: 11rem;
-  opacity: 1;
-}
-
-.td-card--user .uc-action-btn--key:hover,
-.td-card--user .uc-action-btn--key:focus-visible {
-  color: #7c2d12;
-  background-color: #fef3c7;
-  border-color: rgba(251, 146, 60, 0.72);
-}
-
-.ui.card.td-card-base.td-card--user:has(.uc-action-btn--key:hover),
-.ui.card.td-card-base.td-card--user:has(.uc-action-btn--key:focus-visible) {
-  border-color: rgba(217, 119, 6, 0.7);
-  --uc-action-tint: rgba(217, 119, 6, 0.09);
-  transition:
-    border-color var(--uc-color-motion-duration) ease,
-    box-shadow var(--uc-color-motion-duration) ease;
-}
-
-.td-card--user .uc-action-btn:not(.uc-action-btn--key):hover,
-.td-card--user .uc-action-btn:not(.uc-action-btn--key):focus-visible {
-  color: #1d4ed8;
-  background-color: #e8f1ff;
-  border-color: rgba(37, 99, 235, 0.62);
-}
-
-.ui.card.td-card-base.td-card--user:has(
-    .uc-action-btn:not(.uc-action-btn--key):hover
-  ),
-.ui.card.td-card-base.td-card--user:has(
-    .uc-action-btn:not(.uc-action-btn--key):focus-visible
-  ) {
-  border-color: rgba(37, 99, 235, 0.7);
-  --uc-action-tint: rgba(37, 99, 235, 0.09);
-  transition:
-    border-color var(--uc-color-motion-duration) ease,
-    box-shadow var(--uc-color-motion-duration) ease;
+    max-width 420ms cubic-bezier(0.22, 1, 0.36, 1),
+    opacity 420ms ease;
 }
 
 .td-card--user > .content {
-  padding-top: 1.45em !important;
-  padding-bottom: 1.1em !important;
+  padding-top: 1.25em !important;
+  padding-bottom: 1em !important;
 }
 
 .td-card--user .uc-summary {
   position: relative;
   display: flex;
   align-items: center;
-  gap: 0.75rem;
+  gap: 0.625rem;
   padding-left: 0.35rem;
   padding-right: 3rem;
   min-height: 3rem;
@@ -230,21 +127,6 @@
   margin-bottom: 0.3rem;
 }
 
-.td-card--user .uc-summary::before {
-  content: "";
-  position: absolute;
-  left: 0.35rem;
-  top: 50%;
-  width: 2.75rem;
-  height: 2.75rem;
-  border-radius: 50%;
-  background: var(--card-accent-color);
-  transform: translateY(-50%);
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity var(--uc-motion-duration) var(--uc-motion-easing);
-}
-
 .td-card--user .uc-avatar {
   position: relative;
   width: 2.75rem;
@@ -260,21 +142,8 @@
   font-size: 0.95rem;
   text-transform: uppercase;
   transition:
-    background var(--uc-motion-duration) var(--uc-motion-easing),
-    color var(--uc-motion-duration) var(--uc-motion-easing),
-    transform var(--uc-motion-duration) var(--uc-motion-easing);
-}
-
-.td-card--user:hover .uc-summary::before,
-.td-card--user:focus-within .uc-summary::before {
-  opacity: 1;
-}
-
-.td-card--user:hover .uc-avatar,
-.td-card--user:focus-within .uc-avatar {
-  background: var(--card-secondary-color);
-  color: #ffffff;
-  transform: translate(0.3rem, -0.2rem);
+    background-color 200ms ease,
+    color 200ms ease;
 }
 
 .td-card--user .uc-name {
@@ -287,35 +156,26 @@
   overflow-wrap: anywhere;
   word-break: normal;
   margin: 0;
-  transition:
-    color var(--uc-motion-duration) var(--uc-motion-easing),
-    transform var(--uc-motion-duration) var(--uc-motion-easing);
-}
-
-.td-card--user:hover .uc-name,
-.td-card--user:focus-within .uc-name {
-  color: var(--card-secondary-color);
-  transform: translate(0.3rem, -0.2rem);
 }
 
 .td-card--user .uc-meta-grid {
   position: relative;
   display: grid;
-  grid-template-columns: 0.875rem minmax(0, 1fr);
+  grid-template-columns: 1rem minmax(0, 1fr);
   grid-auto-rows: minmax(1rem, auto);
   align-items: center;
   column-gap: 0.4rem;
   row-gap: 0.25rem;
   padding-left: 0.85rem;
   padding-right: 2.75rem;
-  margin-top: 1.65rem;
+  margin-top: 1.25rem;
   min-height: 2.2rem;
 }
 
 .td-card--user .uc-meta-grid:not(:empty)::before {
   content: "";
   position: absolute;
-  top: -0.8rem;
+  top: -0.6rem;
   left: 0.35rem;
   right: 2.75rem;
   border-top: 1px solid #e2e8f0;
@@ -324,16 +184,16 @@
 
 .td-card--user .uc-meta-grid > i.icon {
   margin: 0;
-  width: 0.875rem;
+  width: 1rem;
   color: #64748b;
-  font-size: 0.75rem;
+  font-size: 0.875rem;
   line-height: 1;
 }
 
 .td-card--user .uc-username {
   display: block;
   min-width: 0;
-  font-size: 11px;
+  font-size: 12px;
   color: #475569;
   font-weight: 600;
   line-height: 1.2;
@@ -342,14 +202,13 @@
   text-overflow: ellipsis;
   margin: 0;
   overflow-wrap: anywhere;
-  transition: color var(--uc-motion-duration) var(--uc-motion-easing);
 }
 
 .td-card--user .uc-email,
 .td-card--user .uc-external-id {
   display: block;
   min-width: 0;
-  font-size: 11px;
+  font-size: 12px;
   color: #64748b;
   font-weight: 500;
   line-height: 1.2;
@@ -358,7 +217,6 @@
   overflow: hidden;
   text-overflow: ellipsis;
   overflow-wrap: anywhere;
-  transition: color var(--uc-motion-duration) var(--uc-motion-easing);
 }
 
 .td-card--user .uc-external-id {
@@ -420,24 +278,15 @@
   white-space: nowrap;
   pointer-events: auto;
   cursor: pointer;
-  transition:
-    background-color var(--uc-motion-duration) var(--uc-motion-easing),
-    color var(--uc-motion-duration) var(--uc-motion-easing);
   z-index: 18;
 }
 
 .td-card--user > .ui.label.overlapping.groups-badge > i.icon {
   margin: 0;
-  font-size: 0.9rem;
+  font-size: 1rem;
   line-height: 1;
 }
 
-.td-card--user:hover > .ui.label.overlapping.groups-badge,
-.td-card--user:focus-within > .ui.label.overlapping.groups-badge {
-  background: var(--card-accent-color) !important;
-  color: #ffffff !important;
-}
-
 .td-card--user > .ui.label.overlapping.groups-badge::before,
 .td-card--user > .ui.label.overlapping.groups-badge::after {
   display: none;
@@ -448,31 +297,18 @@
   overflow: visible;
   border: 1px solid var(--card-groups-popup-border-color);
   border-radius: 1rem;
-  box-shadow: 0 18px 38px -18px rgba(15, 23, 42, 0.36);
+  box-shadow: none;
+  animation: none;
+  transition: none;
   background: var(--card-groups-popup-background);
   color: var(--card-groups-popup-text-color);
-  transform-origin: top center;
 }
 
 .ui.popup.uc-groups-popover::before {
   background: var(--card-groups-popup-background);
-  box-shadow: -1px -1px 0 0 var(--card-groups-popup-border-color);
-}
-
-.ui.popup.uc-groups-popover.visible {
-  animation: uc-groups-popover-in 180ms var(--uc-motion-easing) both;
-}
-
-@keyframes uc-groups-popover-in {
-  from {
-    opacity: 0;
-    transform: translateY(-4px) scale(0.97);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-  }
+  box-shadow: none;
+  border-left: 1px solid var(--card-groups-popup-border-color);
+  border-top: 1px solid var(--card-groups-popup-border-color);
 }
 
 .uc-groups-popup {
@@ -500,7 +336,7 @@
 
 .uc-groups-popup__header > i.icon {
   margin: 0;
-  font-size: 0.95rem;
+  font-size: 1.0625rem;
   line-height: 1;
 }
 
@@ -552,10 +388,7 @@
 
 @media (hover: none), (pointer: coarse) {
   .td-card--user .uc-actions {
-    opacity: 1;
     visibility: visible;
-    pointer-events: auto;
-    transform: none;
   }
   .td-card--user .uc-action-btn {
     min-width: 2.75rem;
@@ -568,15 +401,16 @@
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  .ui.card.td-card-base.td-card--user {
-    --uc-motion-duration: 0ms;
-    --uc-color-motion-duration: 0ms;
-    --uc-highlight-motion-duration: 0ms;
-    --uc-actions-motion-duration: 0ms;
-    --uc-actions-hide-delay: 0ms;
-    --card-motion-duration: 0ms;
+  .td-card--user .uc-avatar,
+  .td-card--user .uc-action-btn,
+  .td-card--user .uc-action-label {
+    transition: none;
   }
-  .ui.popup.uc-groups-popover.visible {
-    animation: none;
+  .ui.card.td-card-base.td-card--user,
+  .ui.card.td-card-base.td-card--user:hover,
+  .ui.card.td-card-base.td-card--user:focus-within,
+  .ui.card.td-card-base.td-card--user:active {
+    transition: none;
+    transform: none;
   }
 }

package/src/styles/UserModals.less

@@ -3,6 +3,11 @@
 }
 
 .ui.modal.true-modal.user-modal {
+  > .content i.icon,
+  > .actions .button > i.icon {
+    font-size: 1.125em;
+  }
+
   .um-user-type-selector {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -597,7 +602,7 @@
 
 .ui.modal.true-modal.user-modal--create {
   > .header:not(.ui) {
-    background: var(--td-modal-create-header-background, #ed5c17);
+    background: var(--td-modal-create-header-background, @primaryColor);
   }
   .um-section--password > .um-form-grid {
     padding-bottom: 0;

package/src/styles/Users.less

@@ -3,11 +3,14 @@
   border: 0;
   border-radius: 0;
   box-shadow: none;
-  margin-top: 0.8rem;
+  margin-top: 0;
   background: transparent;
 }
 
 .users-role-accordion.ui.styled.accordion .title.users-role-title {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
   margin-bottom: 0.28rem;
   border: 0;
   border-bottom: 1px solid #d1d5db;
@@ -19,6 +22,8 @@
 
 .users-role-toggle {
   display: block;
+  flex: 1;
+  min-width: 0;
   width: 100%;
   margin: 0;
   padding: 0;
@@ -64,7 +69,7 @@
 .users-role-accordion.ui.styled.accordion
   .users-role-title-header.ui.header
   .content {
-  padding: 1rem 0 !important;
+  padding: 0.625rem 0 !important;
 }
 
 .users-role-count.ui.circular.label {
@@ -151,7 +156,7 @@
   flex-wrap: wrap;
   align-items: center;
   gap: 0.75rem;
-  margin-bottom: 0.75rem;
+  margin-bottom: 0.5rem;
 
   > .ui.input {
     flex: 1 1 12rem;
@@ -175,16 +180,39 @@
   flex-wrap: wrap;
   align-items: center;
   gap: 0.75rem;
-  margin-bottom: 0.75rem;
+  margin-bottom: 0.5rem;
 }
 
-.users-toolbar-actions,
-.users-view-buttons {
+.users-toolbar-actions {
   display: flex;
   align-items: center;
   gap: 0.75rem;
 }
 
+.ui.buttons.users-view-buttons {
+  flex-shrink: 0;
+
+  > .ui.button {
+    margin: 0;
+    border-radius: 0;
+
+    &:first-child {
+      border-radius: 4px 0 0 4px;
+    }
+
+    &:last-child {
+      border-radius: 0 4px 4px 0;
+    }
+
+    &:focus-visible {
+      position: relative;
+      z-index: 1;
+      outline: 2px solid @primaryColor;
+      outline-offset: 2px;
+    }
+  }
+}
+
 .users-toolbar-actions {
   margin-left: auto;
   flex-wrap: wrap;
@@ -193,7 +221,7 @@
 .users-results {
   display: flex;
   justify-content: flex-end;
-  margin-bottom: 0.75rem;
+  margin-bottom: 0.25rem;
 
   > .ui.label {
     margin: 0;
@@ -201,6 +229,11 @@
   }
 }
 
+.users-role-title > .users-results {
+  flex-shrink: 0;
+  margin: 0;
+}
+
 .users-table-scroll {
   max-width: 100%;
   overflow-x: auto;

package/src/users/components/EditUserModal.js

@@ -83,7 +83,7 @@ export const EditUserModal = ({ user, groups, onClose }) => {
           key: "delete",
           content: formatMessage({
             id: "user.actions.delete.confirmation.header",
-            defaultMessage: "Eliminar usuario",
+            defaultMessage: "Delete user",
           }),
           icon: "trash alternate",
           basic: true,
@@ -94,14 +94,14 @@ export const EditUserModal = ({ user, groups, onClose }) => {
         },
         {
           key: "cancel",
-          content: formatMessage({ id: "actions.cancel" }),
+          content: formatMessage({ id: "actions.close" }),
           secondary: true,
           onClick: closeModal,
           disabled: isSubmitting,
         },
         {
           key: "save",
-          content: formatMessage({ id: "user.edit.submit" }),
+          content: formatMessage({ id: "actions.edit" }),
           primary: true,
           type: "submit",
           form: "edit-user-form",

package/src/users/components/UserAcls.js

@@ -6,6 +6,67 @@ import { useIntl } from "react-intl";
 import { DomainTooltip } from "@truedat/bg/taxonomy/components/DomainPath";
 import { getUserAcls } from "../selectors";
 import UserAclRow from "./UserAclRow";
+import UserGroupLink from "./UserGroupLink";
+
+export const UnifiedAcls = ({ acls, groupBy }) => {
+  const { formatMessage } = useIntl();
+  const grouped = Object.values(
+    _.groupBy((acl) =>
+      groupBy === "role"
+        ? acl.role
+        : JSON.stringify(
+            acl.groupId != null
+              ? ["group", acl.groupId]
+              : ["name", acl.group ?? null],
+          ),
+    )(acls),
+  ).sort(([left], [right]) =>
+    (groupBy === "role" ? left.role : left.group || "").localeCompare(
+      groupBy === "role" ? right.role : right.group || "",
+    ),
+  );
+  return _.isEmpty(acls) ? null : (
+    <Table>
+      <Table.Header>
+        <Table.Row>
+          {["role", "domain", "group"].map((column) => (
+            <Table.HeaderCell key={column}>
+              {formatMessage({ id: `user.acl.${column}` })}
+            </Table.HeaderCell>
+          ))}
+        </Table.Row>
+      </Table.Header>
+      <Table.Body>
+        {grouped.flatMap((entries, groupIndex) =>
+          _.sortBy(["role", "resource.name"])(entries).map((acl, index) => (
+            <Table.Row key={`${groupIndex}:${index}`}>
+              {(groupBy !== "role" || index === 0) && (
+                <Table.Cell rowSpan={groupBy === "role" ? entries.length : 1}>
+                  {acl.role}
+                </Table.Cell>
+              )}
+              <Table.Cell>
+                <DomainTooltip domain={acl.resource} />
+              </Table.Cell>
+              {(groupBy !== "group" || index === 0) && (
+                <Table.Cell rowSpan={groupBy === "group" ? entries.length : 1}>
+                  {acl.group && (
+                    <UserGroupLink id={acl.groupId} name={acl.group} />
+                  )}
+                </Table.Cell>
+              )}
+            </Table.Row>
+          )),
+        )}
+      </Table.Body>
+    </Table>
+  );
+};
+
+UnifiedAcls.propTypes = {
+  acls: PropTypes.array.isRequired,
+  groupBy: PropTypes.oneOf(["role", "group"]).isRequired,
+};
 
 export const UserAcls = ({ acls, groupBy }) => {
   const { formatMessage } = useIntl();