refactor(overview): replace custom modal implementation with reusable Modal component and update trace display logic

Author: Mehmetcan Güleşçi

frontend/src/components/Connect/Details/Overview/Overview.styled.tsx

@@ -1,50 +1,5 @@
 import styled, { css } from 'styled-components';
 
-export const ModalOverlay = styled.div`
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: ${({ theme }) => theme.modal.overlay};
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
-`;
-
-export const ModalContent = styled.div(
-  ({ theme: { modal } }) => css`
-    background-color: ${modal.backgroundColor};
-    color: ${modal.color};
-    border-radius: 8px;
-    padding: 24px;
-    max-width: 65vw;
-    max-height: 80vh;
-    overflow: auto;
-    position: relative;
-    border: 1px solid ${modal.border.contrast};
-    box-shadow: 0 4px 20px ${modal.shadow};
-  `
-);
-
-export const ModalHeader = styled.div(
-  ({ theme: { modal } }) => css`
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 16px;
-    border-bottom: 1px solid ${modal.border.bottom};
-    padding-bottom: 12px;
-  `
-);
-
-export const ModalTitle = styled.h3`
-  margin: 0;
-  font-size: 18px;
-  font-weight: 600;
-`;
-
 export const WorkerInfo = styled.p(
   ({ theme: { modal } }) => css`
     margin: 4px 0 0 0;
@@ -68,14 +23,3 @@ export const TraceContent = styled.div(
     word-break: break-word;
   `
 );
-
-export const ModalFooter = styled.div(
-  ({ theme: { modal } }) => css`
-    margin-top: 16px;
-    padding-top: 12px;
-    border-top: 1px solid ${modal.border.top};
-    text-align: center;
-    display: flex;
-    justify-content: center;
-  `
-);

frontend/src/components/Connect/Details/Overview/Overview.tsx

@@ -2,11 +2,12 @@ import React, { useState } from 'react';
 import * as C from 'components/common/Tag/Tag.styled';
 import * as Metrics from 'components/common/Metrics';
 import { Button } from 'components/common/Button/Button';
+import Modal from 'components/common/Modal';
 import getTagColor from 'components/common/Tag/getTagColor';
 import { RouterParamsClusterConnectConnector } from 'lib/paths';
 import useAppParams from 'lib/hooks/useAppParams';
 import { useConnector, useConnectorTasks } from 'lib/hooks/api/kafkaConnect';
-import { ConnectorState } from 'generated-sources';
+import { ConnectorState, Connector } from 'generated-sources';
 
 import getTaskMetrics from './getTaskMetrics';
 import * as S from './Overview.styled';
