From db890c92575f96bb59d2e0b3787f04eb46214286 Mon Sep 17 00:00:00 2001 From: navaneeth Date: Sat, 1 May 2021 19:41:22 +0530 Subject: [PATCH] Tooltips and display names for inspector elements --- frontend/src/Editor/Components/components.js | 169 +++++++----------- .../src/Editor/Inspector/Components/Table.jsx | 9 +- .../src/Editor/Inspector/Elements/Code.jsx | 7 +- .../src/Editor/Inspector/Elements/Color.jsx | 8 +- .../src/Editor/Inspector/Elements/Json.jsx | 8 +- .../src/Editor/Inspector/Elements/Text.jsx | 11 +- .../src/Editor/Inspector/EventSelector.jsx | 5 +- frontend/src/Editor/Inspector/Inspector.jsx | 4 +- frontend/src/Editor/Inspector/Utils.js | 8 +- 9 files changed, 102 insertions(+), 127 deletions(-) diff --git a/frontend/src/Editor/Components/components.js b/frontend/src/Editor/Components/components.js index 0b9a5111a6..ae386448f0 100644 --- a/frontend/src/Editor/Components/components.js +++ b/frontend/src/Editor/Components/components.js @@ -6,22 +6,22 @@ export const componentTypes = [ description: 'Display paginated tabular data', component: 'Table', properties: { - title: { type: 'string' }, - data: { type: 'code' }, - visible: { type: 'string' }, - loadingState: { type: 'string' }, - columns: { type: 'array' } + title: { type: 'string', displayName: 'Title' }, + data: { type: 'code', displayName: 'Table Data' }, + visible: { type: 'string', displayName: 'Show when' }, + loadingState: { type: 'string', displayName: 'Loading state' }, + columns: { type: 'array', displayName: 'Table Columns' } }, defaultSize: { - width: 800, + width: 810, height: 300 }, - events: [ - 'onRowClicked', - 'onBulkUpdate' - ], + events: { + onRowClicked: { displayName: 'On row clicked'}, + onBulkUpdate: { displayName: 'Bulk update query'} + }, styles: { - textColor: { type: 'color' } + textColor: { type: 'color', displayName: 'Text Color' } }, exposedVariables: { selectedRow: {}, @@ -70,16 +70,16 @@ export const componentTypes = [ height: 30 }, properties: { - text: { type: 'string' }, - visible: { type: 'string' }, - loadingState: { type: 'string' } + text: { type: 'string', displayName: 'Button Text' }, + visible: { type: 'string', displayName: 'Show when', tip: 'Widget will be hidden if the value of this field is false.' }, + loadingState: { type: 'string', displayName: 'Loading State'} + }, + events: { + onClick: { displayName: 'On click'}, }, - events: [ - 'onClick' - ], styles: { - backgroundColor: { type: 'color' }, - textColor: { type: 'color' } + backgroundColor: { type: 'color', displayName: 'Background color' }, + textColor: { type: 'color', displayName: 'Text color' } }, exposedVariables: {}, definition: { @@ -112,11 +112,9 @@ export const componentTypes = [ height: 30 }, properties: { - placeholder: { type: 'string' } + placeholder: { type: 'string', displayName: 'Placeholder' } }, - events: [ - - ], + events: {}, styles: { }, @@ -146,13 +144,11 @@ export const componentTypes = [ height: 60 }, properties: { - format: { type: 'string' }, - enableTime: { type: 'string' }, - enableDate: { type: 'string' } + format: { type: 'string', displayName: 'Format' }, + enableTime: { type: 'string', displayName: 'Enable time selection?' }, + enableDate: { type: 'string', displayName: 'Enable date selection?' } }, - events: [ - - ], + events: {}, styles: { }, @@ -184,11 +180,9 @@ export const componentTypes = [ height: 32 }, properties: { - format: { type: 'string' } + format: { type: 'string', displayName: 'Format' } }, - events: [ - - ], + events: {}, styles: { }, @@ -219,11 +213,12 @@ export const componentTypes = [ height: 60 }, properties: { - label: { type: 'string' } + label: { type: 'string', displayName: 'Label' } + }, + events: { + onCheck: { displayName: 'On check'}, + onUnCheck: { displayName: 'On uncheck'}, }, - events: [ - 'onCheck', 'onUnCheck' - ], styles: { }, @@ -260,12 +255,10 @@ export const componentTypes = [ height: 100 }, properties: { - value: { type: 'string' }, - placeholder: { type: 'string' } + value: { type: 'string', displayName: 'Value' }, + placeholder: { type: 'string', displayName: 'Placeholder' } }, - events: [ - - ], + events: {}, styles: { }, @@ -292,9 +285,9 @@ export const componentTypes = [ description: 'Display markdown or HTML', component: 'Text', properties: { - text: { type: 'code' }, - visible: { type: 'string' }, - loadingState: { type: 'string' } + text: { type: 'code', displayName: 'Text' }, + visible: { type: 'string', displayName: 'Show when' }, + loadingState: { type: 'string', displayName: 'Show loading state' } }, defaultSize: { width: 100, @@ -304,7 +297,7 @@ export const componentTypes = [ ], styles: { - textColor: { type: 'color' } + textColor: { type: 'color', displayName: 'Text Color' } }, exposedVariables: {}, definition: { @@ -332,12 +325,12 @@ export const componentTypes = [ }, component: 'Image', properties: { - source: { type: 'string' }, - visible: { type: 'string' } + source: { type: 'string', displayName: 'URL' }, + visible: { type: 'string', displayName: 'Show when' } + }, + events: { + onClick: { displayName: 'On click'}, }, - events: [ - 'onClick' - ], styles: { }, @@ -366,11 +359,9 @@ export const componentTypes = [ }, component: 'Container', properties: { - visible: { type: 'string' } + visible: { type: 'string', displayName: 'Show when' } }, - events: [ - - ], + events: {}, styles: { backgroundColor: { type: 'color' } }, @@ -396,14 +387,14 @@ export const componentTypes = [ }, component: 'DropDown', properties: { - label: { type: 'string' }, - value: { type: 'string' }, - values: { type: 'json' }, - display_values: { type: 'string' } + label: { type: 'string', displayName: 'Label' }, + value: { type: 'string', displayName: 'Default value' }, + values: { type: 'json', displayName: 'Option values' }, + display_values: { type: 'string', displayName: 'Option labels' } + }, + events: { + onSelect: { displayName: 'On select'}, }, - events: [ - 'onSelect' - ], styles: { }, @@ -437,14 +428,14 @@ export const componentTypes = [ }, component: 'Multiselect', properties: { - label: { type: 'string' }, - values: { type: 'string' }, - option_values: { type: 'string' }, - display_values: { type: 'string' } + label: { type: 'string', displayName: 'Label' }, + value: { type: 'string', displayName: 'Default value' }, + values: { type: 'json', displayName: 'Option values' }, + display_values: { type: 'string', displayName: 'Option labels' } + }, + events: { + onSelect: { displayName: 'On select'}, }, - events: [ - 'onSelect' - ], styles: { }, @@ -467,40 +458,6 @@ export const componentTypes = [ } } }, - { - icon: 'https://www.svgrepo.com/show/16476/map.svg', - name: 'Map', - displayName: 'Map', - description: 'Display maps with markers.', - component: 'Map', - properties: { - label: { type: 'string' }, - values: { type: 'string' }, - display_values: { type: 'string' } - }, - events: [ - 'onMarkerClick', 'onMarkerCreate' - ], - styles: { - - }, - exposedVariables: {}, - definition: { - properties: { - label: { value: 'https://www.svgrepo.com/show/46775/drop-down-list.svg' }, - values: [1, 2, 3], - display_values: ['one', 'two', 'three'], - visible: { value: true } - }, - events: { - onMarkerClick: { }, - onMarkerCreate: { } - }, - styles: { - - } - } - }, { icon: 'https://www.svgrepo.com/show/5908/text-document.svg', name: 'RichTextEditor', @@ -512,11 +469,9 @@ export const componentTypes = [ height: 100 }, properties: { - placeholder: { type: 'string' } + placeholder: { type: 'string', displayName: 'Placeholder' } }, - events: [ - - ], + events: {}, styles: { }, diff --git a/frontend/src/Editor/Inspector/Components/Table.jsx b/frontend/src/Editor/Inspector/Components/Table.jsx index ad8875fe12..52a4ae59fa 100644 --- a/frontend/src/Editor/Inspector/Components/Table.jsx +++ b/frontend/src/Editor/Inspector/Components/Table.jsx @@ -199,17 +199,18 @@ class Table extends React.Component { /> this.onActionButtonPropertyChanged(index, 'backgroundColor', color)} /> this.onActionButtonPropertyChanged(index, 'textColor', color)} />
- {renderEvent(component, eventUpdated, dataQueries, eventOptionUpdated, 'onRowClicked')} + {renderEvent(component, eventUpdated, dataQueries, eventOptionUpdated, 'onRowClicked', componentMeta.events['onRowClicked'])}
diff --git a/frontend/src/Editor/Inspector/Elements/Code.jsx b/frontend/src/Editor/Inspector/Elements/Code.jsx index 5551647efa..d9d5c6ebf1 100644 --- a/frontend/src/Editor/Inspector/Elements/Code.jsx +++ b/frontend/src/Editor/Inspector/Elements/Code.jsx @@ -1,10 +1,13 @@ import React from 'react'; import { CodeBuilder } from '../../CodeBuilder/CodeBuilder'; +import { getToolTipProps } from './utils'; export const Code = ({ - param, definition, onChange, paramType, dataQueries, components + param, definition, onChange, paramType, dataQueries, components, componentMeta }) => { const initialValue = definition ? definition.value : ''; + const paramMeta = componentMeta[paramType][param.name]; + const displayName = paramMeta.displayName || param.name; function handleCodeChanged(value) { onChange(param, 'value', value, paramType); @@ -12,7 +15,7 @@ export const Code = ({ return (
- + { const [showPicker, setShowPicker] = useState(false); @@ -14,9 +15,12 @@ export const Color = ({ left: '0px' }; + const paramMeta = componentMeta[paramType][param.name]; + const displayName = paramMeta.displayName || param.name; + return (
- + {showPicker && (
diff --git a/frontend/src/Editor/Inspector/Elements/Json.jsx b/frontend/src/Editor/Inspector/Elements/Json.jsx index 96f6d92544..aa059d35f3 100644 --- a/frontend/src/Editor/Inspector/Elements/Json.jsx +++ b/frontend/src/Editor/Inspector/Elements/Json.jsx @@ -1,9 +1,10 @@ import React from 'react'; import CodeMirror from '@uiw/react-codemirror'; import 'codemirror/theme/duotone-light.css'; +import { getToolTipProps } from './utils'; export const Json = ({ - param, definition, onChange, paramType + param, definition, onChange, paramType, componentMeta }) => { const value = definition ? definition.value @@ -13,9 +14,12 @@ export const Json = ({ "email": "hanson@example.com" }]`; + const paramMeta = componentMeta[paramType][param.name]; + const displayName = paramMeta.displayName || param.name; + return (
- + { const value = definition ? definition.value : ''; - + const paramMeta = componentMeta[paramType][param.name]; + const displayName = paramMeta.displayName || param.name; + return ( -
- +
+ onChange(param, 'value', e.target.value, paramType)} diff --git a/frontend/src/Editor/Inspector/EventSelector.jsx b/frontend/src/Editor/Inspector/EventSelector.jsx index 9e022f5a9d..085e12b235 100644 --- a/frontend/src/Editor/Inspector/EventSelector.jsx +++ b/frontend/src/Editor/Inspector/EventSelector.jsx @@ -8,7 +8,8 @@ export const EventSelector = ({ eventUpdated, eventOptionUpdated, dataQueries, - extraData + extraData, + eventMeta }) => { function onChange(value) { const query = dataQueries.find((dataquery) => dataquery.id === value); @@ -28,7 +29,7 @@ export const EventSelector = ({ return (
- + { return { name: action.name, value: action.id }; diff --git a/frontend/src/Editor/Inspector/Inspector.jsx b/frontend/src/Editor/Inspector/Inspector.jsx index 02810bc15c..2d2708144e 100644 --- a/frontend/src/Editor/Inspector/Inspector.jsx +++ b/frontend/src/Editor/Inspector/Inspector.jsx @@ -4,6 +4,7 @@ import { Table } from './Components/Table'; import { renderElement, renderEvent } from './Utils'; import OverlayTrigger from 'react-bootstrap/OverlayTrigger'; import Popover from 'react-bootstrap/Popover'; +import ReactTooltip from 'react-tooltip'; export const Inspector = ({ selectedComponent, @@ -70,6 +71,7 @@ export const Inspector = ({ return (
+
{component.component.name} @@ -118,7 +120,7 @@ export const Inspector = ({ {Object.keys(componentMeta.properties).map((property) => renderElement(component, componentMeta, paramUpdated, dataQueries, property, 'properties', components))} {Object.keys(componentMeta.styles).map((style) => renderElement(component, componentMeta, paramUpdated, dataQueries, style, 'styles', components))}
- {componentMeta.events.map((event) => renderEvent(component, eventUpdated, dataQueries, eventOptionUpdated, event))} + {Object.keys(componentMeta.events).map((eventName) => renderEvent(component, eventUpdated, dataQueries, eventOptionUpdated, eventName, componentMeta.events[eventName]))}
)}
diff --git a/frontend/src/Editor/Inspector/Utils.js b/frontend/src/Editor/Inspector/Utils.js index e95fc72cb1..18e1e48ab3 100644 --- a/frontend/src/Editor/Inspector/Utils.js +++ b/frontend/src/Editor/Inspector/Utils.js @@ -27,17 +27,19 @@ export function renderElement(component, componentMeta, paramUpdated, dataQuerie onChange={paramUpdated} paramType={paramType} components={components} + componentMeta={componentMeta} /> ); } -export function renderEvent(component, eventUpdated, dataQueries, eventOptionUpdated, param) { - let definition = component.component.definition.events[param]; +export function renderEvent(component, eventUpdated, dataQueries, eventOptionUpdated, eventName, eventMeta) { + let definition = component.component.definition.events[eventName]; definition = definition || { }; return (