fix(console): open link icon does not work (#6447)

resolves: #6227 ## Checklist - [ ] Title matches [Winglang's style guide](https://www.winglang.io/contributing/start-here/pull_requests#how-are-pull-request-titles-formatted) - [ ] Description explains motivation and solution - [ ] Tests added (always) - [ ] Docs updated (only required for features) - [ ] Added `pr/e2e-full` label if this feature requires end-to-end testing *By submitting this pull request, I confirm that my contribution is made under the terms of the [Wing Cloud Contribution License](https://github.com/winglang/wing/blob/main/CONTRIBUTION_LICENSE.md)*.
winglang · May 9, 2024 · 3f12a74 · 3f12a74
1 parent f1e4261
commit 3f12a74
Show file tree

Hide file tree

Showing 7 changed files with 33 additions and 39 deletions.
diff --git a/apps/wing-console/console/app/test/cloud.website/index.test.ts b/apps/wing-console/console/app/test/cloud.website/index.test.ts
@@ -6,9 +6,5 @@ import { getResourceNode } from "../helpers.js";
 describe(`${__dirname}/main.w`, () => {
   test.skip("open website", async ({ page }) => {
     await getResourceNode(page, "root/Default/Website").click();
-
-    // not working when app mode is not "local"
-    // const url = await page.getByTestId("cloud.website:url").inputValue();
-    //expect(url).toMatch(/http:\/\/127.0.0.1:\d+/);
   });
 });
diff --git a/apps/wing-console/console/design-system/src/attribute.tsx b/apps/wing-console/console/design-system/src/attribute.tsx
@@ -1,3 +1,4 @@
+import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/solid";
 import classNames from "classnames";
 import type { PropsWithChildren } from "react";
 import { useId } from "react";
@@ -42,9 +43,31 @@ export const Attribute = ({
         {name}
       </label>
       {value !== undefined && type === "url" && (
-        <div className="truncate">
-          <Link id={id} href={url} dataTestid={dataTestId}>
+        <div
+          className={
+            (classNames(
+              theme.bgInput,
+              theme.textInput,
+              theme.focusInput,
+              theme.borderInput,
+            ),
+            "truncate")
+          }
+        >
+          <Link
+            className={"flex focus:ring-opacity-0"}
+            id={id}
+            href={url}
+            dataTestid={dataTestId}
+            target={"_blank"}
+          >
             {value}
+            <ArrowTopRightOnSquareIcon
+              className={classNames(
+                theme.text2,
+                "text-sm flex ml-2 h-4 w-4 cursor-pointer",
+              )}
+            />
           </Link>
         </div>
       )}

diff --git a/apps/wing-console/console/ui/src/features/redis-interaction-view.tsx b/apps/wing-console/console/ui/src/features/redis-interaction-view.tsx
@@ -1,7 +1,6 @@
 import { createPersistentState } from "@wingconsole/use-persistent-state";
 import { memo, useCallback } from "react";
 
-import { useOpenExternal } from "../services/use-open-external.js";
 import { useRedis } from "../services/use-redis.js";
 import { useTerminalHistory } from "../shared/use-terminal-history.js";
 import { RedisInteraction } from "../ui/redis-interaction.js";
@@ -28,7 +27,6 @@ export const RedisInteractionView = memo(({ resourcePath }: RedisViewProps) => {
     useState: usePersistentState,
   });
 
-  const { open } = useOpenExternal();
   const { isLoading, redisUrl, execCommand } = useRedis({ resourcePath });
 
   const executeCommand = useCallback(
@@ -41,7 +39,7 @@ export const RedisInteractionView = memo(({ resourcePath }: RedisViewProps) => {
 
       switch (command.toLowerCase()) {
         case "help": {
-          open(REDIS_HELP_URL);
+          window.open(REDIS_HELP_URL, "_blank");
           updateTerminalHistory([
             { type: "message", message: command },
             {

diff --git a/apps/wing-console/console/ui/src/features/unsupported-interaction-view.tsx b/apps/wing-console/console/ui/src/features/unsupported-interaction-view.tsx
@@ -1,6 +1,5 @@
 import { memo } from "react";
 
-import { useOpenExternal } from "../services/use-open-external.js";
 import { UnsupportedInteraction } from "../ui/unsupported-interaction.js";
 
 export interface UnsupportedInteractionViewProps {
@@ -9,13 +8,6 @@ export interface UnsupportedInteractionViewProps {
 
 export const UnsupportedInteractionView = memo(
   ({ resourceType }: UnsupportedInteractionViewProps) => {
-    const { open } = useOpenExternal();
-
-    return (
-      <UnsupportedInteraction
-        onOpenIssueClick={open}
-        resourceType={resourceType}
-      />
-    );
+    return <UnsupportedInteraction resourceType={resourceType} />;
   },
 );
diff --git a/apps/wing-console/console/ui/src/features/website-interaction-view.tsx b/apps/wing-console/console/ui/src/features/website-interaction-view.tsx
@@ -1,7 +1,6 @@
 import { memo, useContext } from "react";
 
 import { AppContext } from "../AppContext.js";
-import { useOpenExternal } from "../services/use-open-external.js";
 import { useWebsite } from "../services/use-website.js";
 import { WebsiteInteraction } from "../ui/website-interaction.js";
 
@@ -11,9 +10,8 @@ export interface WebsiteInteractionViewProps {
 export const WebsiteInteractionView = memo(
   ({ resourcePath }: WebsiteInteractionViewProps) => {
     const { appMode } = useContext(AppContext);
-    const { open } = useOpenExternal();
     const { url } = useWebsite({ resourcePath });
 
-    return <WebsiteInteraction appMode={appMode} onUrlClick={open} url={url} />;
+    return <WebsiteInteraction appMode={appMode} url={url} />;
   },
 );
diff --git a/apps/wing-console/console/ui/src/ui/unsupported-interaction.tsx b/apps/wing-console/console/ui/src/ui/unsupported-interaction.tsx
@@ -4,14 +4,12 @@ import classNames from "classnames";
 
 export interface UnsupportedInteractionProps {
   resourceType: string;
-  onOpenIssueClick: (url: string) => void;
 }
 
 const newIssueUrl = "https://github.com/winglang/wing/issues/new/choose";
 
 export const UnsupportedInteraction = ({
   resourceType,
-  onOpenIssueClick,
 }: UnsupportedInteractionProps) => {
   const { theme } = useTheme();
 
@@ -38,7 +36,7 @@ export const UnsupportedInteraction = ({
             </h3>
             <div className="mt-2">
               <Button
-                onClick={() => onOpenIssueClick(newIssueUrl)}
+                onClick={() => window.open(newIssueUrl, "_blank")}
                 label="Open an issue"
               />
             </div>

diff --git a/apps/wing-console/console/ui/src/ui/website-interaction.tsx b/apps/wing-console/console/ui/src/ui/website-interaction.tsx
@@ -1,38 +1,27 @@
-import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/solid";
-import { Attribute, useTheme } from "@wingconsole/design-system";
-import classNames from "classnames";
+import { Attribute } from "@wingconsole/design-system";
 
 import type { AppMode } from "../AppContext.js";
 
 export interface WebsiteInteractionProps {
   url: string;
   appMode: AppMode;
-  onUrlClick: (url: string) => void;
 }
 export const WebsiteInteraction = ({
   appMode,
   url,
-  onUrlClick,
 }: WebsiteInteractionProps) => {
-  const { theme } = useTheme();
   return (
     <div className="h-full flex-1 flex flex-col text-sm space-y-1">
       <div className="relative grow flex-row flex items-center">
         {appMode === "local" && (
           <>
             <Attribute
               name="URL"
+              type={"url"}
               value={url}
+              url={url}
               noLeftPadding
-              dataTestId="cloud.website:url"
-            />
-            <ArrowTopRightOnSquareIcon
-              className={classNames(
-                theme.text2,
-                "text-sm flex ml-2 h-4 w-4 cursor-pointer",
-              )}
-              onClick={() => onUrlClick(url)}
-              data-testid="cloud.website:open-url"
+              dataTestId="cloud.website:open-url"
             />
           </>
         )}