From 43ddad6868dc6697000f7abf1e28e66b1c03c445 Mon Sep 17 00:00:00 2001
From: Oksana Bazylieva <obazylie@redhat.com>
Date: Mon, 20 Jul 2026 14:36:18 -0400
Subject: [PATCH 1/7] Display Cluster Description with Markdown Rendering

Signed-off-by: Oksana Bazylieva <obazylie@redhat.com>
---
 .../ClusterOverview/ClusterOverview.tsx               | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/frontend/src/routes/Infrastructure/Clusters/ManagedClusters/ClusterDetails/ClusterOverview/ClusterOverview.tsx b/frontend/src/routes/Infrastructure/Clusters/ManagedClusters/ClusterDetails/ClusterOverview/ClusterOverview.tsx
index f1466fa450..c4af0c6570 100644
--- a/frontend/src/routes/Infrastructure/Clusters/ManagedClusters/ClusterDetails/ClusterOverview/ClusterOverview.tsx
+++ b/frontend/src/routes/Infrastructure/Clusters/ManagedClusters/ClusterDetails/ClusterOverview/ClusterOverview.tsx
@@ -341,12 +341,15 @@ export function ClusterOverviewPageContent() {
     },
     description: {
       key: t('Description'),
-      value: cluster?.annotations?.[clusterDescriptionAnnotation] ? (
+      value: (
         <Content>
-          <Markdown template={cluster.annotations[clusterDescriptionAnnotation]} />
+          <Markdown
+            template={
+              cluster?.annotations?.[clusterDescriptionAnnotation] ??
+              '**Production Cluster**\n\nThis is a test cluster for development purposes.\n\n- High availability setup\n- [Documentation](https://example.com)\n- Auto-scaling enabled'
+            }
+          />
         </Content>
-      ) : (
-        '-'
       ),
     },
   }

From d5590736eb17be0fb7d2b4da286e04ee5e219b59 Mon Sep 17 00:00:00 2001
From: Oksana Bazylieva <obazylie@redhat.com>
Date: Mon, 20 Jul 2026 14:48:25 -0400
Subject: [PATCH 2/7] Remove mock description

Signed-off-by: Oksana Bazylieva <obazylie@redhat.com>
---
 .../ClusterOverview/ClusterOverview.tsx               | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/frontend/src/routes/Infrastructure/Clusters/ManagedClusters/ClusterDetails/ClusterOverview/ClusterOverview.tsx b/frontend/src/routes/Infrastructure/Clusters/ManagedClusters/ClusterDetails/ClusterOverview/ClusterOverview.tsx
index c4af0c6570..f1466fa450 100644
--- a/frontend/src/routes/Infrastructure/Clusters/ManagedClusters/ClusterDetails/ClusterOverview/ClusterOverview.tsx
+++ b/frontend/src/routes/Infrastructure/Clusters/ManagedClusters/ClusterDetails/ClusterOverview/ClusterOverview.tsx
@@ -341,15 +341,12 @@ export function ClusterOverviewPageContent() {
     },
     description: {
       key: t('Description'),
-      value: (
+      value: cluster?.annotations?.[clusterDescriptionAnnotation] ? (
         <Content>
-          <Markdown
-            template={
-              cluster?.annotations?.[clusterDescriptionAnnotation] ??
-              '**Production Cluster**\n\nThis is a test cluster for development purposes.\n\n- High availability setup\n- [Documentation](https://example.com)\n- Auto-scaling enabled'
-            }
-          />
+          <Markdown template={cluster.annotations[clusterDescriptionAnnotation]} />
         </Content>
+      ) : (
+        '-'
       ),
     },
   }

From d29f008be0023e0dc79cc905a107e88136a4276b Mon Sep 17 00:00:00 2001
From: Oksana Bazylieva <obazylie@redhat.com>
Date: Mon, 20 Jul 2026 22:53:38 -0400
Subject: [PATCH 3/7] Implement cluster description edit modal with markdown
 formatting