@@ -24,10 +25,12 @@ const Overview: React.FC = () => {
 
   const { running, failed } = getTaskMetrics(tasks);
 
-  const hasTraceInfo = connector.status.trace;
+  const canShowTrace = (connector: Connector) =>
+    connector.status.state === ConnectorState.FAILED &&
+    !!connector.status.trace;
 
   const handleStateClick = () => {
-    if (connector.status.state === ConnectorState.FAILED && hasTraceInfo) {
+    if (canShowTrace(connector)) {
       setShowTraceModal(true);
     }
   };
@@ -50,13 +53,7 @@ const Overview: React.FC = () => {
           <Metrics.Indicator label="State">
             <C.Tag
               color={getTagColor(connector.status.state)}
-              style={{
-                cursor:
-                  connector.status.state === ConnectorState.FAILED &&
-                  hasTraceInfo
-                    ? 'pointer'
-                    : 'default',
-              }}
+              clickable={canShowTrace(connector)}
               onClick={handleStateClick}
             >
               {connector.status.state}
@@ -74,38 +71,30 @@ const Overview: React.FC = () => {
       </Metrics.Wrapper>
 
       {showTraceModal && (
-        <S.ModalOverlay onClick={() => setShowTraceModal(false)}>
-          <S.ModalContent
-            onClick={(e: React.MouseEvent) => e.stopPropagation()}
-          >
-            <S.ModalHeader>
-              <div>
-                <S.ModalTitle>Connector Error Details</S.ModalTitle>
-                {connector.status.workerId && (
-                  <S.WorkerInfo>
-                    Worker: {connector.status.workerId}
-                  </S.WorkerInfo>
-                )}
-              </div>
-            </S.ModalHeader>
+        <Modal
+          isOpen={showTraceModal}
+          onClose={() => setShowTraceModal(false)}
+          title="Connector Error Details"
+          footer={
+            <Button
+              buttonType="primary"
+              buttonSize="M"
+              onClick={() => setShowTraceModal(false)}
+            >
+              Close
+            </Button>
+          }
+        >
+          {connector.status.workerId && (
+            <S.WorkerInfo>Worker: {connector.status.workerId}</S.WorkerInfo>
+          )}
 
+          {connector.status.trace && (
             <S.TraceContent>
-              {connector.status.trace ? (
-                <div>{connector.status.trace}</div>
-              ) : null}
+              <div>{connector.status.trace}</div>
             </S.TraceContent>
-
-            <S.ModalFooter>
-              <Button
-                buttonType="primary"
-                buttonSize="M"
-                onClick={() => setShowTraceModal(false)}
-              >
-                Close
-              </Button>
-            </S.ModalFooter>
-          </S.ModalContent>
-        </S.ModalOverlay>
+          )}
+        </Modal>
       )}
     </>
   );

frontend/src/components/common/Modal/Modal.styled.tsx

@@ -0,0 +1,64 @@
+import styled, { css } from 'styled-components';
+
+export const ModalOverlay = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: ${({ theme }) => theme.modal.overlay};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+`;
+
+export const ModalContent = styled.div<{
+  maxWidth: string;
+  maxHeight: string;
+}>(
+  ({ theme: { modal }, maxWidth, maxHeight }) => css`
+    background-color: ${modal.backgroundColor};
+    color: ${modal.color};
+    border-radius: 8px;
+    padding: 24px;
+    max-width: ${maxWidth};
+    max-height: ${maxHeight};
+    overflow: auto;
+    position: relative;
+    border: 1px solid ${modal.border.contrast};
+    box-shadow: 0 4px 20px ${modal.shadow};
+  `
+);
+
+export const ModalHeader = styled.div(
+  ({ theme: { modal } }) => css`
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16px;
+    border-bottom: 1px solid ${modal.border.bottom};
+    padding-bottom: 12px;
+  `
+);
+
+export const ModalTitle = styled.h3`
+  margin: 0;
+  font-size: 18px;
+  font-weight: 600;
+`;
+
+export const ModalBody = styled.div`
+  margin-bottom: 16px;
+`;
+
+export const ModalFooter = styled.div(
+  ({ theme: { modal } }) => css`
+    margin-top: 16px;
+    padding-top: 12px;
+    border-top: 1px solid ${modal.border.top};
+    text-align: center;
+    display: flex;
+    justify-content: center;
+  `
+);

frontend/src/components/common/Modal/Modal.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+
+import * as S from './Modal.styled';
+
+interface ModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  title?: string;
+  children: React.ReactNode;
+  footer?: React.ReactNode;
+  maxWidth?: string;
+  maxHeight?: string;
+}
+
+const Modal: React.FC<ModalProps> = ({
+  isOpen,
+  onClose,
+  title,
+  children,
+  footer,
+  maxWidth = '65vw',
+  maxHeight = '80vh',
+}) => {
+  if (!isOpen) return null;
+
+  return (
+    <S.ModalOverlay onClick={onClose} role="dialog" aria-label="Modal">
+      <S.ModalContent
+        onClick={(e: React.MouseEvent) => e.stopPropagation()}
+        maxWidth={maxWidth}
+        maxHeight={maxHeight}
+      >
+        {title && (
+          <S.ModalHeader>
+            <S.ModalTitle>{title}</S.ModalTitle>
+          </S.ModalHeader>
+        )}
+
+        <S.ModalBody>{children}</S.ModalBody>
+
+        {footer && <S.ModalFooter>{footer}</S.ModalFooter>}
+      </S.ModalContent>
+    </S.ModalOverlay>
+  );
+};
+
+export default Modal;

frontend/src/components/common/Modal/index.ts

@@ -0,0 +1 @@
+export { default } from './Modal';

frontend/src/components/common/Tag/Tag.styled.tsx

@@ -2,6 +2,7 @@ import styled from 'styled-components';
 
 interface Props {
   color: 'green' | 'gray' | 'yellow' | 'red' | 'white' | 'blue';
+  clickable?: boolean;
 }
 
 export const Tag = styled.span.attrs({ role: 'widget' })<Props>`
@@ -18,6 +19,7 @@ export const Tag = styled.span.attrs({ role: 'widget' })<Props>`
   text-align: center;
   width: max-content;
   margin: 2px 0;
+  cursor: ${({ clickable }) => (clickable ? 'pointer' : 'default')};
 `;
 
 export const MultiLineTag = styled.div.attrs({ role: 'widget' })<Props>`