From 925bb91d8ea383b451382dd04b9f04cf8f432b20 Mon Sep 17 00:00:00 2001
From: Eric Radman <eradman@starfishstorage.com>
Date: Wed, 12 Feb 2025 08:37:40 -0500
Subject: [PATCH] Use absolute path for image resources (#7322)

When MULTI_ORG is enabled, 'static/' resolves to '<org>/static/'
---
 client/app/components/PreviewCard.jsx         |  2 +-
 .../app/components/empty-state/EmptyState.jsx |  6 +++---
 .../components/QuerySourceTypeIcon.jsx        |  2 +-
 .../components/QueryVisualizationTabs.jsx     | 19 +++++++++++--------
 client/app/services/data-source.js            | 16 ++++++++--------
 5 files changed, 24 insertions(+), 21 deletions(-)

diff --git a/client/app/components/PreviewCard.jsx b/client/app/components/PreviewCard.jsx
index ea652e96d7..de2c26b79d 100644
--- a/client/app/components/PreviewCard.jsx
+++ b/client/app/components/PreviewCard.jsx
@@ -69,7 +69,7 @@ UserPreviewCard.defaultProps = {
 // DataSourcePreviewCard
 
 export function DataSourcePreviewCard({ dataSource, withLink, children, ...props }) {
-  const imageUrl = `static/images/db-logos/${dataSource.type}.png`;
+  const imageUrl = `/static/images/db-logos/${dataSource.type}.png`;
   const title = withLink ? <Link href={"data_sources/" + dataSource.id}>{dataSource.name}</Link> : dataSource.name;
   return (
     <PreviewCard {...props} imageUrl={imageUrl} title={title}>
diff --git a/client/app/components/empty-state/EmptyState.jsx b/client/app/components/empty-state/EmptyState.jsx
index 1bc3ce9ddd..eeea9fd6c5 100644
--- a/client/app/components/empty-state/EmptyState.jsx
+++ b/client/app/components/empty-state/EmptyState.jsx
@@ -96,7 +96,7 @@ function EmptyState({
   }, []);
 
   // Show if `onboardingMode=false` or any requested step not completed
-  const shouldShow = !onboardingMode || some(keys(isAvailable), step => isAvailable[step] && !isCompleted[step]);
+  const shouldShow = !onboardingMode || some(keys(isAvailable), (step) => isAvailable[step] && !isCompleted[step]);
 
   if (!shouldShow) {
     return null;
@@ -181,7 +181,7 @@ function EmptyState({
   ];
 
   const stepsItems = getStepsItems ? getStepsItems(defaultStepsItems) : defaultStepsItems;
-  const imageSource = illustrationPath ? illustrationPath : "static/images/illustrations/" + illustration + ".svg";
+  const imageSource = illustrationPath ? illustrationPath : "/static/images/illustrations/" + illustration + ".svg";
 
   return (
     <div className="empty-state-wrapper">
@@ -196,7 +196,7 @@ function EmptyState({
         </div>
         <div className="empty-state__steps">
           <h4>Let&apos;s get started</h4>
-          <ol>{stepsItems.map(item => item.node)}</ol>
+          <ol>{stepsItems.map((item) => item.node)}</ol>
           {helpMessage}
         </div>
       </div>
diff --git a/client/app/pages/queries/components/QuerySourceTypeIcon.jsx b/client/app/pages/queries/components/QuerySourceTypeIcon.jsx
index a9cb210831..ef639ee9c8 100644
--- a/client/app/pages/queries/components/QuerySourceTypeIcon.jsx
+++ b/client/app/pages/queries/components/QuerySourceTypeIcon.jsx
@@ -2,7 +2,7 @@ import PropTypes from "prop-types";
 import React from "react";
 
 export function QuerySourceTypeIcon(props) {
-  return <img src={`static/images/db-logos/${props.type}.png`} width="20" alt={props.alt} />;
+  return <img src={`/static/images/db-logos/${props.type}.png`} width="20" alt={props.alt} />;
 }
 
 QuerySourceTypeIcon.propTypes = {
diff --git a/client/app/pages/queries/components/QueryVisualizationTabs.jsx b/client/app/pages/queries/components/QueryVisualizationTabs.jsx
index 60785e3b5f..555fd029a8 100644
--- a/client/app/pages/queries/components/QueryVisualizationTabs.jsx
+++ b/client/app/pages/queries/components/QueryVisualizationTabs.jsx
@@ -18,7 +18,7 @@ function EmptyState({ title, message, refreshButton }) {
     <div className="query-results-empty-state">
       <div className="empty-state-content">
         <div>
-          <img src="static/images/illustrations/no-query-results.svg" alt="No Query Results Illustration" />
+          <img src="/static/images/illustrations/no-query-results.svg" alt="No Query Results Illustration" />
         </div>
         <h3>{title}</h3>
         <div className="m-b-20">{message}</div>
@@ -40,7 +40,7 @@ EmptyState.defaultProps = {
 
 function TabWithDeleteButton({ visualizationName, canDelete, onDelete, ...props }) {
   const handleDelete = useCallback(
-    e => {
+    (e) => {
       e.stopPropagation();
       Modal.confirm({
         title: "Delete Visualization",
@@ -111,7 +111,8 @@ export default function QueryVisualizationTabs({
         className="add-visualization-button"
         data-test="NewVisualization"
         type="link"
-        onClick={() => onAddVisualization()}>
+        onClick={() => onAddVisualization()}
+      >
         <i className="fa fa-plus" aria-hidden="true" />
         <span className="m-l-5 hidden-xs">Add Visualization</span>
       </Button>
@@ -119,7 +120,7 @@ export default function QueryVisualizationTabs({
   }
 
   const orderedVisualizations = useMemo(() => orderBy(visualizations, ["id"]), [visualizations]);
-  const isFirstVisualization = useCallback(visId => visId === orderedVisualizations[0].id, [orderedVisualizations]);
+  const isFirstVisualization = useCallback((visId) => visId === orderedVisualizations[0].id, [orderedVisualizations]);
   const isMobile = useMedia({ maxWidth: 768 });
 
   const [filters, setFilters] = useState([]);
@@ -132,9 +133,10 @@ export default function QueryVisualizationTabs({
       data-test="QueryPageVisualizationTabs"
       animated={false}
       tabBarGutter={0}
-      onChange={activeKey => onChangeTab(+activeKey)}
-      destroyInactiveTabPane>
-      {orderedVisualizations.map(visualization => (
+      onChange={(activeKey) => onChangeTab(+activeKey)}
+      destroyInactiveTabPane
+    >
+      {orderedVisualizations.map((visualization) => (
         <TabPane
           key={`${visualization.id}`}
           tab={
@@ -144,7 +146,8 @@ export default function QueryVisualizationTabs({
               visualizationName={visualization.name}
               onDelete={() => onDeleteVisualization(visualization.id)}
             />
-          }>
+          }
+        >
           {queryResult ? (
             <VisualizationRenderer
               visualization={visualization}
diff --git a/client/app/services/data-source.js b/client/app/services/data-source.js
index a3f96d0295..b5617bc326 100644
--- a/client/app/services/data-source.js
+++ b/client/app/services/data-source.js
@@ -4,19 +4,19 @@ import { fetchDataFromJob } from "@/services/query-result";
 
 export const SCHEMA_NOT_SUPPORTED = 1;
 export const SCHEMA_LOAD_ERROR = 2;
-export const IMG_ROOT = "static/images/db-logos";
+export const IMG_ROOT = "/static/images/db-logos";
 
 function mapSchemaColumnsToObject(columns) {
-  return map(columns, column => (isObject(column) ? column : { name: column }));
+  return map(columns, (column) => (isObject(column) ? column : { name: column }));
 }
 
 const DataSource = {
   query: () => axios.get("api/data_sources"),
   get: ({ id }) => axios.get(`api/data_sources/${id}`),
   types: () => axios.get("api/data_sources/types"),
-  create: data => axios.post(`api/data_sources`, data),
-  save: data => axios.post(`api/data_sources/${data.id}`, data),
-  test: data => axios.post(`api/data_sources/${data.id}/test`),
+  create: (data) => axios.post(`api/data_sources`, data),
+  save: (data) => axios.post(`api/data_sources/${data.id}`, data),
+  test: (data) => axios.post(`api/data_sources/${data.id}/test`),
   delete: ({ id }) => axios.delete(`api/data_sources/${id}`),
   fetchSchema: (data, refresh = false) => {
     const params = {};
@@ -27,15 +27,15 @@ const DataSource = {
 
     return axios
       .get(`api/data_sources/${data.id}/schema`, { params })
-      .then(data => {
+      .then((data) => {
         if (has(data, "job")) {
-          return fetchDataFromJob(data.job.id).catch(error =>
+          return fetchDataFromJob(data.job.id).catch((error) =>
             error.code === SCHEMA_NOT_SUPPORTED ? [] : Promise.reject(new Error(data.job.error))
           );
         }
         return has(data, "schema") ? data.schema : Promise.reject();
       })
-      .then(tables => map(tables, table => ({ ...table, columns: mapSchemaColumnsToObject(table.columns) })));
+      .then((tables) => map(tables, (table) => ({ ...table, columns: mapSchemaColumnsToObject(table.columns) })));
   },
 };