Merge pull request #2889 from devtron-labs/feat/sync-notes-card-fix

feat: sync notes card fix

Author: arunjaindev

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

@@ -22,6 +22,7 @@ import {
     GitProviderIcon,
     Icon,
     LoadingCard,
+    Tooltip,
     useQuery,
 } from '@devtron-labs/devtron-fe-common-lib'
 
@@ -47,6 +48,7 @@ const DeployedCommitCard = ({ cardLoading, showCommitInfoDrawer, envId, ciArtifa
         <div className="flexbox deployed-commit-card">
             {materials.map((material) => {
                 const lastCommit = material.history[0]
+                const commitMessage = lastCommit?.message ?? ''
 
                 return (
                     <div
@@ -78,10 +80,12 @@ const DeployedCommitCard = ({ cardLoading, showCommitInfoDrawer, envId, ciArtifa
                             </div>
                             <GitProviderIcon gitRepoUrl={lastCommit?.commitURL} size={24} />
                         </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">
-                                {lastCommit?.message ?? ''}
-                            </span>
+                        <div className="app-details-info-card__bottom-container dc__content-space dc__gap-8">
+                            <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">