fix: fix context menu styling and scroll bar issue (#3206)

* fix: fix context menu styling and scroll bar issue

* fix: lint fix and test fix

* fix: fix unit tests

Author: David Kim

src/authorizations/components/redesigned/ResourceAccordion.tsx

@@ -49,7 +49,8 @@ class ResourceAccordion extends Component<OwnProps> {
               <DapperScrollbars
                 autoHide={true}
                 autoSize={true}
-                style={{width: '100%', maxHeight: '300px'}}
+                // this width is max-width of modal - padding left and right
+                style={{width: '100%', maxWidth: '752px', maxHeight: '300px'}}
               >
                 <AllAccordionBody
                   resourceName={resourceName}
@@ -70,7 +71,8 @@ class ResourceAccordion extends Component<OwnProps> {
           <DapperScrollbars
             autoHide={true}
             autoSize={true}
-            style={{width: '100%', maxHeight: '300px'}}
+            // this width is max-width of modal - padding left and right
+            style={{width: '100%', maxWidth: '752px', maxHeight: '300px'}}
           >
             <AllAccordionBody
               resourceName="Other Resources"

src/authorizations/components/redesigned/TokenRow.test.tsx

@@ -33,6 +33,6 @@ describe('TokenRowResourceCard', () => {
   it('displays delete button', () => {
     const {getByTestId} = setup()
 
-    expect(getByTestId('delete-token')).toBeVisible()
+    expect(getByTestId('context-delete-menu--button')).toBeVisible()
   })
 })

src/authorizations/components/redesigned/TokenRow.tsx

@@ -1,5 +1,5 @@
 // Libraries
-import React, {PureComponent} from 'react'
+import React, {createRef, PureComponent, RefObject} from 'react'
 import {connect, ConnectedProps} from 'react-redux'
 import {createDateTimeFormatter} from 'src/utils/datetime/formatters'
 import {withRouter, RouteComponentProps} from 'react-router-dom'
@@ -21,14 +21,16 @@ import {
   FlexDirection,
   JustifyContent,
   ComponentColor,
-  Button,
   ResourceCard,
   IconFont,
   ButtonShape,
+  Appearance,
+  ConfirmationButton,
+  List,
+  Popover,
+  SquareButton,
 } from '@influxdata/clockface'
 
-import {Context} from 'src/clockface'
-
 // Types
 import {Authorization, AppState} from 'src/types'
 import {
@@ -86,33 +88,46 @@ class TokensRow extends PureComponent<Props> {
   }
 
   private get contextMenu(): JSX.Element {
-    return (
-      <Context>
-        <FlexBox margin={ComponentSize.Medium}>
-          <Button
-            icon={IconFont.Duplicate}
-            color={ComponentColor.Secondary}
-            text="Clone"
-            onClick={this.handleClone}
-            testID="clone-token"
-            size={ComponentSize.ExtraSmall}
-          />
+    const settingsRef: RefObject<HTMLButtonElement> = createRef()
 
-          <Context.Menu
-            icon={IconFont.Trash_New}
-            color={ComponentColor.Danger}
-            text="Delete"
-            shape={ButtonShape.StretchToFit}
-            size={ComponentSize.ExtraSmall}
-          >
-            <Context.Item
-              label="Confirm"
-              action={this.handleDelete}
-              testID="delete-token"
-            />
-          </Context.Menu>
-        </FlexBox>
-      </Context>
+    return (
+      <FlexBox margin={ComponentSize.ExtraSmall}>
+        <ConfirmationButton
+          color={ComponentColor.Colorless}
+          icon={IconFont.Trash_New}
+          shape={ButtonShape.Square}
+          size={ComponentSize.ExtraSmall}
+          confirmationLabel="Yes, delete this dashboard"
+          onConfirm={this.handleDelete}
+          confirmationButtonText="Confirm"
+          testID="context-delete-menu"
+        />
+        <SquareButton
+          ref={settingsRef}
+          size={ComponentSize.ExtraSmall}
+          icon={IconFont.CogSolid_New}
+          color={ComponentColor.Colorless}
+          testID="context-menu-token"
+        />
+        <Popover
+          appearance={Appearance.Outline}
+          enableDefaultStyles={false}
+          style={{minWidth: '112px'}}
+          contents={() => (
+            <List>
+              <List.Item
+                onClick={this.handleClone}
+                size={ComponentSize.Small}
+                style={{fontWeight: 500}}
+                testID="context-clone-token"
+              >
+                Clone
+              </List.Item>
+            </List>
+          )}
+          triggerRef={settingsRef}
+        />
+      </FlexBox>
     )
   }
 

src/authorizations/components/redesigned/TokensTab.test.tsx

@@ -123,15 +123,17 @@ describe('TokensTab', () => {
       ).toHaveTextContent('My token')
 
       const deleteButton = tokenCard.querySelector(
-        "[data-testid='delete-token']"
+        "[data-testid='context-delete-menu--button']"
       )
 
+      fireEvent.click(deleteButton)
+
       const tokenID = '03c03a8a64728000'
 
       expect(ui.store.getState().resources.tokens.byID[tokenID]).toBeTruthy()
       expect(ui.store.getState().resources.tokens.allIDs).toContain(tokenID)
 
-      fireEvent.click(deleteButton)
+      fireEvent.click(screen.getByText('Confirm'))
 
       await waitFor(() => expect(deleteAuthorization).toBeCalled())
       expect(mocked(deleteAuthorization).mock.calls[0][0]['authID']).toEqual(
@@ -148,10 +150,12 @@ describe('TokensTab', () => {
       )
 
       const tokenCard = (await screen.findAllByTestId('token-card My token'))[0]
+      const menuButton = tokenCard.querySelector(
+        "[data-testid='context-menu-token']"
+      )
+      fireEvent.click(menuButton)
 
-      const cloneButton = tokenCard.querySelector('[data-testid=clone-token]')
-
-      fireEvent.click(cloneButton)
+      fireEvent.click(screen.getByText('Clone'))
 
       await waitFor(() => expect(createAuthorization).toBeCalled())
     })