Add component for description with an edit button (#884)

Add component for domain description with an edit button that goes to Settings

Author: adhityamamallan

src/views/domain-page/config/domain-page-metadata-extended-table.config.ts

@@ -2,6 +2,7 @@ import { createElement } from 'react';
 
 import { type MetadataItem } from '../domain-page-metadata/domain-page-metadata.types';
 import DomainPageMetadataClusters from '../domain-page-metadata-clusters/domain-page-metadata-clusters';
+import DomainPageMetadataDescription from '../domain-page-metadata-description/domain-page-metadata-description';
 import DomainPageMetadataViewJson from '../domain-page-metadata-view-json/domain-page-metadata-view-json';
 
 const domainPageMetadataExtendedTableConfig = [
@@ -17,9 +18,10 @@ const domainPageMetadataExtendedTableConfig = [
     label: 'Description',
     description: 'Brief, high-level description of the Cadence domain',
     kind: 'simple',
-    // TODO: create a Domain Description component that opens settings to edit
     getValue: ({ domainDescription }) =>
-      createElement('div', {}, domainDescription.description),
+      createElement(DomainPageMetadataDescription, {
+        description: domainDescription.description,
+      }),
   },
   {
     key: 'owner',

src/views/domain-page/domain-page-metadata-description/__tests__/domain-page-metadata-description.test.tsx

@@ -0,0 +1,26 @@
+import { render, screen } from '@/test-utils/rtl';
+
+import DomainPageMetadataDescription from '../domain-page-metadata-description';
+
+jest.mock('next/navigation', () => ({
+  useParams: jest
+    .fn()
+    .mockReturnValue({ domain: 'test-domain', cluster: 'test-cluster' }),
+}));
+
+describe(DomainPageMetadataDescription.name, () => {
+  it('displays the correct description', () => {
+    render(<DomainPageMetadataDescription description="Test Description" />);
+    expect(screen.getByText('Test Description')).toBeInTheDocument();
+  });
+
+  it('renders the edit button with correct link', () => {
+    render(<DomainPageMetadataDescription description="Test Description" />);
+    const button = screen.getByText('Edit in Settings');
+    expect(button).toBeInTheDocument();
+    expect(button).toHaveAttribute(
+      'href',
+      '/domains/test-domain/test-cluster/settings'
+    );
+  });
+});

src/views/domain-page/domain-page-metadata-description/domain-page-metadata-description.styles.ts

@@ -0,0 +1,10 @@
+import { styled as createStyled } from 'baseui';
+
+export const styled = {
+  DescriptionContainer: createStyled('div', ({ $theme }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    gap: $theme.sizing.scale500,
+  })),
+};

src/views/domain-page/domain-page-metadata-description/domain-page-metadata-description.tsx

@@ -0,0 +1,30 @@
+import { Button, KIND, SHAPE, SIZE } from 'baseui/button';
+import Link from 'next/link';
+import { useParams } from 'next/navigation';
+import { MdEdit } from 'react-icons/md';
+
+import { type DomainPageTabsParams } from '../domain-page-tabs/domain-page-tabs.types';
+
+import { styled } from './domain-page-metadata-description.styles';
+import { type Props } from './domain-page-metadata-description.types';
+
+export default function DomainPageMetadataDescription(props: Props) {
+  const { domain: encodedDomain, cluster: encodedCluster } =
+    useParams<DomainPageTabsParams>();
+
+  return (
+    <styled.DescriptionContainer>
+      {props.description}
+      <Button
+        kind={KIND.secondary}
+        shape={SHAPE.pill}
+        size={SIZE.mini}
+        startEnhancer={<MdEdit />}
+        $as={Link}
+        href={`/domains/${encodedDomain}/${encodedCluster}/settings`}
+      >
+        Edit in Settings
+      </Button>
+    </styled.DescriptionContainer>
+  );
+}

src/views/domain-page/domain-page-metadata-description/domain-page-metadata-description.types.ts

@@ -0,0 +1,3 @@
+export type Props = {
+  description: string;
+};