Resolve review comments

NethmiRanasinghe · NethmiRanasinghe · commit 5105e31e574c · 2026-03-12T21:41:07.000+05:30
diff --git a/portals/publisher/src/main/webapp/site/public/locales/en.json b/portals/publisher/src/main/webapp/site/public/locales/en.json
@@ -1636,7 +1636,6 @@
   "Apis.Details.Resources.components.AsyncOperation.no.security": "No security",
   "Apis.Details.Resources.components.AsyncOperation.operations.count.label": "Operations ({count})",
   "Apis.Details.Resources.components.AsyncOperation.security.enabled": "Security enabled",
-  "Apis.Details.Resources.components.AsyncOperation.security.operation": "Security",
   "Apis.Details.Resources.components.Operation.Delete": "Delete",
   "Apis.Details.Resources.components.Operation.Name": "Name",
   "Apis.Details.Resources.components.Operation.Schema": "Schema",
diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/Configuration/Topics.jsx b/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/Configuration/Topics.jsx
@@ -155,6 +155,7 @@ export default function Topics(props) {
                                     ...propVal,
                                     'x-operation': opName,
                                     'x-message': msgKey,
+                                    'x-prop-name': propName,
                                 };
                             });
                         });
@@ -240,11 +241,12 @@ export default function Topics(props) {
                 // Wire payload properties AFTER operations exist
                 if (verbInfo.message && verbInfo.message.payload && verbInfo.message.payload.properties) {
                     const byMessage = {};
-                    Object.entries(verbInfo.message.payload.properties).forEach(([propName, propVal]) => {
+                    Object.entries(verbInfo.message.payload.properties).forEach(([compositeKey, propVal]) => {
                         const msgName = propVal['x-message'] || propVal['x-operation'] || '__default__';
                         byMessage[msgName] = byMessage[msgName] || { opName: propVal['x-operation'], props: {} };
-                        const { 'x-operation': _op, 'x-message': _msg, ...cleanProp } = propVal;
-                        byMessage[msgName].props[propName] = cleanProp;
+                        const originalPropName = propVal['x-prop-name'] || compositeKey;
+                        const { 'x-operation': _op, 'x-message': _msg, 'x-prop-name': _pname, ...cleanProp } = propVal;
+                        byMessage[msgName].props[originalPropName] = cleanProp;
                     });
     
                     Object.entries(byMessage).forEach(([msgName, { opName, props: msgProps }]) => {
@@ -480,21 +482,26 @@ export default function Topics(props) {
                 }
                 return { ...currentOperations, [target]: channelCopy };
             }
-            case 'addPayloadProperty':
+            case 'addPayloadProperty': {
                 updatedOperation[verb].message = updatedOperation[verb].message || { };
                 updatedOperation[verb].message.payload = updatedOperation[verb].message.payload || { };
                 updatedOperation[verb].message.payload.type = 'object';
                 updatedOperation[verb].message.payload.properties = updatedOperation[verb].message.payload.properties
                     || { };
-                updatedOperation[verb].message.payload.properties[value.name] = {
+                const propKey = isAsyncV3
+                    ? `${value.message}__${value.name}`
+                    : value.name;   
+                updatedOperation[verb].message.payload.properties[propKey] = {
                     description: value.description,
                     type: value.type,
                     ...(isAsyncV3 && {
                         'x-operation': value.operation,
                         'x-message': value.message,
+                        'x-prop-name': value.name,
                     }),
                 };
                 break;
+            }
             case 'deletePayloadProperty': {
                 const existingProps = updatedOperation[verb]?.message?.payload?.properties || {};
                 const { [value]: _removed, ...remainingProps } = existingProps;
diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/Policies/PoliciesSection.tsx b/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/Policies/PoliciesSection.tsx
@@ -79,7 +79,7 @@ const PoliciesSection: FC<PolicySectionProps> = ({
 
     // Derive async api version from spec directly
     const isAsyncV3 = openAPISpec?.asyncapi
-        ? parseInt(openAPISpec.asyncapi.split('.')[0], 10) >= 3
+        ? Number.parseInt(openAPISpec.asyncapi.split('.')[0], 10) >= 3
         : false;
 
     return (
diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/Resources/components/AsyncOperation.jsx b/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/Resources/components/AsyncOperation.jsx
@@ -106,7 +106,7 @@ function AsyncOperation(props) {
         : verb;
 
     const theme = useTheme();
-    const backgroundColor = theme.custom.resourceChipColors[verb] || theme.palette.primary.main;
+    const backgroundColor = theme.custom.resourceChipColors[trimmedVerb] || theme.palette.primary.main;
 
     const [isExpanded, setIsExpanded] = useState(false);
     const isUsedInAPIProduct = false;
@@ -183,7 +183,7 @@ function AsyncOperation(props) {
                             width='100%'
                         >
                             <Box display='flex' alignItems='center' gap={2} sx={{ flex: 4 }}>
-                                <Badge invisible={false} color='error' variant='dot'>
+                                <Badge invisible='false' color='error' variant='dot'>
                                     <Button
                                         disableFocusRipple
                                         variant='outlined'
@@ -271,7 +271,7 @@ function AsyncOperation(props) {
                     ) : (
                         <Grid container direction='row' justifyContent='space-between' alignItems='center' spacing={0}>
                             <Grid item md={11}>
-                                <Badge invisible={false} color='error' variant='dot'>
+                                <Badge invisible='false' color='error' variant='dot'>
                                     <Button
                                         disableFocusRipple
                                         variant='outlined'
diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/Resources/components/operationComponents/asyncapi/AddPayloadProperty.jsx b/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/Resources/components/operationComponents/asyncapi/AddPayloadProperty.jsx
@@ -126,15 +126,31 @@ function AddPayloadProperty(props) {
      * Add new property
      */
     function addNewProperty() {
-        if (isAsyncV3 && property.operation && !namedOperations.includes(property.operation)) {
-            Alert.error(intl.formatMessage(
-                {
-                    id: 'Apis.Details.Resources.components.operationComponents.AddParameter.operation.not.found',
-                    defaultMessage: 'Operation "{operation}" does not exist',
-                },
-                { operation: property.operation },
-            ));
-            return;
+        if (isAsyncV3) {
+            if (!property.operation) {
+                Alert.error(intl.formatMessage({
+                    id: 'Apis.Details.Resources.components.operationComponents.AddParameter.operation.required',
+                    defaultMessage: 'Operation name is required',
+                }));
+                return;
+            }
+            if (!property.message) {
+                Alert.error(intl.formatMessage({
+                    id: 'Apis.Details.Resources.components.operationComponents.AddParameter.message.required',
+                    defaultMessage: 'Message name is required',
+                }));
+                return;
+            }
+            if (!namedOperations.includes(property.operation)) {
+                Alert.error(intl.formatMessage(
+                    {
+                        id: 'Apis.Details.Resources.components.operationComponents.AddParameter.operation.not.found',
+                        defaultMessage: 'Operation "{operation}" does not exist',
+                    },
+                    { operation: property.operation },
+                ));
+                return;
+            }
         }
         operationsDispatcher({
             action: 'addPayloadProperty',
@@ -221,7 +237,7 @@ function AddPayloadProperty(props) {
                         }
                     }}
                 />
-            </Grid>            
+            </Grid>
             <Grid item xs={2} md={2}>
                 <FormControl margin='dense' variant='outlined' className={classes.formControl}>
                     {/* <InputLabel ref={inputLabel} htmlFor='data-type' error={isParameterExist}> */}
@@ -365,7 +381,9 @@ AddPayloadProperty.propTypes = {
     operationsDispatcher: PropTypes.func.isRequired,
     target: PropTypes.string.isRequired,
     verb: PropTypes.string.isRequired,
-    intl: PropTypes.shape({}).isRequired,
+    intl: PropTypes.shape({
+        formatMessage: PropTypes.func.isRequired,
+    }).isRequired,
     isAsyncV3: PropTypes.bool,
     namedOperations: PropTypes.arrayOf(PropTypes.string),
 };
diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/Resources/components/operationComponents/asyncapi/Asyncv3OperationsList.jsx b/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/Resources/components/operationComponents/asyncapi/Asyncv3OperationsList.jsx
@@ -138,4 +138,4 @@ Asyncv3OperationsList.defaultProps = {
     disableDelete: false,
 };
 
-export default Asyncv3OperationsList;
+export default Asyncv3OperationsList;
diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/Resources/components/operationComponents/asyncapi/ListPayloadProperties.jsx b/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/Resources/components/operationComponents/asyncapi/ListPayloadProperties.jsx
@@ -133,13 +133,13 @@ export default function ListPayloadProperties(props) {
                         properties && Object.entries(properties).map(([k, v]) => {
                             return (
                                 <TableRow key={k}>
-                                    <TableCell align='left'>{k}</TableCell>
                                     {isAsyncV3 && (
                                         <>
                                             <TableCell align='left'>{v['x-operation'] || '—'}</TableCell>
                                             <TableCell align='left'>{v['x-message'] || '—'}</TableCell>
                                         </>
                                     )}
+                                    <TableCell align='left'>{k}</TableCell>
                                     <TableCell align='left'>{v.type}</TableCell>
                                     <TableCell align='left'>{v.description}</TableCell>
                                     <TableCell align='left'>
