From ffcc67a3f84d728588326038d3eefbbfc2d69e6f Mon Sep 17 00:00:00 2001 From: Muhsin Shah C P Date: Tue, 18 Jan 2022 20:11:20 +0530 Subject: [PATCH] Fix: datasource Icons doesn't show on templates modal (#1859) * fixed: icons deosn't show * changed getSvgIcon fn as reusable --- .../DataSourceManager/DataSourceManager.jsx | 16 +++++----------- frontend/src/Editor/Editor.jsx | 12 +++--------- .../Editor/LeftSidebar/SidebarDatasources.jsx | 10 +--------- .../TemplateLibraryModal/TemplateDisplay.jsx | 7 +++---- frontend/src/_helpers/appUtils.js | 7 +++++++ 5 files changed, 19 insertions(+), 33 deletions(-) diff --git a/frontend/src/Editor/DataSourceManager/DataSourceManager.jsx b/frontend/src/Editor/DataSourceManager/DataSourceManager.jsx index 344cb67880..f68a037d55 100644 --- a/frontend/src/Editor/DataSourceManager/DataSourceManager.jsx +++ b/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 ; - }; - render() { const { dataSourceMeta, selectedDataSource, options, isSaving, connectionTestError, isCopied } = this.state; @@ -189,7 +183,7 @@ class DataSourceManager extends React.Component { {selectedDataSource && (
- {this.getSvgIcon(dataSourceMeta.kind.toLowerCase(), 35, 35)} + {getSvgIcon(dataSourceMeta.kind.toLowerCase(), 35, 35)}
this.selectDataSource(dataSource)}>
- {this.getSvgIcon(dataSource.kind.toLowerCase())} + {getSvgIcon(dataSource.kind.toLowerCase())}



{dataSource.name} @@ -239,7 +233,7 @@ class DataSourceManager extends React.Component {
this.selectDataSource(dataSource)}>
- {this.getSvgIcon(dataSource.kind.toLowerCase())} + {getSvgIcon(dataSource.kind.toLowerCase())}



{dataSource.name} @@ -256,7 +250,7 @@ class DataSourceManager extends React.Component {
this.selectDataSource(dataSource)}>
- {this.getSvgIcon(dataSource.kind.toLowerCase())} + {getSvgIcon(dataSource.kind.toLowerCase())}



{dataSource.name} diff --git a/frontend/src/Editor/Editor.jsx b/frontend/src/Editor/Editor.jsx index ae6156b82d..4a5917303d 100644 --- a/frontend/src/Editor/Editor.jsx +++ b/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 ; - }; - renderDataSource = (dataSource) => { const sourceMeta = DataSourceTypes.find((source) => source.kind === dataSource.kind); return ( @@ -558,7 +552,7 @@ class Editor extends React.Component { }} > - {this.getSvgIcon(sourceMeta.kind.toLowerCase(), 25, 25)} {dataSource.name} + {getSvgIcon(sourceMeta.kind.toLowerCase(), 25, 25)} {dataSource.name} ); @@ -613,7 +607,7 @@ class Editor extends React.Component { onMouseLeave={() => this.setShowHiddenOptionsForDataQuery(null)} >
- {this.getSvgIcon(sourceMeta.kind.toLowerCase(), 25, 25)} + {getSvgIcon(sourceMeta.kind.toLowerCase(), 25, 25)} {dataQuery.name}
diff --git a/frontend/src/Editor/LeftSidebar/SidebarDatasources.jsx b/frontend/src/Editor/LeftSidebar/SidebarDatasources.jsx index e4eca2343a..dd25a878c9 100644 --- a/frontend/src/Editor/LeftSidebar/SidebarDatasources.jsx +++ b/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 ; - }; - const renderDataSource = (dataSource, idx) => { const sourceMeta = DataSourceTypes.find((source) => source.kind === dataSource.kind); return ( diff --git a/frontend/src/HomePage/TemplateLibraryModal/TemplateDisplay.jsx b/frontend/src/HomePage/TemplateLibraryModal/TemplateDisplay.jsx index 0907491b39..5b1239340f 100644 --- a/frontend/src/HomePage/TemplateLibraryModal/TemplateDisplay.jsx +++ b/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 (
@@ -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 }} > - + {getSvgIcon(source.id, 14, 14)}
{source.name}
diff --git a/frontend/src/_helpers/appUtils.js b/frontend/src/_helpers/appUtils.js index 8e8e22adc8..80969fd8c8 100644 --- a/frontend/src/_helpers/appUtils.js +++ b/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 ; +};