From 1103cf1d1a8dec0cccef0af947b6628431b25cef Mon Sep 17 00:00:00 2001
From: Carina Ursu <carina@union.ai>
Date: Thu, 19 Oct 2023 13:35:49 -0700
Subject: [PATCH] fix: custom flyteremote usage by protocol

Signed-off-by: Carina Ursu <carina@union.ai>
---
 .../ExecutionDetails/ExecutionNodeURL.tsx     | 40 ++++++++++---------
 .../NodeExecutionTabs/NodeExecutionInputs.tsx | 28 ++++++++-----
 .../NodeExecutionOutputs.tsx                  | 29 +++++++++-----
 3 files changed, 56 insertions(+), 41 deletions(-)

diff --git a/packages/console/src/components/Executions/ExecutionDetails/ExecutionNodeURL.tsx b/packages/console/src/components/Executions/ExecutionDetails/ExecutionNodeURL.tsx
index c0ac37bc0..f4d64506f 100644
--- a/packages/console/src/components/Executions/ExecutionDetails/ExecutionNodeURL.tsx
+++ b/packages/console/src/components/Executions/ExecutionDetails/ExecutionNodeURL.tsx
@@ -6,7 +6,6 @@ import FileCopyIcon from '@material-ui/icons/FileCopy';
 import { DefaultComponentProps } from '@material-ui/core/OverridableComponent';
 import copyToClipboard from 'copy-to-clipboard';
 import { Theme, makeStyles } from '@material-ui/core/styles';
-import { Core } from '@flyteorg/flyteidl-types';
 import {
   primaryHighlightColor,
   separatorColor,
@@ -88,30 +87,34 @@ const CopyButton: React.FC<
 
 /** Fetches and renders the deck data for a given `nodeExecutionId` */
 export const ExecutionNodeURL: React.FC<{
-  nodeExecutionId: Core.NodeExecutionIdentifier;
-  dataSourceURI: string;
+  dataSourceURI?: string;
   copyUrlText: string;
-}> = ({ nodeExecutionId, dataSourceURI, copyUrlText }) => {
+}> = ({ dataSourceURI, copyUrlText }) => {
   const styles = useStyles();
   const [expanded, setExpanded] = React.useState<boolean>(false);
-
-  const project = nodeExecutionId.executionId?.project;
-  const domain = nodeExecutionId.executionId?.domain;
-
-  const code = `from flytekit.remote.remote import FlyteRemote
-from flytekit.configuration import Config
-remote = FlyteRemote(
-    Config.for_endpoint(endpoint="${window.location.host}"),
-    default_project="${project}",
-    default_domain="${domain}"
-)
-remote.get("${dataSourceURI}")`;
+  const isHttps = /^https:/.test(window.location.href);
+
+  const code = isHttps
+    ? // https snippet
+      `from flytekit.remote.remote import FlyteRemote
+  from flytekit.configuration import Config
+  remote = FlyteRemote(
+      Config.for_endpoint("${window.location.host}"),
+  )
+  remote.get("${dataSourceURI}")`
+    : // http snippet
+      `from flytekit.remote.remote import FlyteRemote
+  from flytekit.configuration import Config
+  remote = FlyteRemote(
+      Config.for_endpoint("${window.location.host}", True),
+  )
+  remote.get("${dataSourceURI}")`;
 
   const toggleExpanded = () => {
     setExpanded(!expanded);
   };
 
-  return (
+  return dataSourceURI ? (
     <Box
       className={styles.container}
       sx={{
@@ -165,7 +168,6 @@ remote.get("${dataSourceURI}")`;
               fontSize: '12px', // Adjust the font size as desired
               backgroundColor: errorBackgroundColor,
             }}
-            wrapLongLines={true}
           >
             {code}
           </SyntaxHighlighter>
@@ -182,5 +184,5 @@ remote.get("${dataSourceURI}")`;
         </Box>
       </Box>
     </Box>
-  );
+  ) : null;
 };
diff --git a/packages/console/src/components/Executions/ExecutionDetails/NodeExecutionTabs/NodeExecutionInputs.tsx b/packages/console/src/components/Executions/ExecutionDetails/NodeExecutionTabs/NodeExecutionInputs.tsx
index 07b3025c2..1fb9f702a 100644
--- a/packages/console/src/components/Executions/ExecutionDetails/NodeExecutionTabs/NodeExecutionInputs.tsx
+++ b/packages/console/src/components/Executions/ExecutionDetails/NodeExecutionTabs/NodeExecutionInputs.tsx
@@ -16,17 +16,23 @@ export const NodeExecutionInputs: React.FC<{
   return (
     <WaitForData {...executionData}>
       <PanelSection>
-        {executionData.value?.flyteUrls?.inputs ? (
-          <ExecutionNodeURL
-            nodeExecutionId={execution.id}
-            dataSourceURI={executionData.value?.flyteUrls?.inputs}
-            copyUrlText="Copy Inputs URI"
-          />
-        ) : null}
-        <LiteralMapViewer
-          map={executionData.value.fullInputs}
-          mapTaskIndex={taskIndex}
-        />
+        {(() => {
+          const data = executionData?.value;
+          const fullInputs = data?.fullInputs;
+          const dataSourceURI = data?.flyteUrls?.inputs;
+          const hasInputs = Object.keys(fullInputs?.literals || {}).length > 0;
+          return (
+            <>
+              {hasInputs && taskIndex === undefined ? (
+                <ExecutionNodeURL
+                  dataSourceURI={dataSourceURI}
+                  copyUrlText="Copy Inputs URI"
+                />
+              ) : null}
+              <LiteralMapViewer map={fullInputs} mapTaskIndex={taskIndex} />
+            </>
+          );
+        })()}
       </PanelSection>
     </WaitForData>
   );
diff --git a/packages/console/src/components/Executions/ExecutionDetails/NodeExecutionTabs/NodeExecutionOutputs.tsx b/packages/console/src/components/Executions/ExecutionDetails/NodeExecutionTabs/NodeExecutionOutputs.tsx
index 8f85f6eb9..c74318c9a 100644
--- a/packages/console/src/components/Executions/ExecutionDetails/NodeExecutionTabs/NodeExecutionOutputs.tsx
+++ b/packages/console/src/components/Executions/ExecutionDetails/NodeExecutionTabs/NodeExecutionOutputs.tsx
@@ -16,17 +16,24 @@ export const NodeExecutionOutputs: React.FC<{
   return (
     <WaitForData {...executionData}>
       <PanelSection>
-        {executionData.value?.flyteUrls?.outputs ? (
-          <ExecutionNodeURL
-            nodeExecutionId={execution.id}
-            dataSourceURI={executionData.value?.flyteUrls?.outputs}
-            copyUrlText="Copy Outputs URI"
-          />
-        ) : null}
-        <LiteralMapViewer
-          map={executionData.value.fullOutputs}
-          mapTaskIndex={taskIndex}
-        />
+        {(() => {
+          const data = executionData?.value;
+          const fullOutputs = data?.fullOutputs;
+          const dataSourceURI = data?.flyteUrls?.outputs;
+          const hasOutputs =
+            Object.keys(fullOutputs?.literals || {}).length > 0;
+          return (
+            <>
+              {hasOutputs && taskIndex === undefined ? (
+                <ExecutionNodeURL
+                  dataSourceURI={dataSourceURI}
+                  copyUrlText="Copy Outputs URI"
+                />
+              ) : null}
+              <LiteralMapViewer map={fullOutputs} mapTaskIndex={taskIndex} />
+            </>
+          );
+        })()}
       </PanelSection>
     </WaitForData>
   );