Add root collection to collections permissions. Remove PermissionEditor modal mode

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

@@ -2,7 +2,6 @@ import React from "react";
 
 import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper.jsx";
 import Confirm from "metabase/components/Confirm.jsx";
-import Modal from "metabase/components/Modal.jsx";
 import PermissionsGrid from "../components/PermissionsGrid.jsx";
 import PermissionsConfirm from "../components/PermissionsConfirm.jsx";
 import EditBar from "metabase/components/EditBar.jsx";
@@ -15,7 +14,6 @@ import _ from "underscore";
 
 const PermissionsEditor = ({
   title = t`Permissions`,
-  modal,
   admin,
   grid,
   onUpdatePermission,
@@ -35,7 +33,7 @@ const PermissionsEditor = ({
       triggerClasses={cx({ disabled: !isDirty })}
       key="save"
     >
-      <Button primary small={!modal}>{t`Save Changes`}</Button>
+      <Button primary small>{t`Save Changes`}</Button>
     </Confirm>
   );
 
@@ -46,10 +44,10 @@ const PermissionsEditor = ({
       content={t`No changes to permissions will be made.`}
       key="discard"
     >
-      <Button small={!modal}>{t`Cancel`}</Button>
+      <Button small>{t`Cancel`}</Button>
     </Confirm>
   ) : (
-    <Button small={!modal} onClick={onCancel} key="cancel">{t`Cancel`}</Button>
+    <Button small onClick={onCancel} key="cancel">{t`Cancel`}</Button>
   );
 
   return (
@@ -57,47 +55,30 @@ const PermissionsEditor = ({
       loading={!grid}
       className="flex-full flex flex-column"
     >
-      {() =>
-        // eslint-disable-line react/display-name
-        modal ? (
-          <Modal
-            inline
-            title={title}
-            footer={[cancelButton, saveButton]}
-            onClose={onCancel}
-          >
-            <PermissionsGrid
-              className="flex-full"
-              grid={grid}
-              onUpdatePermission={onUpdatePermission}
-              {...getEntityAndGroupIdFromLocation(location)}
+      {() => (
+        <div className="flex-full flex flex-column">
+          {isDirty && (
+            <EditBar
+              admin={admin}
+              title={t`You've made changes to permissions.`}
+              buttons={[cancelButton, saveButton]}
             />
-          </Modal>
-        ) : (
-          <div className="flex-full flex flex-column">
-            {isDirty && (
-              <EditBar
-                admin={admin}
-                title={t`You've made changes to permissions.`}
-                buttons={[cancelButton, saveButton]}
-              />
+          )}
+          <div className="wrapper pt2">
+            {grid && grid.crumbs ? (
+              <Breadcrumbs className="py1" crumbs={grid.crumbs} />
+            ) : (
+              <h2>{title}</h2>
             )}
-            <div className="wrapper pt2">
-              {grid && grid.crumbs ? (
-                <Breadcrumbs className="py1" crumbs={grid.crumbs} />
-              ) : (
-                <h2>{title}</h2>
-              )}
-            </div>
-            <PermissionsGrid
-              className="flex-full"
-              grid={grid}
-              onUpdatePermission={onUpdatePermission}
-              {...getEntityAndGroupIdFromLocation(location)}
-            />
           </div>
-        )
-      }
+          <PermissionsGrid
+            className="flex-full"
+            grid={grid}
+            onUpdatePermission={onUpdatePermission}
+            {...getEntityAndGroupIdFromLocation(location)}
+          />
+        </div>
+      )}
     </LoadingAndErrorWrapper>
   );
 };

frontend/src/metabase/admin/permissions/containers/CollectionsPermissionsApp.jsx

@@ -3,6 +3,7 @@ import { connect } from "react-redux";
 
 import PermissionsEditor from "../components/PermissionsEditor.jsx";
 import PermissionsApp from "./PermissionsApp.jsx";
+import fitViewport from "metabase/hoc/FitViewPort";
 
 import { CollectionsApi } from "metabase/services";
 
@@ -37,6 +38,7 @@ const mapDispatchToProps = {
 const Editor = connect(mapStateToProps, mapDispatchToProps)(PermissionsEditor);
 
 @connect(null, { loadCollections })
+@fitViewport
 export default class CollectionsPermissionsApp extends Component {
   componentWillMount() {
     this.props.loadCollections();
@@ -47,8 +49,9 @@ export default class CollectionsPermissionsApp extends Component {
         {...this.props}
         load={CollectionsApi.graph}
         save={CollectionsApi.updateGraph}
+        fitClassNames={this.props.fitClassNames}
       >
-        <Editor {...this.props} modal confirmCancel={false} />
+        <Editor {...this.props} admin={false} confirmCancel={false} />
       </PermissionsApp>
     );
   }

frontend/src/metabase/admin/permissions/selectors.js

@@ -656,6 +656,9 @@ export const getDatabasesPermissionsGrid = createSelector(
   },
 );
 
+// "root" collection we should include in the grid even though it's not listed by the endpoints
+const ROOT_COLLECTION = { id: "root", name: "Saved Items" };
+
 const getCollections = state => state.admin.permissions.collections;
 const getCollectionPermission = (permissions, groupId, { collectionId }) =>
   getIn(permissions, [groupId, collectionId]);
@@ -665,10 +668,12 @@ export const getCollectionsPermissionsGrid = createSelector(
   getGroups,
   getPermissions,
   (collections, groups: Array<Group>, permissions: GroupsPermissions) => {
-    if (!groups || !permissions || !collections) {
+    if (!groups || groups.length === 0 || !permissions || !collections) {
       return null;
     }
 
+    collections = [ROOT_COLLECTION, ...collections];
+
     const defaultGroup = _.find(groups, isDefaultGroup);
 
     return {

frontend/src/metabase/components/Modal.jsx

@@ -188,14 +188,6 @@ export class FullPageModal extends Component {
   }
 }
 
-export class InlineModal extends Component {
-  render() {
-    return (
-      <div>{this.props.isOpen ? <FullPageModal {...this.props} /> : null}</div>
-    );
-  }
-}
-
 /**
  * A modified version of Modal for Jest/Enzyme tests. Renders the modal content inline instead of document root.
  */
@@ -224,13 +216,11 @@ export class TestModal extends Component {
 // the "routeless" version should only be used for non-inline modals
 const RoutelessFullPageModal = routeless(FullPageModal);
 
-const Modal = ({ full, inline, ...props }) =>
+const Modal = ({ full, ...props }) =>
   full ? (
     props.isOpen ? (
       <RoutelessFullPageModal {...props} />
     ) : null
-  ) : inline ? (
-    <InlineModal {...props} />
   ) : (
     <WindowModal {...props} />
   );

frontend/src/metabase/lib/permissions.js

@@ -160,12 +160,12 @@ export function downgradeNativePermissionsIfNeeded(
     currentSchemas === "all" &&
     currentNative === "write"
   ) {
-    // if changing schemas to controlled, downgrade native to read
+    // if changing schemas to controlled, downgrade native to none
     return updateNativePermission(
       permissions,
       groupId,
       { databaseId },
-      "read",
+      "none",
       metadata,
     );
   } else {