Signed-off-by: Oksana Bazylieva <obazylie@redhat.com>
---
 .../ClusterOverview/ClusterOverview.tsx       |  30 +++-
 .../components/EditDescription.tsx            | 170 ++++++++++++++++++
 2 files changed, 196 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/routes/Infrastructure/Clusters/ManagedClusters/components/EditDescription.tsx

diff --git a/frontend/src/routes/Infrastructure/Clusters/ManagedClusters/ClusterDetails/ClusterOverview/ClusterOverview.tsx b/frontend/src/routes/Infrastructure/Clusters/ManagedClusters/ClusterDetails/ClusterOverview/ClusterOverview.tsx
index f1466fa450..3dc13143f3 100644
--- a/frontend/src/routes/Infrastructure/Clusters/ManagedClusters/ClusterDetails/ClusterOverview/ClusterOverview.tsx
+++ b/frontend/src/routes/Infrastructure/Clusters/ManagedClusters/ClusterDetails/ClusterOverview/ClusterOverview.tsx
@@ -5,7 +5,7 @@ import {
   ClusterDeploymentK8sResource,
   getClusterProperties,
 } from '@openshift-assisted/ui-lib/cim'
-import { AlertVariant, ButtonVariant, Content, PageSection, Popover } from '@patternfly/react-core'
+import { AlertVariant, ButtonVariant, PageSection, Popover } from '@patternfly/react-core'
 import { Modal, ModalVariant } from '@patternfly/react-core/deprecated'
 import { ExternalLinkAltIcon, OutlinedQuestionCircleIcon, PencilAltIcon } from '@patternfly/react-icons'
 import { Markdown } from '@redhat-cloud-services/rule-components/Markdown'
@@ -47,6 +47,7 @@ import AIClusterDetails from '../../components/cim/AIClusterDetails'
 import AIHypershiftClusterDetails from '../../components/cim/AIHypershiftClusterDetails'
 import { ClusterStatusMessageAlert } from '../../components/ClusterStatusMessageAlert'
 import { DistributionField } from '../../components/DistributionField'
+import { EditDescription } from '../../components/EditDescription'
 import { EditLabels } from '../../components/EditLabels'
 import { HiveNotification } from '../../components/HiveNotification'
 import HypershiftClusterDetails from '../../components/HypershiftClusterDetails'
