fix: #33 Remove unsupported message and refactor display of URL

Signed-off-by: Laurent Broudoux <[email protected]>
microcks · Jan 25, 2024 · 88ff6d3 · 88ff6d3
1 parent f0e7f74
commit 88ff6d3
Show file tree

Hide file tree

Showing 3 changed files with 104 additions and 69 deletions.
diff --git a/client/src/components/MockDestinationsRow.tsx b/client/src/components/MockDestinationsRow.tsx
@@ -0,0 +1,97 @@
+import WarningAmberIcon from '@mui/icons-material/WarningAmber';
+import Box from '@mui/material/Box';
+import Link from '@mui/material/Link';
+import Typography from '@mui/material/Typography';
+import React from 'react';
+import { ExtensionConfig } from '../types/ExtensionConfig';
+import {
+  Operation,
+  Service,
+} from '../types/Service';
+import { useDockerDesktopClient } from '../utils/ddclient';
+import ClipboardCopy from './ClipboardCopy';
+
+interface MockDestinationsRowProps {
+  service: Service;
+  operation: Operation;
+  config: ExtensionConfig;
+}
+
+const MockDestinationsRow: React.FC<MockDestinationsRowProps> = ({
+  service,
+  operation,
+  config,
+}) => {
+  const ddClient = useDockerDesktopClient();
+
+  const getAsyncUrl = (binding: string): string => {
+    let url = "";
+    if (binding === 'WS') {
+      url = `http://localhost:${8081 + config.portOffset}/api/ws/`;
+    } else if (binding === 'KAFKA') {
+      url = `localhost:${9092 + config.portOffset}`;
+    }
+    return url;
+  }
+
+  const formatAsyncDestination = (binding: string): string => {
+    let name = "";
+    if (binding === 'WS') {
+      name = service.name.replace(/\s/g, '+') +
+        '/' + service.version.replace(/\s/g, '+');
+        '/' + operation.name.replace(operation.method + ' ', '');
+    } else if (binding === 'KAFKA') {
+      name = service.name.replace(/\s/g, '').replace(/-/g, '') +
+        '-' + service.version +
+        '-' + operation.name.replace(operation.method + ' ', '').replace(/\//g, '-');
+    }
+    return name;
+  };
+
+  return (
+    <>
+      {Object.keys(operation.bindings).map((binding: any) =>
+        binding === 'KAFKA' || binding === 'WS' ? (
+          <Box
+            key={binding}
+            marginLeft={1}
+            display="flex"
+            flexDirection="column"
+          >
+            <Typography variant="body1">
+              {binding} endpoint:{' '}
+              <Link variant="subtitle1" underline="hover">
+                {getAsyncUrl(binding)}
+              </Link>
+              <ClipboardCopy copyText={getAsyncUrl(binding)} />
+            </Typography>
+            <Typography variant="body1">
+              {binding} destination:{' '}
+              <Link variant="subtitle1" underline="hover">
+                {formatAsyncDestination(binding)}
+              </Link>
+              <ClipboardCopy copyText={formatAsyncDestination(binding) || ''} />
+            </Typography>
+          </Box>
+        ) : (
+          <Box
+            key={binding}
+            marginLeft={1}
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              flexWrap: 'wrap',
+            }}
+          >
+            <WarningAmberIcon />
+            <Typography variant="body1" component="span" marginLeft={1}>
+            This extension does not support the {binding} binding at this time.
+            </Typography>
+          </Box>
+        ),
+      )}
+    </>
+  )
+};
+
+export default MockDestinationsRow;
diff --git a/client/src/components/MockURLRow.tsx b/client/src/components/MockURLRow.tsx
@@ -9,62 +9,15 @@ import { useDockerDesktopClient } from '../utils/ddclient';
 import ClipboardCopy from './ClipboardCopy';
 
 interface MockURLRowProps {
-  bindings?: any;
   mockURL: string;
-  destination?: string;
 }
 
 const MockURLRow: React.FC<MockURLRowProps> = ({
-  bindings,
-  mockURL,
-  destination,
+  mockURL
 }) => {
   const ddClient = useDockerDesktopClient();
 
-  return bindings ? (
-    <>
-      {Object.keys(bindings).map((binding: any) =>
-        binding == 'KAFKA' ? (
-          <Box
-            key={binding}
-            marginLeft={1}
-            display="flex"
-            flexDirection="column"
-          >
-            <Typography variant="body1">
-              {bindings[binding].type} endpoint:{' '}
-              <Link variant="subtitle1" underline="hover">
-                {mockURL}
-              </Link>
-              <ClipboardCopy copyText={mockURL} />
-            </Typography>
-            <Typography variant="body1">
-              {bindings[binding].type} destination:{' '}
-              <Link variant="subtitle1" underline="hover">
-                {destination}
-              </Link>
-              <ClipboardCopy copyText={destination || ''} />
-            </Typography>
-          </Box>
-        ) : (
-          <Box
-            key={binding}
-            marginLeft={1}
-            sx={{
-              display: 'flex',
-              alignItems: 'center',
-              flexWrap: 'wrap',
-            }}
-          >
-            <WarningAmberIcon />
-            <Typography variant="body1" component="span" marginLeft={1}>
-            This extension does not support the {binding} binding at this time.
-            </Typography>
-          </Box>
-        ),
-      )}
-    </>
-  ) : (
+  return (
     <Typography noWrap>
       <Link
         onClick={() => ddClient.host.openExternal(mockURL)}

diff --git a/client/src/components/ServiceRow.tsx b/client/src/components/ServiceRow.tsx
@@ -26,6 +26,7 @@ import {
 } from '../types/Service';
 import { useDockerDesktopClient } from '../utils/ddclient';
 import MockURLRow from './MockURLRow';
+import MockDestinationsRow from './MockDestinationsRow';
 import ServiceTypeLabel from './ServiceTypeLabel';
 
 const ServiceRow = (props: { service: Service; config: ExtensionConfig }) => {
@@ -59,16 +60,6 @@ const ServiceRow = (props: { service: Service; config: ExtensionConfig }) => {
     }
   };
 
-  const formatDestinationName = (operation: Operation): string => {
-    const name =
-      service.name.replace(/\s/g, '').replace(/-/g, '') +
-      '-' +
-      service.version +
-      '-' +
-      operation.name.replace(operation.method + ' ', '').replace(/\//g, '-');
-    return name;
-  };
-
   const encodeUrl = (url: string): string => {
     return url.replace(/\s/g, '+');
   };
@@ -257,10 +248,6 @@ const ServiceRow = (props: { service: Service; config: ExtensionConfig }) => {
                                         index === 0) && (
                                           <ListItem key={index} disablePadding>
                                             <MockURLRow
-                                              bindings={operation.bindings}
-                                              destination={formatDestinationName(
-                                                operation,
-                                              )}
                                               mockURL={formatMockUrl(
                                                 operation,
                                                 (value as ReqRespPair).response
@@ -272,12 +259,10 @@ const ServiceRow = (props: { service: Service; config: ExtensionConfig }) => {
                                       ) : value.type === 'unidirEvent' &&
                                         index === 0 ? (
                                         <ListItem key={index} disablePadding>
-                                          <MockURLRow
-                                            bindings={operation.bindings}
-                                            destination={formatDestinationName(
-                                              operation,
-                                            )}
-                                            mockURL={formatMockUrl(operation)}
+                                          <MockDestinationsRow
+                                            service={service}
+                                            operation={operation}
+                                            config={config}
                                           />
                                         </ListItem>
                                       ) : (