From dfabcd13cb57d423f627545699d12b365b9afc55 Mon Sep 17 00:00:00 2001
From: Shailesh Parmar <shailesh.parmar.webdev@gmail.com>
Date: Thu, 9 Oct 2025 20:35:07 +0530
Subject: [PATCH] feat: Introduce RequiredLabel component for consistent
 required field styling

---
 ...InlineTestCaseIncidentStatus.component.tsx | 23 +++----------------
 .../RequiredLabel/RequiredLabel.styled.tsx    | 21 +++++++++++++++++
 2 files changed, 24 insertions(+), 20 deletions(-)
 create mode 100644 openmetadata-ui/src/main/resources/ui/src/components/common/MuiComponents/RequiredLabel/RequiredLabel.styled.tsx

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DataQuality/IncidentManager/TestCaseStatus/InlineTestCaseIncidentStatus.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DataQuality/IncidentManager/TestCaseStatus/InlineTestCaseIncidentStatus.component.tsx
index a7521ceb0ac..fed8c70c050 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/DataQuality/IncidentManager/TestCaseStatus/InlineTestCaseIncidentStatus.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/DataQuality/IncidentManager/TestCaseStatus/InlineTestCaseIncidentStatus.component.tsx
@@ -54,6 +54,7 @@ import {
 } from '../../../../utils/EntityUtils';
 import { showErrorToast } from '../../../../utils/ToastUtils';
 import Loader from '../../../common/Loader/Loader';
+import { RequiredLabel } from '../../../common/MuiComponents/RequiredLabel/RequiredLabel.styled';
 import { UserTag } from '../../../common/UserTag/UserTag.component';
 import { TestCaseStatusIncidentManagerProps } from './TestCaseIncidentManagerStatus.interface';
 
@@ -589,16 +590,7 @@ const InlineTestCaseIncidentStatus = ({
 
         <Divider sx={{ borderColor: 'grey.200' }} />
         <Box sx={{ p: 4 }}>
-          <Typography
-            sx={{
-              fontSize: 13,
-              fontWeight: 500,
-              color: 'grey.800',
-              mb: 1,
-              '&::after': { content: '" *"', color: 'error.main' },
-            }}>
-            {t('label.reason')}
-          </Typography>
+          <RequiredLabel mb={1}>{t('label.reason')}</RequiredLabel>
           <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2, mb: 5 }}>
             {Object.values(TestCaseFailureReasonType).map((reason) => (
               <Chip
@@ -649,16 +641,7 @@ const InlineTestCaseIncidentStatus = ({
             ))}
           </Box>
 
-          <Typography
-            sx={{
-              fontSize: 13,
-              fontWeight: 500,
-              mb: 1,
-              color: 'grey.800',
-              '&::after': { content: '" *"', color: 'error.main' },
-            }}>
-            {t('label.comment')}
-          </Typography>
+          <RequiredLabel mb={1}>{t('label.comment')}</RequiredLabel>
           <TextField
             fullWidth
             multiline
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/MuiComponents/RequiredLabel/RequiredLabel.styled.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/MuiComponents/RequiredLabel/RequiredLabel.styled.tsx
new file mode 100644
index 00000000000..035bdad3c52
--- /dev/null
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/MuiComponents/RequiredLabel/RequiredLabel.styled.tsx
@@ -0,0 +1,21 @@
+/*
+ *  Copyright 2025 Collate.
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+
+import { Typography, styled } from '@mui/material';
+
+export const RequiredLabel = styled(Typography)(({ theme }) => ({
+  fontSize: 13,
+  fontWeight: 500,
+  color: theme.palette.grey[800],
+  '&::after': { content: '" *"', color: theme.palette.error.main },
+}));