feat: pinned items UI revamp (#3216)

Author: ChitlangeSahas

cypress/e2e/cloud/pinned.test.ts

@@ -101,9 +101,9 @@ describe('Pinned Items', () => {
         .first()
         .trigger('mouseover')
         .within(() => {
-          cy.getByTestID('pinneditems-delete--menu').click()
-          cy.getByTestID('pinneditems-delete--confirm').click()
+          cy.getByTestID('pinneditems-delete--menu--button').click()
         })
+      cy.getByTestID('pinneditems-delete--menu--confirm-button').click()
       cy.getByTestID('pinneditems--emptystate').should(
         'contain.text',
         'Pin a task, dashboard, or notebook here'
@@ -267,7 +267,7 @@ from(bucket: "${name}"{rightarrow}
       cy.visit('/')
       cy.getByTestID('tree-nav')
       cy.getByTestID('pinneditems--container').within(() => {
-        cy.getByTestID('pinneditems--type').should('contain.text', 'Notebook')
+        cy.getByTestID('pinneditems--type').should('contain.text', 'NOTEBOOK')
       })
     })
 

src/me/components/PinnedItems.scss

@@ -1,5 +1,5 @@
 @import '@influxdata/clockface/dist/variables.scss';
-$dashboard-grid-gap: $cf-space-3xs;
+$dashboard-grid-gap: $cf-space-2xs;
 
 .pinned-items--header {
   font-weight: 400;
@@ -20,7 +20,7 @@ $dashboard-grid-gap: $cf-space-3xs;
 }
 
 .pinned-items--card {
-  background: rgb(49, 49, 61);
+  background: $cf-grey-25;
 }
 
 @media screen and (max-width: $cf-grid--breakpoint-md) {

src/me/components/PinnedItems.tsx

@@ -1,18 +1,25 @@
-import React, {FC, useContext, useCallback} from 'react'
-import {capitalize} from 'lodash'
+import React, {FC, useCallback, useContext} from 'react'
 import {
+  PinnedItem,
   PinnedItemsContext,
   PinnedItemTypes,
-  PinnedItem,
 } from 'src/shared/contexts/pinneditems'
-
-import {Context} from 'src/clockface'
-import {ComponentColor, IconFont, Panel} from '@influxdata/clockface'
+import {
+  ButtonShape,
+  ComponentColor,
+  ComponentSize,
+  ConfirmationButton,
+  FlexBox,
+  Heading,
+  HeadingElement,
+  IconFont,
+  Panel,
+  ResourceCard,
+  Typeface,
+} from '@influxdata/clockface'
 
 import './PinnedItems.scss'
 
-import {ResourceCard} from '@influxdata/clockface'
-
 import {useHistory} from 'react-router-dom'
 import {CLOUD} from 'src/shared/constants'
 import {isFlagEnabled} from 'src/shared/utils/featureFlag'
@@ -53,12 +60,16 @@ const PinnedItems: FC = () => {
     await deletePinnedItemsHelper(itemId)
   }
   const EmptyState = () => (
-    <h3 data-testid="pinneditems--emptystate">
+    <Heading element={HeadingElement.H5} testID="pinneditems--emptystate">
       Pin a task, dashboard, or notebook here
-    </h3>
+    </Heading>
   )
+
+  const mainPanelStyle = {margin: '4px 0px'}
+  const resourceCardStyle = {marginTop: '0px'}
+
   return CLOUD && isFlagEnabled('pinnedItems') ? (
-    <Panel style={{margin: '4px 0px'}}>
+    <Panel style={mainPanelStyle}>
       <Panel.Header>
         <h2 className="pinned-items--header">Pinned Items</h2>
       </Panel.Header>
@@ -73,33 +84,35 @@ const PinnedItems: FC = () => {
               testID="pinneditems--card"
               className="pinned-items--card"
               contextMenu={
-                <Context>
-                  <Context.Menu
+                <FlexBox margin={ComponentSize.ExtraSmall}>
+                  <ConfirmationButton
+                    color={ComponentColor.Colorless}
                     icon={IconFont.Trash_New}
-                    color={ComponentColor.Danger}
+                    shape={ButtonShape.Square}
+                    size={ComponentSize.ExtraSmall}
+                    confirmationLabel="Unpin this item?"
+                    onConfirm={() => handleDeletePinnedItem(item.id)}
+                    confirmationButtonText="Yes"
                     testID="pinneditems-delete--menu"
-                  >
-                    <Context.Item
-                      label="Unpin"
-                      action={() => handleDeletePinnedItem(item.id)}
-                      testID="pinneditems-delete--confirm"
-                    />
-                  </Context.Menu>
-                </Context>
+                  />
+                </FlexBox>
               }
+              style={resourceCardStyle}
             >
-              <ResourceCard.Name
-                testID="pinneditems--type"
-                name={capitalize(item.type)}
-              />
+              <ResourceCard.Meta>
+                <Heading
+                  type={Typeface.IBMPlexMono}
+                  element={HeadingElement.H5}
+                  testID="pinneditems--type"
+                >
+                  {item.type.toUpperCase()}
+                </Heading>
+              </ResourceCard.Meta>
               <ResourceCard.Name
                 name={item.metadata.name ?? ''}
                 onClick={() => followMetadataToRoute(item)}
                 testID="pinneditems--link"
               />
-              <ResourceCard.Description
-                description={item.metadata.description ?? ''}
-              />
             </ResourceCard>
           ))
         ) : (