Elgato_dark/ToolJet
1
0
Fork 0
mirror of https://github.com/ToolJet/ToolJet synced 2026-05-05 22:38:48 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

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

Browse source 
* fixed: icons deosn't show

* changed getSvgIcon fn as reusable
This commit is contained in:
Muhsin Shah C P 2022-01-18 20:11:20 +05:30 committed by GitHub
parent 4487641384
commit ffcc67a3f8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 19 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
frontend/src/Editor/DataSourceManager/DataSourceManager.jsx
View file

@ -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}

12
frontend/src/Editor/Editor.jsx
View file

@ -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">

10
frontend/src/Editor/LeftSidebar/SidebarDatasources.jsx
View file

@ -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 (

7
frontend/src/HomePage/TemplateLibraryModal/TemplateDisplay.jsx
View file

@ -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
src={`/assets/images/icons/editor/datasources/${source.id}.svg`}
style={{ width: 14, height: 14 }}
/>
{getSvgIcon(source.id, 14, 14)}
</div>
<div className="d-flex flex-rows align-items-center ms-1">{source.name}</div>
</div>

7
frontend/src/_helpers/appUtils.js
View file

@ -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 }} />;
};