@@ -85,6 +86,7 @@ export function ClusterOverviewPageContent() {
   const localHubName = useLocalHubName()
   const clusterDescriptionAnnotation = 'console.open-cluster-management.io/description'
   const [showEditLabels, setShowEditLabels] = useState<boolean>(false)
+  const [showEditDescription, setShowEditDescription] = useState<boolean>(false)
   const [showChannelSelectModal, setShowChannelSelectModal] = useState<boolean>(false)
   const [curatorSummaryModalIsOpen, setCuratorSummaryModalIsOpen] = useState<boolean>(false)
   const { projects } = useProjects()
@@ -342,12 +344,20 @@ export function ClusterOverviewPageContent() {
     description: {
       key: t('Description'),
       value: cluster?.annotations?.[clusterDescriptionAnnotation] ? (
-        <Content>
-          <Markdown template={cluster.annotations[clusterDescriptionAnnotation]} />
-        </Content>
+        <Markdown template={cluster.annotations[clusterDescriptionAnnotation]} />
       ) : (
         '-'
       ),
+      keyAction: cluster?.isManaged && (
+        <RbacButton
+          onClick={() => setShowEditDescription(true)}
+          variant={ButtonVariant.plain}
+          aria-label={t('Edit cluster description')}
+          rbac={[rbacPatch(ManagedClusterDefinition, undefined, cluster?.name)]}
+        >
+          <PencilAltIcon />
+        </RbacButton>
+      ),
     },
   }
 
@@ -506,6 +516,18 @@ export function ClusterOverviewPageContent() {
           displayName={cluster.displayName}
           close={() => setShowEditLabels(false)}
         />
+        <EditDescription
+          resource={
+            showEditDescription
+              ? {
+                  ...ManagedClusterDefinition,
+                  metadata: { name: cluster.name, annotations: cluster.annotations },
+                }
+              : undefined
+          }
+          displayName={cluster.displayName}
+          close={() => setShowEditDescription(false)}
+        />
         {details}
         <AcmDescriptionList
           title={t('table.details')}
diff --git a/frontend/src/routes/Infrastructure/Clusters/ManagedClusters/components/EditDescription.tsx b/frontend/src/routes/Infrastructure/Clusters/ManagedClusters/components/EditDescription.tsx
new file mode 100644
index 0000000000..21070aa042
--- /dev/null
+++ b/frontend/src/routes/Infrastructure/Clusters/ManagedClusters/components/EditDescription.tsx
@@ -0,0 +1,170 @@
+/* Copyright Contributors to the Open Cluster Management project */
+import { IResource } from '../../../../../resources'
+import { patchResource } from '../../../../../resources/utils'
+import { AcmAlertContext, AcmAlertGroup, AcmForm, AcmModal, AcmSubmit } from '../../../../../ui-components'
+import {
+  ActionGroup,
+  Button,
+  FormGroup,
+  TextArea,
+  Toolbar,
+  ToolbarContent,
+  ToolbarGroup,
+  ToolbarItem,
+} from '@patternfly/react-core'
+import { ModalVariant } from '@patternfly/react-core/deprecated'
+import { BoldIcon, ItalicIcon, LinkIcon, ListIcon } from '@patternfly/react-icons'
+import { useLayoutEffect, useRef, useState } from 'react'
+import { useTranslation } from '../../../../../lib/acm-i18next'
+import { getErrorInfo } from '../../../../../components/ErrorPage'
+
+const CLUSTER_DESCRIPTION_ANNOTATION = 'console.open-cluster-management.io/description'
+
+export function EditDescription(props: { resource?: IResource; displayName?: string; close: () => void }) {
+  const { t } = useTranslation()
+  const [description, setDescription] = useState<string>('')
+  const textAreaRef = useRef<HTMLTextAreaElement>(null)
+  const isOpen = props.resource !== undefined
+
+  useLayoutEffect(() => {
+    if (isOpen) {
+      const desc = props.resource?.metadata?.annotations?.[CLUSTER_DESCRIPTION_ANNOTATION] ?? ''
+      setDescription(desc)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isOpen])
+
+  const insertMarkdown = (prefix: string, suffix: string = prefix) => {
+    const textarea = textAreaRef.current
+    if (!textarea) return
+
+    const start = textarea.selectionStart
+    const end = textarea.selectionEnd
+    const selectedText = description.substring(start, end)
+    const beforeText = description.substring(0, start)
+    const afterText = description.substring(end)
+
+    const newText = beforeText + prefix + selectedText + suffix + afterText
+    setDescription(newText)
+
+    // Place cursor between opening and closing markdown markers (e.g., **|** for typing)
+    setTimeout(() => {
+      const scrollPosition = textarea.scrollTop
+      textarea.focus()
+      const newPosition = start + prefix.length + selectedText.length
+      textarea.setSelectionRange(newPosition, newPosition)
+      textarea.scrollTop = scrollPosition
+    }, 0)
+  }
+
+  return (
+    <AcmModal
+      title={t('Edit cluster description')}
+      isOpen={props.resource !== undefined}
+      variant={ModalVariant.medium}
+      onClose={props.close}
+    >
+      <AcmAlertContext.Consumer>
+        {(alertContext) => (
+          <AcmForm style={{ gap: 0 }}>
+            <FormGroup label={t('Description')} fieldId="description-input">
+              <Toolbar>
+                <ToolbarContent>
+                  <ToolbarGroup>
+                    <ToolbarItem>
+                      <Button variant="plain" aria-label={t('Bold')} onClick={() => insertMarkdown('**')}>
+                        <BoldIcon />
+                      </Button>
+                    </ToolbarItem>
+                    <ToolbarItem>
+                      <Button variant="plain" aria-label={t('Italic')} onClick={() => insertMarkdown('_')}>
+                        <ItalicIcon />
+                      </Button>
+                    </ToolbarItem>
+                    <ToolbarItem>
+                      <Button variant="plain" aria-label={t('Link')} onClick={() => insertMarkdown('[', '](url)')}>
+                        <LinkIcon />
+                      </Button>
+                    </ToolbarItem>
+                    <ToolbarItem>
+                      <Button variant="plain" aria-label={t('List')} onClick={() => insertMarkdown('- ', '')}>
+                        <ListIcon />
+                      </Button>
+                    </ToolbarItem>
+                  </ToolbarGroup>
+                </ToolbarContent>
+              </Toolbar>
+
+              <TextArea
+                ref={textAreaRef}
+                id="description-input"
+                value={description}
+                onChange={(_event, value) => setDescription(value)}
+                rows={10}
+                resizeOrientation="none"
+                placeholder={t('Enter cluster description (markdown supported)')}
+                aria-label={t('Description')}
+              />
+            </FormGroup>
+            <AcmAlertGroup isInline canClose />
+            <ActionGroup>
+              <AcmSubmit
+                id="save-description"
+                variant="primary"
+                onClick={() => {
+                  alertContext.clearAlerts()
+                  const resource: IResource = {
+                    apiVersion: props.resource!.apiVersion,
+                    kind: props.resource!.kind,
+                    metadata: {
+                      name: props.resource!.metadata!.name,
+                      namespace: props.resource!.metadata?.namespace,
+                    },
+                  }
+
+                  const patch: { op: string; path: string; value?: unknown }[] = []
+
+                  if (props.resource?.metadata?.annotations?.[CLUSTER_DESCRIPTION_ANNOTATION]) {
+                    const key = CLUSTER_DESCRIPTION_ANNOTATION.replaceAll('/', '~1')
+                    patch.push({
+                      op: 'remove',
+                      path: `/metadata/annotations/${key}`,
+                    })
+                  }
+                  if (description.trim()) {
+                    const key = CLUSTER_DESCRIPTION_ANNOTATION.replaceAll('/', '~1')
+                    patch.push({
+                      op: 'add',
+                      path: `/metadata/annotations/${key}`,
+                      value: description,
+                    })
+                    if (!props.resource?.metadata?.annotations) {
+                      patch.unshift({
+                        op: 'add',
+                        path: '/metadata/annotations',
+                        value: {},
+                      })
+                    }
+                  }
+
+                  return patchResource(resource, patch)
+                    .promise.then(() => {
+                      props.close()
+                    })
+                    .catch((err) => {
+                      alertContext.addAlert(getErrorInfo(err, t))
+                    })
+                }}
+                label={t('save')}
+                processingLabel={t('saving')}
+              />
+              <Button variant="link" onClick={props.close}>
+                {t('cancel')}
+              </Button>
+            </ActionGroup>
+          </AcmForm>
+        )}
+      </AcmAlertContext.Consumer>
+    </AcmModal>
+  )
+}

From 9d0a3716b6ed62716b0d37bc206b832a338bc97c Mon Sep 17 00:00:00 2001
From: Oksana Bazylieva <obazylie@redhat.com>
Date: Mon, 20 Jul 2026 23:29:53 -0400
Subject: [PATCH 4/7] Align EditDescription patch logic with EditLabels pattern

Signed-off-by: Oksana Bazylieva <obazylie@redhat.com>
---
 .../components/EditDescription.tsx            | 100 ++++++++++--------
 1 file changed, 55 insertions(+), 45 deletions(-)

diff --git a/frontend/src/routes/Infrastructure/Clusters/ManagedClusters/components/EditDescription.tsx b/frontend/src/routes/Infrastructure/Clusters/ManagedClusters/components/EditDescription.tsx
index 21070aa042..ef9f83c41d 100644
--- a/frontend/src/routes/Infrastructure/Clusters/ManagedClusters/components/EditDescription.tsx
+++ b/frontend/src/routes/Infrastructure/Clusters/ManagedClusters/components/EditDescription.tsx
@@ -1,7 +1,14 @@
 /* Copyright Contributors to the Open Cluster Management project */
 import { IResource } from '../../../../../resources'
 import { patchResource } from '../../../../../resources/utils'
-import { AcmAlertContext, AcmAlertGroup, AcmForm, AcmModal, AcmSubmit } from '../../../../../ui-components'
+import {
+  AcmAlertContext,
+  AcmAlertGroup,
+  AcmForm,
+  AcmModal,
+  AcmSubmit,
+  IAlertContext,
+} from '../../../../../ui-components'
 import {
   ActionGroup,
   Button,
@@ -34,6 +41,52 @@ export function EditDescription(props: { resource?: IResource; displayName?: str
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isOpen])
 
+  const handleSave = (alertContext: IAlertContext) => {
+    alertContext.clearAlerts()
+    const resource: IResource = {
+      apiVersion: props.resource!.apiVersion,
+      kind: props.resource!.kind,
+      metadata: {
+        name: props.resource!.metadata!.name,
+        namespace: props.resource!.metadata?.namespace,
+      },
+    }
+
+    const patch: { op: string; path: string; value?: unknown }[] = []
+    const key = CLUSTER_DESCRIPTION_ANNOTATION.replaceAll('/', '~1')
+
+    if (props.resource?.metadata?.annotations?.[CLUSTER_DESCRIPTION_ANNOTATION]) {
+      patch.push({
+        op: 'remove',
+        path: `/metadata/annotations/${key}`,
+      })
+    }
+
+    if (description.trim()) {
+      patch.push({
+        op: 'add',
+        path: `/metadata/annotations/${key}`,
+        value: description.trim(),
+      })
+    }
+
+    if (description.trim() && !props.resource?.metadata?.annotations) {
+      patch.unshift({
+        op: 'add',
+        path: '/metadata/annotations',
+        value: {},
+      })
+    }
+
+    return patchResource(resource, patch)
+      .promise.then(() => {
+        props.close()
+      })
+      .catch((err) => {
+        alertContext.addAlert(getErrorInfo(err, t))
+      })
+  }
+
   const insertMarkdown = (prefix: string, suffix: string = prefix) => {
     const textarea = textAreaRef.current
     if (!textarea) return
@@ -111,50 +164,7 @@ export function EditDescription(props: { resource?: IResource; displayName?: str
               <AcmSubmit
                 id="save-description"
                 variant="primary"
-                onClick={() => {
-                  alertContext.clearAlerts()
-                  const resource: IResource = {
-                    apiVersion: props.resource!.apiVersion,
-                    kind: props.resource!.kind,
-                    metadata: {
-                      name: props.resource!.metadata!.name,
-                      namespace: props.resource!.metadata?.namespace,
-                    },
-                  }
-
-                  const patch: { op: string; path: string; value?: unknown }[] = []
-
-                  if (props.resource?.metadata?.annotations?.[CLUSTER_DESCRIPTION_ANNOTATION]) {
-                    const key = CLUSTER_DESCRIPTION_ANNOTATION.replaceAll('/', '~1')
-                    patch.push({
-                      op: 'remove',
-                      path: `/metadata/annotations/${key}`,
-                    })
-                  }
-                  if (description.trim()) {
-                    const key = CLUSTER_DESCRIPTION_ANNOTATION.replaceAll('/', '~1')
-                    patch.push({
-                      op: 'add',
-                      path: `/metadata/annotations/${key}`,
-                      value: description,
-                    })
-                    if (!props.resource?.metadata?.annotations) {
-                      patch.unshift({
-                        op: 'add',
-                        path: '/metadata/annotations',
-                        value: {},
-                      })
-                    }
-                  }
-
-                  return patchResource(resource, patch)
-                    .promise.then(() => {
-                      props.close()
-                    })
-                    .catch((err) => {
-                      alertContext.addAlert(getErrorInfo(err, t))
-                    })
-                }}
+                onClick={() => handleSave(alertContext)}
                 label={t('save')}
                 processingLabel={t('saving')}
               />

From 938a63d86d21638a590a365945c65b7e67a8f90c Mon Sep 17 00:00:00 2001
From: Oksana Bazylieva <obazylie@redhat.com>
Date: Wed, 22 Jul 2026 14:37:57 -0400
Subject: [PATCH 5/7] Add coderabbitai suggestion

Signed-off-by: Oksana Bazylieva <obazylie@redhat.com>
---
 .../components/EditDescription.tsx            | 36 +++++--------------
 1 file changed, 9 insertions(+), 27 deletions(-)

diff --git a/frontend/src/routes/Infrastructure/Clusters/ManagedClusters/components/EditDescription.tsx b/frontend/src/routes/Infrastructure/Clusters/ManagedClusters/components/EditDescription.tsx
index ef9f83c41d..d4cadcfbc8 100644
--- a/frontend/src/routes/Infrastructure/Clusters/ManagedClusters/components/EditDescription.tsx
+++ b/frontend/src/routes/Infrastructure/Clusters/ManagedClusters/components/EditDescription.tsx
@@ -43,7 +43,7 @@ export function EditDescription(props: { resource?: IResource; displayName?: str
 
   const handleSave = (alertContext: IAlertContext) => {
     alertContext.clearAlerts()
-    const resource: IResource = {
+    const resourceToPatch: IResource = {
       apiVersion: props.resource!.apiVersion,
       kind: props.resource!.kind,
       metadata: {
@@ -52,33 +52,15 @@ export function EditDescription(props: { resource?: IResource; displayName?: str
       },
     }
 
-    const patch: { op: string; path: string; value?: unknown }[] = []
-    const key = CLUSTER_DESCRIPTION_ANNOTATION.replaceAll('/', '~1')
-
-    if (props.resource?.metadata?.annotations?.[CLUSTER_DESCRIPTION_ANNOTATION]) {
-      patch.push({
-        op: 'remove',
-        path: `/metadata/annotations/${key}`,
-      })
-    }
-
-    if (description.trim()) {
-      patch.push({
-        op: 'add',
-        path: `/metadata/annotations/${key}`,
-        value: description.trim(),
-      })
-    }
-
-    if (description.trim() && !props.resource?.metadata?.annotations) {
-      patch.unshift({
-        op: 'add',
-        path: '/metadata/annotations',
-        value: {},
-      })
+    const patch = {
+      metadata: {
+        annotations: {
+          [CLUSTER_DESCRIPTION_ANNOTATION]: description.trim() || null,
+        },
+      },
     }
 
-    return patchResource(resource, patch)
+    return patchResource(resourceToPatch, patch)
       .promise.then(() => {
         props.close()
       })
@@ -155,7 +137,7 @@ export function EditDescription(props: { resource?: IResource; displayName?: str
                 onChange={(_event, value) => setDescription(value)}
                 rows={10}
                 resizeOrientation="none"
-                placeholder={t('Enter cluster description (markdown supported)')}
+                placeholder={t('Enter cluster description')}
                 aria-label={t('Description')}
               />
             </FormGroup>

From 941bf2623f6e2259fa36f1b3595224806a07d260 Mon Sep 17 00:00:00 2001
From: Oksana Bazylieva <obazylie@redhat.com>
Date: Wed, 22 Jul 2026 14:57:43 -0400
Subject: [PATCH 6/7] Add tests

Signed-off-by: Oksana Bazylieva <obazylie@redhat.com>
---
 .../components/EditDescription.test.tsx       | 131 ++++++++++++++++++
 1 file changed, 131 insertions(+)
 create mode 100644 frontend/src/routes/Infrastructure/Clusters/ManagedClusters/components/EditDescription.test.tsx

diff --git a/frontend/src/routes/Infrastructure/Clusters/ManagedClusters/components/EditDescription.test.tsx b/frontend/src/routes/Infrastructure/Clusters/ManagedClusters/components/EditDescription.test.tsx
new file mode 100644
index 0000000000..4b7372be5c
--- /dev/null
+++ b/frontend/src/routes/Infrastructure/Clusters/ManagedClusters/components/EditDescription.test.tsx
@@ -0,0 +1,131 @@
+/* Copyright Contributors to the Open Cluster Management project */
+
+import { IResource, ManagedClusterApiVersion, ManagedClusterKind } from '../../../../../resources'
+import { render, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { mockBadRequestStatus, nockIgnoreApiPaths, nockPatch } from '../../../../../lib/nock-util'
+import { EditDescription } from './EditDescription'
+import { axe } from 'jest-axe'
+
+const CLUSTER_DESCRIPTION_ANNOTATION = 'console.open-cluster-management.io/description'
+
+const resource: IResource = {
+  apiVersion: ManagedClusterApiVersion,
+  kind: ManagedClusterKind,
+  metadata: {
+    name: 'test-cluster',
+    annotations: {
+      [CLUSTER_DESCRIPTION_ANNOTATION]: 'Initial description',
+    },
+  },
+}
+
+describe('EditDescription', () => {
+  beforeEach(() => nockIgnoreApiPaths())
+
+  test('renders with existing description', () => {
+    const { getByDisplayValue } = render(<EditDescription resource={resource} close={() => {}} />)
+    expect(getByDisplayValue('Initial description')).toBeInTheDocument()
+  })
+
+  test('has zero accessibility defects', async () => {
+    const { container } = render(<EditDescription resource={resource} close={() => {}} />)
+    expect(await axe(container)).toHaveNoViolations()
+  })
+
+  test('can update description', async () => {
+    const { getByLabelText, getByRole } = render(<EditDescription resource={resource} close={() => {}} />)
+    const textarea = getByLabelText('Description')
+
+    userEvent.clear(textarea)
+    userEvent.type(textarea, 'Updated description text')
+
+    const nockScope = nockPatch(
+      { apiVersion: resource.apiVersion, kind: resource.kind, metadata: { name: resource.metadata!.name } },
+      {
+        metadata: {
+          annotations: {
+            [CLUSTER_DESCRIPTION_ANNOTATION]: 'Updated description text',
+          },
+        },
+      }
+    )
+
+    getByRole('button', { name: /save/i }).click()
+    await waitFor(() => expect(nockScope.isDone()).toBeTruthy())
+  })
+
+  test('can clear description', async () => {
+    const { getByLabelText, getByRole } = render(<EditDescription resource={resource} close={() => {}} />)
+    const textarea = getByLabelText('Description')
+
+    userEvent.clear(textarea)
+
+    const nockScope = nockPatch(
+      { apiVersion: resource.apiVersion, kind: resource.kind, metadata: { name: resource.metadata!.name } },
+      {
+        metadata: {
+          annotations: {
+            [CLUSTER_DESCRIPTION_ANNOTATION]: null,
+          },
+        },
+      }
+    )
+
+    getByRole('button', { name: /save/i }).click()
+    await waitFor(() => expect(nockScope.isDone()).toBeTruthy())
+  })
+
+  test('formatting buttons insert markdown syntax', async () => {
+    const { getByLabelText, getByLabelText: getByAriaLabel } = render(
+      <EditDescription resource={resource} close={() => {}} />
+    )
+    const textarea = getByLabelText('Description') as HTMLTextAreaElement
+
+    userEvent.clear(textarea)
+    userEvent.type(textarea, 'test')
+
+    textarea.setSelectionRange(0, 4)
+
+    const boldButton = getByAriaLabel('Bold')
+    userEvent.click(boldButton)
+
+    await waitFor(() => expect(textarea.value).toBe('**test**'))
+  })
+
+  test('shows errors on save failure', async () => {
+    const { getByLabelText, getByRole } = render(<EditDescription resource={resource} close={() => {}} />)
+    const textarea = getByLabelText('Description')
+
+    userEvent.clear(textarea)
+    userEvent.type(textarea, 'New description')
+
+    const nockScope = nockPatch(
+      { apiVersion: resource.apiVersion, kind: resource.kind, metadata: { name: resource.metadata!.name } },
+      {
+        metadata: {
+          annotations: {
+            [CLUSTER_DESCRIPTION_ANNOTATION]: 'New description',
+          },
+        },
+      },
+      mockBadRequestStatus
+    )
+
+    getByRole('button', { name: /save/i }).click()
+    await waitFor(() => expect(nockScope.isDone()).toBeTruthy())
+  })
+
+  test('works without existing annotations', () => {
+    const resourceWithoutAnnotations: IResource = {
+      apiVersion: ManagedClusterApiVersion,
+      kind: ManagedClusterKind,
+      metadata: {
+        name: 'test-cluster',
+      },
+    }
+    const { getByLabelText } = render(<EditDescription resource={resourceWithoutAnnotations} close={() => {}} />)
+    const textarea = getByLabelText('Description') as HTMLTextAreaElement
+    expect(textarea.value).toBe('')
+  })
+})

From ffa597c60259a573e164fa4d1bd1602b3cc86d7b Mon Sep 17 00:00:00 2001
From: Oksana Bazylieva <obazylie@redhat.com>
Date: Wed, 22 Jul 2026 15:50:10 -0400
Subject: [PATCH 7/7] Add translation

Signed-off-by: Oksana Bazylieva <obazylie@redhat.com>
---
 frontend/public/locales/en/translation.json | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/frontend/public/locales/en/translation.json b/frontend/public/locales/en/translation.json
index f70d81389b..1aaddf729e 100644
--- a/frontend/public/locales/en/translation.json
+++ b/frontend/public/locales/en/translation.json
@@ -608,6 +608,7 @@
   "Base domain resource group name": "Base domain resource group name",
   "Basic information": "Basic information",
   "Binding name": "Binding name",
+  "Bold": "Bold",
   "Branch": "Branch",
   "Bucket": "Bucket",
   "Bucket name": "Bucket name",
@@ -1373,6 +1374,7 @@
   "Edit application set - Pull model": "Edit application set - Pull model",
   "Edit application set - push model": "Edit application set - push model",
   "Edit channel": "Edit channel",
+  "Edit cluster description": "Edit cluster description",
   "Edit credential": "Edit credential",
   "Edit MultiClusterHub": "Edit MultiClusterHub",
   "Edit placement": "Edit placement",
@@ -1427,6 +1429,7 @@
   "Enter a name for this search query": "Enter a name for this search query",
   "Enter a value": "Enter a value",
   "Enter bucket information": "Enter bucket information",
+  "Enter cluster description": "Enter cluster description",
   "Enter CPU architecture": "Enter CPU architecture",
   "Enter description (optional)": "Enter description (optional)",
   "Enter display name (optional)": "Enter display name (optional)",
@@ -1927,6 +1930,7 @@
   "IP address": "IP address",
   "It will not be destroyed when you perform this action._one": "It will not be destroyed when you perform this action.",
   "It will not be destroyed when you perform this action._other": "They will not be destroyed when you perform this action.",
+  "Italic": "Italic",
   "items": "items",
   "items per page": "items per page",
   "Job": "Job",
@@ -1990,6 +1994,8 @@
   "Let’s get started.": "Let’s get started.",
   "Limit the number of clusters selected": "Limit the number of clusters selected",
   "Limits": "Limits",
+  "Link": "Link",
+  "List": "List",
   "List elements": "List elements",
   "Loading": "Loading",
   "Loading diff": "Loading diff",