feat: Remove Collection from My Space (#254)

* Remove collection button and modal working * Fix outside click hook * Fix ref for menu trigger * Move hooks into directory, update Storybook component * Adding tests and fixing bugs * Add unit tests for Dropdown Menu * Add unit tests for remove custom collection modal * Adding specific dialog name * Add remove collection to cypress test * Edits to address feedback * Fix cypress tests * remove unnecessary css * update react uswds Co-authored-by: Suzanne Rozier <[email protected]>
USSF-ORBIT · Oct 8, 2021 · 2bacf53 · 2bacf53
1 parent 8dfc7af
commit 2bacf53
Show file tree

Hide file tree

Showing 20 changed files with 681 additions and 41 deletions.
diff --git a/.github/workflows/cypress-ci.yml b/.github/workflows/cypress-ci.yml
@@ -25,7 +25,7 @@ jobs:
           CYPRESS_BASE_URL: http://localhost:5000
           NEXT_TELEMETRY_DISABLED: 1
         with:
-          install-command: yarn --frozen-lockfile --network-concurrency 1 # Remove when ReactUSWDS branch is released
+          install-command: yarn --frozen-lockfile
           # Commands for NextJS server:
           # build: yarn build
           # start: yarn start

diff --git a/.github/workflows/node-ci.yml b/.github/workflows/node-ci.yml
@@ -32,7 +32,7 @@ jobs:
 
       # The yarn cache is not node_modules
       - name: Install dependencies
-        run: yarn --frozen-lockfile --prefer-offline --network-concurrency 1 # Remove when ReactUSWDS branch is released
+        run: yarn --frozen-lockfile --prefer-offline
 
       - name: Lint code
         run: yarn lint

diff --git a/cypress/integration/sites-and-applications.spec.js b/cypress/integration/sites-and-applications.spec.js
@@ -25,6 +25,7 @@ describe('Sites and Applications', () => {
     cy.contains('My Space')
 
     cy.contains('Example Collection')
+      .parent()
       .next()
       .within(() => {
         // Inside of <ol>
@@ -50,6 +51,7 @@ describe('Sites and Applications', () => {
 
   it('can add custom links to an existing collection', () => {
     cy.contains('Example Collection')
+      .parent()
       .parent()
       .within(() => {
         // Add a link
@@ -73,11 +75,14 @@ describe('Sites and Applications', () => {
         cy.findByRole('button', { name: 'Add site' }).click()
       })
 
-    cy.findByRole('dialog').within(() => {
-      cy.findByRole('button', { name: 'Cancel' }).click()
-    })
+    cy.findByRole('dialog', { name: 'We don’t recognize that link' }).within(
+      () => {
+        cy.findByRole('button', { name: 'Cancel' }).click()
+      }
+    )
 
     cy.contains('Example Collection')
+      .parent()
       .parent()
       .within(() => {
         // Add a link
@@ -88,21 +93,59 @@ describe('Sites and Applications', () => {
         cy.findByRole('button', { name: 'Add site' }).click()
       })
 
-    cy.findByRole('dialog').within(() => {
-      cy.findByLabelText('Label')
-        .then(($el) => $el[0].checkValidity())
-        .should('be.false')
+    cy.findByRole('dialog', { name: 'We don’t recognize that link' }).within(
+      () => {
+        cy.findByLabelText('Label')
+          .then(($el) => $el[0].checkValidity())
+          .should('be.false')
 
-      cy.findByLabelText('Label')
-        .type('My Custom Link')
-        .then(($el) => $el[0].checkValidity())
-        .should('be.true')
+        cy.findByLabelText('Label')
+          .type('My Custom Link')
+          .then(($el) => $el[0].checkValidity())
+          .should('be.true')
 
-      cy.findByRole('button', { name: 'Save link name' }).click()
-    })
+        cy.findByRole('button', { name: 'Save link name' }).click()
+      }
+    )
 
     cy.findByRole('link', {
       name: 'My Custom Link (opens in a new window)',
     }).should('exist')
   })
+
+  it('can delete an existing collection', () => {
+    cy.contains('Example Collection')
+      .parent()
+      .within(() => {
+        cy.findByRole('button', { name: 'Collection Settings' }).click()
+
+        cy.findByRole('button', { name: 'Delete Collection' }).click()
+      })
+
+    // Cancel first to make sure it's possible
+    cy.findByRole('dialog', {
+      name: 'Are you sure you’d like to delete this collection from My Space?',
+    }).within(() => {
+      cy.findByRole('button', { name: 'Cancel' }).click()
+    })
+
+    // Reopen the modal
+    cy.contains('Example Collection')
+      .parent()
+      .within(() => {
+        cy.findByRole('button', { name: 'Collection Settings' }).click()
+
+        cy.findByRole('button', { name: 'Delete Collection' }).click()
+      })
+
+    // Delete the collection
+    cy.findByRole('dialog', {
+      name: 'Are you sure you’d like to delete this collection from My Space?',
+    }).within(() => {
+      cy.findByRole('button', { name: 'Delete' }).click()
+    })
+
+    // Make sure no collection exists
+    cy.contains('Example Collection').should('not.exist')
+  })
 })
diff --git a/package.json b/package.json
@@ -34,7 +34,7 @@
     "@keystone-next/fields": "15.0.0",
     "@keystone-next/keystone": "25.0.1",
     "@next/bundle-analyzer": "11.1.2",
-    "@trussworks/react-uswds": "https://github.com/trussworks/react-uswds#sr-1233-modal-component",
+    "@trussworks/react-uswds": "2.2.0",
     "classnames": "2.3.1",
     "graphql": "^15.5.3",
     "next": "11.1.2",

diff --git a/src/components/Collection/Collection.module.scss b/src/components/Collection/Collection.module.scss
@@ -8,11 +8,11 @@
   margin-bottom: units(3);
 
   h3 {
-    margin: 0 units(2);
+    margin: 0;
     font-weight: normal;
   }
 
-  h3 + ol {
+  .header + ol {
     margin-top: units('205');
   }
 
@@ -33,4 +33,16 @@
       margin-top: units('05');
     }
   }
+
+  .header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: units(1) units(2);
+
+    svg {
+      font-size: 12px;
+      color: color('base-darker');
+    }
+  }
 }
diff --git a/src/components/Collection/Collection.tsx b/src/components/Collection/Collection.tsx
@@ -6,12 +6,17 @@ type PropTypes = {
   title: React.ReactNode
   children: React.ReactNode | React.ReactNode[]
   footer?: React.ReactNode
+  header?: React.ReactNode
 }
 
-const Collection = ({ title, children, footer }: PropTypes) => {
+const Collection = ({ title, children, header, footer }: PropTypes) => {
   return (
     <div className={styles.collection}>
-      <h3>{title}</h3>
+      <div className={styles.header}>
+        <h3>{title}</h3>
+        {header}
+      </div>
+
       <ol>
         {Array.isArray(children) ? (
           children.map((child, i) => <li key={`bookmark_${i}`}>{child}</li>)

diff --git a/src/components/CustomCollection/CustomCollection.module.scss b/src/components/CustomCollection/CustomCollection.module.scss
@@ -15,3 +15,11 @@
   @include u-padding-x(2);
   @include u-margin-top(2);
 }
+
+button.collectionSettingsDropdown {
+  background-color: #ffffff;
+  color: #005ea2;
+  border: 0;
+  border-radius: 0;
+  font-weight: normal;
+}
diff --git a/src/components/CustomCollection/CustomCollection.stories.tsx b/src/components/CustomCollection/CustomCollection.stories.tsx
@@ -3,24 +3,27 @@ import { Meta } from '@storybook/react'
 import CustomCollection from './CustomCollection'
 
 type StorybookArgTypes = {
-  handleRemoveBookmark: () => void
   handleAddBookmark: () => void
+  handleRemoveBookmark: () => void
+  handleRemoveCollection: () => void
 }
 
 export default {
   title: 'Components/CustomCollection',
   component: CustomCollection,
   argTypes: {
-    handleRemoveBookmark: { action: 'Remove bookmark' },
     handleAddBookmark: { action: 'Add bookmark' },
+    handleRemoveBookmark: { action: 'Remove bookmark' },
+    handleRemoveCollection: { action: 'Remove collection' },
   },
 } as Meta
 
 export const ExampleCustomCollection = (argTypes: StorybookArgTypes) => (
   <CustomCollection
     title="Example collection"
     bookmarks={[{ id: 'link1', url: '#', label: 'Webmail' }]}
-    handleRemoveBookmark={argTypes.handleRemoveBookmark}
     handleAddBookmark={argTypes.handleAddBookmark}
+    handleRemoveBookmark={argTypes.handleRemoveBookmark}
+    handleRemoveCollection={argTypes.handleRemoveCollection}
   />
 )