Merge pull request #2888 from devtron-labs/fix/notes-card

fix: notes drawer closing on click

Author: arunjaindev

src/components/app/details/appDetails/DeployedCommitCard.tsx

@@ -23,6 +23,7 @@ import {
     GitProviderType,
     LoadingCard,
     showError,
+    Tooltip,
 } from '@devtron-labs/devtron-fe-common-lib'
 
 import { ReactComponent as CommitIcon } from '../../../../assets/icons/ic-code-commit.svg'
@@ -99,8 +100,10 @@ const DeployedCommitCard = ({ cardLoading, showCommitInfoDrawer, envId, ciArtifa
                 {/* @TODO: This should be dynamic, dependent on the source */}
                 {/* <GitHub className="github-icon" /> */}
             </div>
-            <div className="app-details-info-card__bottom-container dc__content-space">
-                <span className="app-details-info-card__bottom-container__message fs-12 fw-4">{commitMessage}</span>
+            <div className="app-details-info-card__bottom-container dc__gap-8 dc__content-space">
+                <Tooltip content={commitMessage} placement="bottom">
+                    <span className="app-details-info-card__bottom-container__message fs-12 fw-4">{commitMessage}</span>
+                </Tooltip>
                 <div className="app-details-info-card__bottom-container__details fs-12 fw-6">Details</div>
             </div>
         </div>

src/components/v2/appDetails/sourceInfo/environment.type.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React from 'react'
+import React, { SyntheticEvent } from 'react'
 
 import {
     AppEnvironment as BaseAppEnvironmentType,
@@ -49,7 +49,7 @@ export interface NodeStreamMap {
 export interface ChartUsedCardType {
     appDetails: AppDetails
     notes: string
-    onClickShowNotes: () => void
+    onClickShowNotes: (e: SyntheticEvent) => void
     cardLoading: boolean
     onClickUpgrade: () => void
 }

src/components/v2/appDetails/sourceInfo/environmentStatus/EnvironmentStatus.component.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { useMemo, useState } from 'react'
+import { SyntheticEvent, useMemo, useState } from 'react'
 import './environmentStatus.scss'
 import IndexStore from '../../index.store'
 import { URLS } from '../../../../../config'
@@ -29,6 +29,7 @@ import {
     AppStatusModalTabType,
     DeploymentAppTypes,
     LoadingCard,
+    stopPropagation,
     useAsync,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { EnvironmentStatusComponentType } from '../environment.type'
@@ -112,7 +113,8 @@ const EnvironmentStatusComponent = ({
         )
     }
 
-    const onClickShowNotes = () => {
+    const onClickShowNotes = (e: SyntheticEvent) => {
+        stopPropagation(e)
         setShowNotes(true)
     }
 

src/components/v2/appDetails/sourceInfo/environmentStatus/NotesDrawer.tsx

@@ -15,10 +15,9 @@
  */
 
 import { useEffect, useRef } from 'react'
-import { ReactComponent as Close } from '../../../assets/icons/ic-close.svg'
 import './environmentStatus.scss'
 import { NotesDrawerType } from './notesDrawer.type'
-import { Drawer, MarkDown } from '@devtron-labs/devtron-fe-common-lib'
+import { Button, ButtonStyleType, ButtonVariantType, ComponentSizeType, Drawer, Icon, MarkDown } from '@devtron-labs/devtron-fe-common-lib'
 
 const NotesDrawer = ({ notes, close }: NotesDrawerType) => {
     const appNotesRef = useRef<HTMLDivElement>(null)
@@ -59,9 +58,16 @@ const NotesDrawer = ({ notes, close }: NotesDrawerType) => {
                         data-testid="notes-heading-after-click"
                     >
                         Notes
-                        <span className="cursor" onClick={close} data-testid="close-notes-button">
-                            <Close className="icon-dim-24" />
-                        </span>
+                        <Button
+                            dataTestId="close-notes-button"
+                            icon={<Icon name="ic-close-large" color={null} />}
+                            onClick={close}
+                            ariaLabel="Close notes drawer"
+                            showAriaLabelInTippy={false}
+                            size={ComponentSizeType.xs}
+                            variant={ButtonVariantType.borderLess}
+                            style={ButtonStyleType.negativeGrey}
+                        />
                     </div>
                 </div>
                 <div className="app-notes__body dc__white-space-pre">