Fix archived personal sub-collections are displayed in the sidebar (#15674)

* Enable #15343 repro test

* Rearrange CollectionSidebar methods

* Remove comment

* Fix sidebar lists archived personal collections

* Fix collection expand button is visible

Reproduced if collection's children were archived

frontend/src/metabase/collections/components/CollectionsList.jsx

@@ -26,7 +26,8 @@ class CollectionsList extends React.Component {
           const isOpen = openCollections.indexOf(c.id) >= 0;
           const action = isOpen ? this.props.onClose : this.props.onOpen;
           const hasChildren =
-            Array.isArray(c.children) && c.children.length > 0;
+            Array.isArray(c.children) &&
+            c.children.filter(child => !child.archived).length > 0;
           return (
             <Box key={c.id}>
               <CollectionDropTarget collection={c}>

frontend/src/metabase/collections/containers/CollectionSidebar.jsx

@@ -46,9 +46,20 @@ class CollectionSidebar extends React.Component {
   state = {
     openCollections: [],
   };
+
+  componentDidMount() {
+    // an array to store the ancestors
+    const { collectionId, collections, loading } = this.props;
+    if (!loading) {
+      const ancestors = getParentPath(collections, Number(collectionId)) || [];
+      this.setState({ openCollections: ancestors });
+    }
+  }
+
   onOpen = id => {
     this.setState({ openCollections: this.state.openCollections.concat(id) });
   };
+
   onClose = id => {
     this.setState({
       openCollections: this.state.openCollections.filter(c => {
@@ -56,18 +67,14 @@ class CollectionSidebar extends React.Component {
       }),
     });
   };
-  componentDidMount() {
-    // an array to store the ancestors
-    const { collectionId, collections, loading } = this.props;
-    if (!loading) {
-      const ancestors = getParentPath(collections, Number(collectionId)) || [];
-      this.setState({ openCollections: ancestors });
-    }
-  }
+
+  // TODO Should we update the API to filter archived collections?
+  filterPersonalCollections = collection => !collection.archived;
+
   render() {
     const { currentUser, isRoot, collectionId, list } = this.props;
     return (
-      <Sidebar w={340} pt={3}>
+      <Sidebar w={340} pt={3} data-testid="sidebar">
         <CollectionLink
           to={Urls.collection("root")}
           selected={isRoot}
@@ -94,6 +101,7 @@ class CollectionSidebar extends React.Component {
               onOpen={this.onOpen}
               collections={currentUserPersonalCollections(list, currentUser.id)}
               initialIcon="person"
+              filter={this.filterPersonalCollections}
               currentCollection={collectionId}
             />
           </Box>

frontend/src/metabase/collections/utils.js

 import { t } from "ttag";
 
-// return collections that aren't personal and aren't archived
 export function nonPersonalCollection(collection) {
   // @TODO - should this be an API thing?
   return !collection.personal_owner_id && !collection.archived;

frontend/test/metabase/scenarios/collections/collections.cy.spec.js

@@ -463,10 +463,31 @@ describe("scenarios > collection_defaults", () => {
 
     it("collections without sub-collections shouldn't have chevron icon (metabase#14753)", () => {
       cy.visit("/collection/root");
-      cy.findByText("Your personal collection")
+      cy.findByTestId("sidebar")
+        .as("sidebar")
+        .findByText("Your personal collection")
         .parent()
         .find(".Icon-chevronright")
         .should("not.exist");
+
+      // Ensure if sub-collection is archived, the chevron is not displayed
+      cy.get("@sidebar")
+        .findByText("First collection")
+        .click()
+        .findByText("Second collection")
+        .click();
+      cy.icon("pencil").click();
+      popover()
+        .findByText("Archive this collection")
+        .click();
+      cy.get(".Modal")
+        .findByRole("button", { name: "Archive" })
+        .click();
+      cy.get("@sidebar")
+        .findByText("First collection")
+        .parent()
+        .find(".Icon-chevrondown")
+        .should("not.exist");
     });
 
     it.skip("'Saved Questions' prompt should respect nested collections structure (metabase#14178)", () => {

frontend/test/metabase/scenarios/collections/personal-collections.cy.spec.js

@@ -115,7 +115,7 @@ describe("personal collections", () => {
           cy.get("@sidebar").findByText("Bar1");
         });
 
-        it.skip("should be able to archive collection(s) inside personal collection (metabase#15343)", () => {
+        it("should be able to archive collection(s) inside personal collection (metabase#15343)", () => {
           cy.icon("pencil").click();
           cy.findByText("Archive this collection").click();
           modal()