fix(published-ports): fix published port link and into a new component [EE-6592] (#11656)

app/react/docker/components/ImageStatus/PublishedPortLink.tsx

@@ -0,0 +1,48 @@
+import { ExternalLink } from 'lucide-react';
+
+import { Icon } from '@@/Icon';
+
+type Props = {
+  hostURL?: string;
+  hostPort?: string | number;
+  containerPort?: string | number;
+};
+
+export function PublishedPortLink({ hostURL, hostPort, containerPort }: Props) {
+  return (
+    <a
+      className="image-tag"
+      href={generateContainerURL(hostURL, hostPort, containerPort)}
+      target="_blank"
+      rel="noreferrer"
+    >
+      <Icon icon={ExternalLink} />
+      {hostPort}:{containerPort}
+    </a>
+  );
+}
+
+function generateContainerURL(
+  hostURL?: string,
+  hostPort?: string | number,
+  containerPort?: string | number
+) {
+  const url = stripTrailingSlash(hostURL?.toLowerCase());
+
+  if (!url.startsWith('http://') && !url.startsWith('https://')) {
+    if (String(containerPort).endsWith('443')) {
+      return `https://${url}:${hostPort}`;
+    }
+
+    return `http://${url}:${hostPort}`;
+  }
+
+  return `${url}:${hostPort}`;
+}
+
+function stripTrailingSlash(url?: string) {
+  if (!url) {
+    return '';
+  }
+  return url.endsWith('/') ? url.slice(0, -1) : url;
+}

app/react/docker/containers/ListView/ContainersDatatable/columns/ports.tsx

@@ -1,11 +1,8 @@
 import _ from 'lodash';
-import { ExternalLink } from 'lucide-react';
 import { CellContext } from '@tanstack/react-table';
 
 import type { DockerContainer } from '@/react/docker/containers/types';
-import { getSchemeFromPort } from '@/react/common/network-utils';
-
-import { Icon } from '@@/Icon';
+import { PublishedPortLink } from '@/react/docker/components/ImageStatus/PublishedPortLink';
 
 import { useRowContext } from '../RowContext';
 
@@ -32,46 +29,12 @@ function Cell({ row }: CellContext<DockerContainer, string>) {
     return '-';
   }
 
-  const publicURL = getPublicUrl(environment.PublicURL);
-
-  return _.uniqBy(ports, 'public').map((port) => {
-    let url = publicURL || port.host || '';
-    if (!url.startsWith('http')) {
-      const scheme = getSchemeFromPort(port.private);
-      url = `${scheme}://${url}`;
-    }
-    url = `${url}:${port.public}`;
-
-    return (
-      <a
-        key={`${port.host}:${port.public}`}
-        className="image-tag"
-        href={url}
-        target="_blank"
-        rel="noreferrer"
-      >
-        <Icon icon={ExternalLink} />
-        {port.public}:{port.private}
-      </a>
-    );
-  });
-}
-
-function getPublicUrl(url?: string): string {
-  if (!url) {
-    return '';
-  }
-
-  // Add protocol if missing
-  const u =
-    url.startsWith('http://') || url.startsWith('https://')
-      ? url
-      : `http://${url}`;
-
-  try {
-    const parsedUrl = new URL(u);
-    return `${parsedUrl.protocol}://${parsedUrl.hostname}`;
-  } catch (error) {
-    return '';
-  }
+  return _.uniqBy(ports, 'public').map((port) => (
+    <PublishedPortLink
+      key={`${port.host}:${port.public}`}
+      hostPort={port.public}
+      containerPort={port.private}
+      hostURL={environment.PublicURL || port.host}
+    />
+  ));
 }

app/react/docker/services/ListView/ServicesDatatable/columns/ports.tsx

@@ -1,11 +1,8 @@
-import { ExternalLink } from 'lucide-react';
 import { CellContext } from '@tanstack/react-table';
 
 import { ServiceViewModel } from '@/docker/models/service';
 import { useCurrentEnvironment } from '@/react/hooks/useCurrentEnvironment';
-import { getSchemeFromPort } from '@/react/common/network-utils';
-
-import { Icon } from '@@/Icon';
+import { PublishedPortLink } from '@/react/docker/components/ImageStatus/PublishedPortLink';
 
 import { columnHelper } from './helper';
 
@@ -37,24 +34,13 @@ function Cell({
     return '-';
   }
 
-  const { PublicURL: publicUrl } = environmentQuery.data;
-
   return ports
     .filter((port) => port.PublishedPort)
-    .map((port) => {
-      const scheme = getSchemeFromPort(port.TargetPort);
-
-      return (
-        <a
-          key={`${publicUrl}:${port.PublishedPort}`}
-          className="image-tag vertical-center"
-          href={`${scheme}://${publicUrl}:${port.PublishedPort}`}
-          target="_blank"
-          rel="noreferrer"
-        >
-          <Icon icon={ExternalLink} />
-          {port.PublishedPort}:{port.TargetPort}
-        </a>
-      );
-    });
+    .map((port) => (
+      <PublishedPortLink
+        hostPort={port.PublishedPort}
+        containerPort={port.TargetPort}
+        hostURL={environmentQuery.data.PublicURL}
+      />
+    ));
 }