Permissions UI groundwork (#20433)

* keep click

* safari fixes

frontend/src/metabase/admin/permissions/components/PermissionsEditor/PermissionsEditor.styled.js

@@ -2,6 +2,7 @@ import styled from "@emotion/styled";
 
 export const PermissionsEditorRoot = styled.div`
   flex-grow: 1;
-  overflow: auto;
+  position: relative;
+  overflow: hidden;
   padding: 1rem 0 2rem 0;
 `;

frontend/src/metabase/admin/permissions/components/PermissionsEditor/PermissionsEditorContent.jsx

@@ -15,7 +15,8 @@ import { PermissionsEditorBreadcrumbs } from "./PermissionsEditorBreadcrumbs";
 import {
   EditorEmptyStateContainer,
   EditorFilterContainer,
-  EditorHeaderContainer,
+  PermissionEditorContentRoot,
+  PermissionTableWrapper,
 } from "./PermissionsEditorContent.styled";
 
 export const permissionEditorContentPropTypes = {
@@ -59,48 +60,47 @@ export function PermissionsEditorContent({
   }, [entities, debouncedFilter]);
 
   return (
-    <>
-      <EditorHeaderContainer>
-        <Subhead>
-          {title}{" "}
-          {breadcrumbs && (
-            <PermissionsEditorBreadcrumbs
-              items={breadcrumbs}
-              onBreadcrumbsItemSelect={onBreadcrumbsItemSelect}
-            />
-          )}
-        </Subhead>
+    <PermissionEditorContentRoot>
+      <Subhead>
+        {title}{" "}
+        {breadcrumbs && (
+          <PermissionsEditorBreadcrumbs
+            items={breadcrumbs}
+            onBreadcrumbsItemSelect={onBreadcrumbsItemSelect}
+          />
+        )}
+      </Subhead>
 
-        {description && <Text>{description}</Text>}
+      {description && <Text>{description}</Text>}
 
-        <EditorFilterContainer>
-          <TextInput
-            hasClearButton
-            colorScheme="admin"
-            placeholder={filterPlaceholder}
-            onChange={setFilter}
-            value={filter}
-            padding="sm"
-            borderRadius="md"
-            icon={<Icon name="search" size={16} />}
-          />
-        </EditorFilterContainer>
-      </EditorHeaderContainer>
+      <EditorFilterContainer>
+        <TextInput
+          hasClearButton
+          colorScheme="admin"
+          placeholder={filterPlaceholder}
+          onChange={setFilter}
+          value={filter}
+          padding="sm"
+          borderRadius="md"
+          icon={<Icon name="search" size={16} />}
+        />
+      </EditorFilterContainer>
 
-      <PermissionsTable
-        horizontalPadding="lg"
-        entities={filteredEntities || entities}
-        columns={columns}
-        onSelect={onSelect}
-        onChange={onChange}
-        onAction={onAction}
-        emptyState={
-          <EditorEmptyStateContainer>
-            <EmptyState message={t`Nothing here`} icon="all" />
-          </EditorEmptyStateContainer>
-        }
-      />
-    </>
+      <PermissionTableWrapper>
+        <PermissionsTable
+          entities={filteredEntities || entities}
+          columns={columns}
+          onSelect={onSelect}
+          onChange={onChange}
+          onAction={onAction}
+          emptyState={
+            <EditorEmptyStateContainer>
+              <EmptyState message={t`Nothing here`} icon="all" />
+            </EditorEmptyStateContainer>
+          }
+        />
+      </PermissionTableWrapper>
+    </PermissionEditorContentRoot>
   );
 }
 

frontend/src/metabase/admin/permissions/components/PermissionsEditor/PermissionsEditorContent.styled.tsx

 import styled from "@emotion/styled";
 
-export const EditorHeaderContainer = styled.div`
-  padding: 0 3rem;
+export const PermissionEditorContentRoot = styled.div`
+  padding-left: 40px;
 `;
 
 export const EditorFilterContainer = styled.div`
@@ -12,3 +12,9 @@ export const EditorFilterContainer = styled.div`
 export const EditorEmptyStateContainer = styled.div`
   margin-top: 7.5rem;
 `;
+
+export const PermissionTableWrapper = styled.div`
+  position: relative;
+  overflow-x: auto;
+  padding-bottom: 20px;
+`;

frontend/src/metabase/admin/permissions/components/PermissionsSelect/PermissionsSelect.jsx

@@ -2,8 +2,6 @@ import React, { useState, memo } from "react";
 import PropTypes from "prop-types";
 
 import PopoverWithTrigger from "metabase/components/PopoverWithTrigger";
-import { lighten } from "metabase/lib/colors";
-import Icon from "metabase/components/Icon";
 import Toggle from "metabase/core/components/Toggle";
 import Tooltip from "metabase/components/Tooltip";
 
@@ -21,6 +19,7 @@ import {
   ToggleLabel,
   WarningIcon,
   DisabledPermissionOption,
+  SelectedOption,
 } from "./PermissionsSelect.styled";
 
 const propTypes = {
@@ -66,7 +65,7 @@ export const PermissionsSelect = memo(function PermissionsSelect({
           iconColor="text-light"
         />
       ) : (
-        <PermissionsSelectOption {...selectedOption} />
+        <SelectedOption {...selectedOption} />
       )}
 
       {warning && (
@@ -74,13 +73,6 @@ export const PermissionsSelect = memo(function PermissionsSelect({
           <WarningIcon />
         </Tooltip>
       )}
-
-      <Icon
-        style={{ visibility: isDisabled ? "hidden" : "visible" }}
-        name="chevrondown"
-        size={16}
-        color={lighten("text-light", 0.15)}
-      />
     </PermissionsSelectRoot>
   );
 

frontend/src/metabase/admin/permissions/components/PermissionsSelect/PermissionsSelect.styled.jsx

@@ -13,6 +13,14 @@ export const PermissionsSelectRoot = styled.div`
   cursor: ${props => (props.isDisabled ? "default" : "pointer")};
 `;
 
+export const SelectedOption = styled(PermissionsSelectOption)`
+  transition: color 200ms;
+
+  &:hover {
+    color: ${color("accent7")};
+  }
+`;
+
 export const PermissionsSelectText = styled(Label)`
   flex-grow: 1;
 `;

frontend/src/metabase/admin/permissions/components/PermissionsTable/PermissionsTable.jsx

 import React, { useState, useRef } from "react";
 import PropTypes from "prop-types";
 
-import Label from "metabase/components/type/Label";
 import Tooltip from "metabase/components/Tooltip";
 import Modal from "metabase/components/Modal";
 import ConfirmContent from "metabase/components/ConfirmContent";
@@ -11,10 +10,12 @@ import {
   PermissionsTableRoot,
   PermissionsTableRow,
   PermissionsTableCell,
+  PermissionTableHeaderCell,
   EntityNameCell,
   EntityNameLink,
   EntityName,
   HintIcon,
+  ColumnName,
 } from "./PermissionsTable.styled";
 
 const propTypes = {
@@ -25,7 +26,6 @@ const propTypes = {
   onChange: PropTypes.func,
   onAction: PropTypes.func,
   colorScheme: PropTypes.oneOf(["default", "admin"]),
-  horizontalPadding: PropTypes.oneOf(["sm", "lg"]),
 };
 
 export function PermissionsTable({
@@ -34,7 +34,6 @@ export function PermissionsTable({
   onSelect,
   onAction,
   onChange,
-  horizontalPadding = "sm",
   colorScheme,
   emptyState = null,
 }) {
@@ -72,30 +71,24 @@ export function PermissionsTable({
   const hasItems = entities.length > 0;
 
   return (
-    <React.Fragment>
+    <>
       <PermissionsTableRoot data-testid="permission-table">
         <thead>
           <tr>
             {columns.map(column => {
               return (
-                <PermissionsTableCell
-                  key={column}
-                  horizontalPadding={horizontalPadding}
-                >
-                  <Label>{column}</Label>
-                </PermissionsTableCell>
+                <PermissionTableHeaderCell key={column}>
+                  <ColumnName>{column}</ColumnName>
+                </PermissionTableHeaderCell>
               );
             })}
-            <PermissionsTableCell
-              style={{ width: "100%", minWidth: "unset" }}
-            />
           </tr>
         </thead>
         <tbody>
           {entities.map(entity => {
             return (
               <PermissionsTableRow key={entity.id}>
-                <EntityNameCell horizontalPadding={horizontalPadding}>
+                <EntityNameCell>
                   {entity.canSelect ? (
                     <EntityNameLink onClick={() => onSelect(entity)}>
                       {entity.name}
@@ -113,10 +106,7 @@ export function PermissionsTable({
 
                 {entity.permissions.map(permission => {
                   return (
-                    <PermissionsTableCell
-                      key={permission.name}
-                      horizontalPadding={horizontalPadding}
-                    >
+                    <PermissionsTableCell key={permission.name}>
                       <PermissionsSelect
                         {...permission}
                         onChange={(value, toggleState) =>
@@ -145,7 +135,7 @@ export function PermissionsTable({
           />
         </Modal>
       )}
-    </React.Fragment>
+    </>
   );
 }
 

frontend/src/metabase/admin/permissions/components/PermissionsTable/PermissionsTable.styled.jsx

@@ -3,36 +3,53 @@ import styled from "@emotion/styled";
 import { color, alpha, lighten } from "metabase/lib/colors";
 import Link from "metabase/core/components/Link";
 import Icon from "metabase/components/Icon";
-
-const HORIZONTAL_PADDING_VARIANTS = {
-  sm: "0.5rem",
-  lg: "3rem",
-};
+import Label from "metabase/components/type/Label";
 
 export const PermissionsTableRoot = styled.table`
   border-collapse: collapse;
-  width: 100%;
-`;
-
-export const PermissionsTableRow = styled.tr`
-  border-top: 1px solid ${alpha(color("border"), 0.5)};
 `;
 
 export const PermissionsTableCell = styled.td`
-  padding: 0.5rem 1rem;
-  width: auto;
-  min-width: 220px;
+  vertical-align: center;
+  padding: 0.625rem 2rem;
+  box-sizing: border-box;
+  min-height: 40px;
 
   &:first-of-type {
-    max-width: 340px;
-    padding: 0.5rem
-      ${props => HORIZONTAL_PADDING_VARIANTS[props.horizontalPadding]};
+    min-width: 300px;
+    background: white;
+    left: 0;
+    top: 0;
+    position: sticky;
+    padding-left: 0;
+
+    &:after {
+      position: absolute;
+      right: 0;
+      top: 0;
+      height: 100%;
+      border-right: 1px solid ${alpha(color("border"), 0.5)};
+      content: " ";
+    }
   }
 `;
 
+export const PermissionTableHeaderCell = styled(
+  PermissionsTableCell.withComponent("th"),
+)`
+  &:first-of-type {
+    &:after {
+      display: none;
+    }
+  }
+`;
+
+export const PermissionsTableRow = styled.tr`
+  border-top: 1px solid ${alpha(color("border"), 0.5)};
+  border-bottom: 1px solid ${alpha(color("border"), 0.5)};
+`;
+
 export const EntityNameCell = styled(PermissionsTableCell)`
-  min-width: 280px;
-  display: flex;
   align-items: center;
 `;
 
@@ -58,3 +75,8 @@ HintIcon.defaultProps = {
   name: "info",
   size: 12,
 };
+
+export const ColumnName = styled(Label)`
+  display: inline;
+  margin: 0;
+`;