Fix: datasource Icons doesn't show on templates modal (#1859)

* fixed: icons deosn't show

* changed getSvgIcon fn as reusable

frontend/src/Editor/DataSourceManager/DataSourceManager.jsx

@@ -3,7 +3,7 @@ import { datasourceService, authenticationService } from '@/_services';
 import Modal from 'react-bootstrap/Modal';
 import Button from 'react-bootstrap/Button';
 import { toast } from 'react-hot-toast';
-import { allSvgs } from '@tooljet/plugins/client';
+import { getSvgIcon } from '@/_helpers/appUtils';
 import { TestConnection } from './TestConnection';
 import {
   DataBaseSources,
@@ -166,12 +166,6 @@ class DataSourceManager extends React.Component {
     this.setState({ connectionTestError: data });
   };
 
-  getSvgIcon = (key, height = 50, width = 50) => {
-    const Icon = allSvgs[key];
-
-    return <Icon style={{ height, width }} />;
-  };
-
   render() {
     const { dataSourceMeta, selectedDataSource, options, isSaving, connectionTestError, isCopied } = this.state;
 
@@ -189,7 +183,7 @@ class DataSourceManager extends React.Component {
             <Modal.Title>
               {selectedDataSource && (
                 <div className="row">
-                  {this.getSvgIcon(dataSourceMeta.kind.toLowerCase(), 35, 35)}
+                  {getSvgIcon(dataSourceMeta.kind.toLowerCase(), 35, 35)}
                   <div className="input-icon" style={{ width: '160px' }}>
                     <input
                       type="text"
@@ -222,7 +216,7 @@ class DataSourceManager extends React.Component {
                       <div className="card mb-3" role="button" onClick={() => this.selectDataSource(dataSource)}>
                         <div className="card-body">
                           <center>
-                            {this.getSvgIcon(dataSource.kind.toLowerCase())}
+                            {getSvgIcon(dataSource.kind.toLowerCase())}
                             <br></br>
                             <br></br>
                             {dataSource.name}
@@ -239,7 +233,7 @@ class DataSourceManager extends React.Component {
                       <div className="card mb-3" role="button" onClick={() => this.selectDataSource(dataSource)}>
                         <div className="card-body">
                           <center>
-                            {this.getSvgIcon(dataSource.kind.toLowerCase())}
+                            {getSvgIcon(dataSource.kind.toLowerCase())}
                             <br></br>
                             <br></br>
                             {dataSource.name}
@@ -256,7 +250,7 @@ class DataSourceManager extends React.Component {
                       <div className="card mb-3" role="button" onClick={() => this.selectDataSource(dataSource)}>
                         <div className="card-body">
                           <center>
-                            {this.getSvgIcon(dataSource.kind.toLowerCase())}
+                            {getSvgIcon(dataSource.kind.toLowerCase())}
                             <br></br>
                             <br></br>
                             {dataSource.name}

frontend/src/Editor/Editor.jsx

@@ -23,10 +23,10 @@ import {
   runQuery,
   setStateAsync,
   computeComponentState,
+  getSvgIcon,
 } from '@/_helpers/appUtils';
 import { Confirm } from './Viewer/Confirm';
 import ReactTooltip from 'react-tooltip';
-import { allSvgs } from '@tooljet/plugins/client';
 import CommentNotifications from './CommentNotifications';
 import { WidgetManager } from './WidgetManager';
 import Fuse from 'fuse.js';
@@ -541,12 +541,6 @@ class Editor extends React.Component {
     this.saveApp(id, { name }, notify);
   };
 
-  getSvgIcon = (key, height = 50, width = 50) => {
-    const Icon = allSvgs[key];
-
-    return <Icon style={{ height, width }} />;
-  };
-
   renderDataSource = (dataSource) => {
     const sourceMeta = DataSourceTypes.find((source) => source.kind === dataSource.kind);
     return (
@@ -558,7 +552,7 @@ class Editor extends React.Component {
         }}
       >
         <td>
-          {this.getSvgIcon(sourceMeta.kind.toLowerCase(), 25, 25)} {dataSource.name}
+          {getSvgIcon(sourceMeta.kind.toLowerCase(), 25, 25)} {dataSource.name}
         </td>
       </tr>
     );
@@ -613,7 +607,7 @@ class Editor extends React.Component {
         onMouseLeave={() => this.setShowHiddenOptionsForDataQuery(null)}
       >
         <div className="col">
-          {this.getSvgIcon(sourceMeta.kind.toLowerCase(), 25, 25)}
+          {getSvgIcon(sourceMeta.kind.toLowerCase(), 25, 25)}
           <span className="p-3">{dataQuery.name}</span>
         </div>
         <div className="col-auto mx-1">

frontend/src/Editor/LeftSidebar/SidebarDatasources.jsx

@@ -5,21 +5,13 @@ import { DataSourceManager } from '../DataSourceManager';
 import { DataSourceTypes } from '../DataSourceManager/SourceComponents';
 import OverlayTrigger from 'react-bootstrap/esm/OverlayTrigger';
 import Tooltip from 'react-bootstrap/esm/Tooltip';
-import { allSvgs } from '@tooljet/plugins/client';
+import { getSvgIcon } from '@/_helpers/appUtils';
 
 export const LeftSidebarDataSources = ({ appId, editingVersionId, darkMode, dataSources = [], dataSourcesChanged }) => {
   const [open, trigger, content] = usePopover(false);
   const [showDataSourceManagerModal, toggleDataSourceManagerModal] = React.useState(false);
   const [selectedDataSource, setSelectedDataSource] = React.useState(null);
 
-  // TODO: move this to a react component
-  // TODO: add falback svg icon if icon not found
-  const getSvgIcon = (key, height = 50, width = 50) => {
-    const Icon = allSvgs[key];
-
-    return <Icon style={{ height, width }} />;
-  };
-
   const renderDataSource = (dataSource, idx) => {
     const sourceMeta = DataSourceTypes.find((source) => source.kind === dataSource.kind);
     return (

frontend/src/HomePage/TemplateLibraryModal/TemplateDisplay.jsx

@@ -1,8 +1,10 @@
 import React from 'react';
 import { Container, Row, Badge } from 'react-bootstrap';
+import { getSvgIcon } from '@/_helpers/appUtils';
 
 export default function TemplateDisplay(props) {
   const { id, name, description, sources } = props?.app ?? {};
+
   return (
     <div className="template-display">
       <Container fluid className="pt-2">
@@ -29,10 +31,7 @@ export default function TemplateDisplay(props) {
                     className="d-flex flex-rows align-items-center justify-content-center"
                     style={{ backgroundColor: 'white', borderRadius: 20, height: 20, width: 20 }}
                   >
-                    <img
+                    {getSvgIcon(source.id, 14, 14)}
-                      src={`/assets/images/icons/editor/datasources/${source.id}.svg`}
-                      style={{ width: 14, height: 14 }}
-                    />
                   </div>
                   <div className="d-flex flex-rows align-items-center ms-1">{source.name}</div>
                 </div>

frontend/src/_helpers/appUtils.js

@@ -13,6 +13,7 @@ import Tooltip from 'react-bootstrap/Tooltip';
 import { componentTypes } from '../Editor/Components/components';
 import generateCSV from '@/_lib/generate-csv';
 import generateFile from '@/_lib/generate-file';
+import { allSvgs } from '@tooljet/plugins/client';
 
 export function setStateAsync(_ref, state) {
   return new Promise((resolve) => {
@@ -715,3 +716,9 @@ export function computeComponentState(_ref, components) {
     defaultComponentStateComputed: true,
   });
 }
+
+export const getSvgIcon = (key, height = 50, width = 50) => {
+  const Icon = allSvgs[key];
+
+  return <Icon style={{ height, width }} />;
+};