\ No newline at end of file
diff --git a/docs/docs/widgets/divider.md b/docs/docs/widgets/divider.md
new file mode 100644
index 0000000000..8edd95159b
--- /dev/null
+++ b/docs/docs/widgets/divider.md
@@ -0,0 +1,19 @@
+---
+sidebar_position: 20
+---
+
+# Divider
+
+Divider widget is used to add separator between components.
+
+
+
+
+#### Properties
+
+| properties | description |
+| ----------- | ----------- |
+| Divider Color | It is used to set the color of the divider. Use hex code to set the background color. |
+| Visibility | This property is used to set the visibility of the divider. The property accepts Boolean value. |
+| Show on Desktop | This property have toggle switch. If enabled, the divider will display in the desktop view else it will not appear. |
+| Show on Mobile | This property have toggle switch. If enabled, the divider will display in the mobile view else it will not appear. |
\ No newline at end of file
diff --git a/docs/docs/widgets/star.md b/docs/docs/widgets/star.md
index 3dd72daaa1..6117bb648a 100644
--- a/docs/docs/widgets/star.md
+++ b/docs/docs/widgets/star.md
@@ -20,7 +20,7 @@ This event is triggered when an star is clicked.
| Label | The text to be used as the label for the star rating. |
| Number of stars | Initial number of stars in the list on initial load. `default: 5`|
| Default no of selected stars | This property specifies the default count of stars that are selected on the initial load. `default: 5` (integer)|
-| Enable half star | Allos selection of half stars if enabled. `default: false` (bool)|
+| Enable half star | Allows selection of half stars if enabled. `default: false` (bool)|
| Tooltips |This is used for displaying informative tooltips on each star, and it is mapped to the index of the star. `default: []` (array of strings ) |
| Star Color | Display color of the star. `default: #ffb400` (color hex) |
diff --git a/docs/docs/widgets/table.md b/docs/docs/widgets/table.md
index 2d38e5a2b1..446fa0cb8e 100644
--- a/docs/docs/widgets/table.md
+++ b/docs/docs/widgets/table.md
@@ -137,3 +137,9 @@ If the data of a cell is changed, "save changes" button will be shown at the bot
| Show search box | It can be used to show or hide Table Search box. |
| Show download button | Show or hide download button at the Table footer. |
| Show filter button | Show or hide filter button at the Table footer. |
+
+#### Styles
+
+| Style | Description |
+| ----------- | ----------- |
+| Cell size | This decides the size of table cells. You can choose between a `Compact` size for table cells or a `Spacious` size |
\ No newline at end of file
diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js
index 8aef8d234e..87458a98e8 100644
--- a/docs/docusaurus.config.js
+++ b/docs/docusaurus.config.js
@@ -2,7 +2,7 @@
module.exports = {
title: 'ToolJet - Documentation',
tagline: 'Build and deploy internal tools.',
- url: 'https://tooljet.io',
+ url: 'https://docs.tooljet.io',
baseUrl: '/',
onBrokenLinks: 'ignore',
onBrokenMarkdownLinks: 'warn',
diff --git a/docs/static/img/datasource-reference/mo-connect.png b/docs/static/img/datasource-reference/mo-connect.png
index 450644a23c..94602fb13a 100644
Binary files a/docs/static/img/datasource-reference/mo-connect.png and b/docs/static/img/datasource-reference/mo-connect.png differ
diff --git a/docs/static/img/datasource-reference/pg-connect.png b/docs/static/img/datasource-reference/pg-connect.png
index 5f76bf4c6e..8de9b3f1b9 100644
Binary files a/docs/static/img/datasource-reference/pg-connect.png and b/docs/static/img/datasource-reference/pg-connect.png differ
diff --git a/docs/static/img/widgets/divider/divider.gif b/docs/static/img/widgets/divider/divider.gif
new file mode 100644
index 0000000000..03d06f7287
Binary files /dev/null and b/docs/static/img/widgets/divider/divider.gif differ
diff --git a/frontend/assets/images/icons/widgets/passwordInput.svg b/frontend/assets/images/icons/widgets/passwordInput.svg
new file mode 100644
index 0000000000..b8d8ce7444
--- /dev/null
+++ b/frontend/assets/images/icons/widgets/passwordInput.svg
@@ -0,0 +1,9 @@
+
\ No newline at end of file
diff --git a/frontend/config/entrypoint.sh b/frontend/config/entrypoint.sh
index 502897495e..058ae7cc0e 100755
--- a/frontend/config/entrypoint.sh
+++ b/frontend/config/entrypoint.sh
@@ -3,7 +3,7 @@ set -eu
export SERVER_HOST="${SERVER_HOST:=server}"
export SERVER_USER="${SERVER_USER:=root}"
-VARS_TO_SUBSTITUTE="$SERVER_HOST:$SERVER_USER"
+VARS_TO_SUBSTITUTE='$SERVER_HOST:$SERVER_USER'
envsubst "${VARS_TO_SUBSTITUTE}" < /etc/openresty/nginx.conf.template > /etc/openresty/nginx.conf
diff --git a/frontend/src/Editor/ActionTypes.js b/frontend/src/Editor/ActionTypes.js
index 0111eb2619..c264786d54 100644
--- a/frontend/src/Editor/ActionTypes.js
+++ b/frontend/src/Editor/ActionTypes.js
@@ -37,4 +37,12 @@ export const ActionTypes = [
id: 'copy-to-clipboard',
options: [{ name: 'copy-to-clipboard', type: 'text', default: '' }],
},
+ {
+ name: 'Set local storage',
+ id: 'set-localstorage-value',
+ options: [
+ { name: 'key', type: 'code', default: '' },
+ { name: 'value', type: 'code', default: '' },
+ ],
+ },
];
diff --git a/frontend/src/Editor/Box.jsx b/frontend/src/Editor/Box.jsx
index 2d19875484..1dca4b5692 100644
--- a/frontend/src/Editor/Box.jsx
+++ b/frontend/src/Editor/Box.jsx
@@ -21,9 +21,12 @@ import { ToggleSwitch } from './Components/Toggle';
import { RadioButton } from './Components/RadioButton';
import { StarRating } from './Components/StarRating';
import { Divider } from './Components/Divider';
+import { PasswordInput } from './Components/PasswordInput';
import { renderTooltip } from '../_helpers/appUtils';
import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
import '@/_styles/custom.scss';
+import { resolveProperties, resolveStyles } from './component-properties-resolution';
+import { validateWidget } from '@/_helpers/utils';
const AllComponents = {
Button,
@@ -48,6 +51,7 @@ const AllComponents = {
RadioButton,
StarRating,
Divider,
+ PasswordInput,
};
export const Box = function Box({
@@ -83,6 +87,16 @@ export const Box = function Box({
}
const ComponentToRender = AllComponents[component.component];
+ const resolvedProperties = resolveProperties(component, currentState);
+ const resolvedStyles = resolveStyles(component, currentState);
+ const exposedVariables = currentState?.components[component.name] ?? {};
+
+ const fireEvent = (eventName, options) => onEvent(eventName, { ...options, component });
+ const validate = (value) =>
+ validateWidget({
+ ...{ widgetValue: value },
+ ...{ validationObject: component.definition.validation, currentState },
+ });
return (
diff --git a/frontend/src/Editor/Components/Button.jsx b/frontend/src/Editor/Components/Button.jsx
index cfcec96817..74d283748f 100644
--- a/frontend/src/Editor/Components/Button.jsx
+++ b/frontend/src/Editor/Components/Button.jsx
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
import { resolveReferences, resolveWidgetFieldValue } from '@/_helpers/utils';
var tinycolor = require('tinycolor2');
-export const Button = function Button({ id, width, height, component, onComponentClick, currentState }) {
+export const Button = function Button({ width, height, component, currentState, fireEvent }) {
const [loadingState, setLoadingState] = useState(false);
useEffect(() => {
@@ -17,11 +17,13 @@ export const Button = function Button({ id, width, height, component, onComponen
const text = component.definition.properties.text.value;
const backgroundColor = component.definition.styles.backgroundColor.value;
const color = component.definition.styles.textColor.value;
+ const borderRadius = component.definition.styles.borderRadius?.value ?? 3; // using 2 for backward compatibility
const widgetVisibility = component.definition.styles?.visibility?.value ?? true;
const disabledState = component.definition.styles?.disabledState?.value ?? false;
const parsedDisabledState =
typeof disabledState !== 'boolean' ? resolveWidgetFieldValue(disabledState, currentState) : disabledState;
+ const parsedBorderRadius = typeof borderRadius !== 'number' ? resolveWidgetFieldValue(borderRadius, currentState) : borderRadius;
let parsedWidgetVisibility = widgetVisibility;
try {
@@ -33,6 +35,7 @@ export const Button = function Button({ id, width, height, component, onComponen
const computedStyles = {
backgroundColor,
color,
+ borderRadius: `${parsedBorderRadius}px`,
width,
height,
display: parsedWidgetVisibility ? '' : 'none',
@@ -46,7 +49,7 @@ export const Button = function Button({ id, width, height, component, onComponen
style={computedStyles}
onClick={(event) => {
event.stopPropagation();
- onComponentClick(id, component);
+ fireEvent('onClick');
}}
>
{resolveReferences(text, currentState)}
diff --git a/frontend/src/Editor/Components/Datepicker.jsx b/frontend/src/Editor/Components/Datepicker.jsx
index f8073952d8..3d0ddc1d7f 100644
--- a/frontend/src/Editor/Components/Datepicker.jsx
+++ b/frontend/src/Editor/Components/Datepicker.jsx
@@ -48,7 +48,9 @@ export const Datepicker = function Datepicker({
}
function onDateChange(event) {
- const value = event._isAMomentObject ? event.format(dateFormat.value) : event;
+ const selectedDateFormat = enableTime ? `${dateFormat.value} LT` : dateFormat.value;
+ const value = event._isAMomentObject ? event.format(selectedDateFormat) : event;
+
setDateText(value);
onComponentOptionChanged(component, 'value', value);
}
@@ -99,7 +101,7 @@ export const Datepicker = function Datepicker({
);
}}
diff --git a/frontend/src/Editor/Components/DraftEditor.jsx b/frontend/src/Editor/Components/DraftEditor.jsx
index a54498f5c9..f882db9b8b 100644
--- a/frontend/src/Editor/Components/DraftEditor.jsx
+++ b/frontend/src/Editor/Components/DraftEditor.jsx
@@ -46,13 +46,16 @@ class StyleButton extends React.Component {
}
}
-const BLOCK_TYPES = [
+const HEADINGS = [
{ label: 'H1', style: 'header-one' },
{ label: 'H2', style: 'header-two' },
{ label: 'H3', style: 'header-three' },
{ label: 'H4', style: 'header-four' },
{ label: 'H5', style: 'header-five' },
{ label: 'H6', style: 'header-six' },
+]
+
+const BLOCK_TYPES = [
{
label: 
,
style: 'blockquote',
@@ -78,6 +81,26 @@ const BlockStyleControls = (props) => {
return (
<>
+
- ,
style: 'blockquote',
@@ -78,6 +81,26 @@ const BlockStyleControls = (props) => {
return (
<>
+
+
+
{BLOCK_TYPES.map((type) => (
+ {
+ HEADINGS.map((type) => (
+
+
+
+
-
+
-
+
-
+
-
+
{
+ const value = currentState?.components[component?.name]?.value;
+ const [text, setText] = useState(() => value ?? '');
+
+ const placeholder = component.definition.properties.placeholder.value;
+ const widgetVisibility = component.definition.styles?.visibility?.value ?? true;
+ const disabledState = component.definition.styles?.disabledState?.value ?? false;
+
+ const parsedDisabledState =
+ typeof disabledState !== 'boolean' ? resolveWidgetFieldValue(disabledState, currentState) : disabledState;
+
+ const parsedWidgetVisibility =
+ typeof widgetVisibility !== 'boolean' ? resolveWidgetFieldValue(widgetVisibility, currentState) : widgetVisibility;
+
+ const currentValidState = currentState?.components[component?.name]?.isValid;
+
+ const validationData = validate(value);
+
+ const { isValid, validationError } = validationData;
+
+ if (currentValidState !== isValid) {
+ onComponentOptionChanged(component, 'isValid', isValid);
+ }
+
+ return (
+
+ {
+ event.stopPropagation();
+ onComponentClick(id, component);
+ }}
+ onChange={(e) => {
+ setText(e.target.value);
+ onComponentOptionChanged(component, 'value', e.target.value);
+ }}
+ type={'password'}
+ className={`form-control ${!isValid ? 'is-invalid' : ''} validation-without-icon rounded-0`}
+ placeholder={placeholder}
+ value={text}
+ style={{ width, height, display: parsedWidgetVisibility ? '' : 'none' }}
+ />
+
+
+ );
+};
diff --git a/frontend/src/Editor/Components/Table/Pagination.jsx b/frontend/src/Editor/Components/Table/Pagination.jsx
index bc701d116a..dcf343ba25 100644
--- a/frontend/src/Editor/Components/Table/Pagination.jsx
+++ b/frontend/src/Editor/Components/Table/Pagination.jsx
@@ -21,7 +21,10 @@ export const Pagination = function Pagination({
setPageCount(lastActivePageIndex);
} else if (serverSide || lastActivePageIndex === 0) {
setPageIndex(1);
+ } else {
+ gotoPage(lastActivePageIndex + 1);
}
+ // eslint-disable-next-line react-hooks/exhaustive-deps
}, [serverSide, lastActivePageIndex]);
function gotoPage(page) {
diff --git a/frontend/src/Editor/Components/Table/Table.jsx b/frontend/src/Editor/Components/Table/Table.jsx
index e72117efe7..1f22f8e8a6 100644
--- a/frontend/src/Editor/Components/Table/Table.jsx
+++ b/frontend/src/Editor/Components/Table/Table.jsx
@@ -73,6 +73,8 @@ export function Table({
let tableType = tableTypeProperty ? tableTypeProperty.value : 'table-bordered';
tableType = tableType === '' ? 'table-bordered' : tableType;
+ const cellSizeType = component.definition.styles.cellSize?.value;
+
const widgetVisibility = component.definition.styles?.visibility?.value ?? true;
const disabledState = component.definition.styles?.disabledState?.value ?? false;
@@ -148,7 +150,7 @@ export function Table({
let newFilters = filters;
newFilters.splice(index, 1);
setFilters(newFilters);
- setAllFilters(newFilters);
+ setAllFilters(newFilters.filter((filter) => filter.id !== ''));
}
function clearFilters() {
@@ -754,6 +756,10 @@ export function Table({
}
}, [state.columnResizing.isResizingColumn]);
+ useEffect(() => {
+ if (pageCount <= pageIndex) gotoPage(pageCount - 1);
+ }, [pageCount]);
+
return (
{validationError}
+
@@ -888,7 +895,7 @@ export function Table({
{(clientSidePagination || serverSidePagination) && (
{
- setText(newText);
- onComponentOptionChanged(component, 'value', newText);
+ setExposedVariable('value', properties.value);
// eslint-disable-next-line react-hooks/exhaustive-deps
- }, [newText]);
-
- const placeholder = component.definition.properties.placeholder.value;
- const widgetVisibility = component.definition.styles?.visibility?.value ?? true;
- const disabledState = component.definition.styles?.disabledState?.value ?? false;
-
- const parsedDisabledState =
- typeof disabledState !== 'boolean' ? resolveWidgetFieldValue(disabledState, currentState) : disabledState;
-
- let parsedWidgetVisibility = widgetVisibility;
-
- try {
- parsedWidgetVisibility = resolveReferences(parsedWidgetVisibility, currentState, []);
- } catch (err) {
- console.log(err);
- }
+ }, [properties.value]);
return (
);
};
diff --git a/frontend/src/Editor/Components/TextInput.jsx b/frontend/src/Editor/Components/TextInput.jsx
index 3632d78184..d35d5789cc 100644
--- a/frontend/src/Editor/Components/TextInput.jsx
+++ b/frontend/src/Editor/Components/TextInput.jsx
@@ -1,5 +1,5 @@
import React, { useEffect, useState } from 'react';
-import { resolveReferences, resolveWidgetFieldValue, validateWidget } from '@/_helpers/utils';
+import { resolveReferences, resolveWidgetFieldValue } from '@/_helpers/utils';
export const TextInput = function TextInput({
id,
@@ -9,6 +9,7 @@ export const TextInput = function TextInput({
onComponentClick,
currentState,
onComponentOptionChanged,
+ validate,
}) {
const placeholder = component.definition.properties.placeholder.value;
const widgetVisibility = component.definition.styles?.visibility?.value ?? true;
@@ -35,11 +36,7 @@ export const TextInput = function TextInput({
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [newText]);
- const validationData = validateWidget({
- validationObject: component.definition.validation,
- widgetValue: value,
- currentState,
- });
+ const validationData = validate(value);
const { isValid, validationError } = validationData;
diff --git a/frontend/src/Editor/Components/Toggle.jsx b/frontend/src/Editor/Components/Toggle.jsx
index fcf6ed795b..15958f4901 100644
--- a/frontend/src/Editor/Components/Toggle.jsx
+++ b/frontend/src/Editor/Components/Toggle.jsx
@@ -37,9 +37,9 @@ export const ToggleSwitch = ({
const toggleSwitchColorProperty = component.definition.styles.toggleSwitchColor;
const toggleSwitchColor = toggleSwitchColorProperty ? toggleSwitchColorProperty.value : '#3c92dc';
const textColor = textColorProperty ? textColorProperty.value : '#000';
- const widgetVisibility = component.definition.styles?.visibility?.value ?? true;
- const disabledState = component.definition.styles?.disabledState?.value ?? false;
-
+ const widgetVisibility = component.definition.styles.visibility?.value ?? true;
+ const disabledState = component.definition.styles.disabledState?.value ?? false;
+
const parsedDisabledState =
typeof disabledState !== 'boolean' ? resolveWidgetFieldValue(disabledState, currentState) : disabledState;
diff --git a/frontend/src/Editor/Components/components.js b/frontend/src/Editor/Components/components.js
index b267743cf6..a7a601dd02 100644
--- a/frontend/src/Editor/Components/components.js
+++ b/frontend/src/Editor/Components/components.js
@@ -48,6 +48,14 @@ export const componentTypes = [
{ name: 'Striped & bordered', value: 'table-striped table-bordered' },
],
},
+ cellSize: {
+ type: 'select',
+ displayName: 'Cell size',
+ options: [
+ { name: 'Compact', value: 'compact' },
+ { name: 'Spacious', value: 'spacious' },
+ ],
+ },
visibility: { type: 'code', displayName: 'Visibility' },
disabledState: { type: 'code', displayName: 'Disable' },
},
@@ -93,6 +101,7 @@ export const componentTypes = [
textColor: { value: undefined },
visibility: { value: '{{true}}' },
disabledState: { value: '{{false}}' },
+ cellSize: { value: 'compact' },
},
},
},
@@ -121,6 +130,7 @@ export const componentTypes = [
textColor: { type: 'color', displayName: 'Text color' },
visibility: { type: 'code', displayName: 'Visibility' },
disabledState: { type: 'code', displayName: 'Disable' },
+ borderRadius: { type: 'code', displayName: 'Border radius' },
},
exposedVariables: {},
definition: {
@@ -138,6 +148,7 @@ export const componentTypes = [
backgroundColor: { value: '#3c92dc' },
textColor: { value: '#fff' },
visibility: { value: '{{true}}' },
+ borderRadius: { value: '{{0}}' },
disabledState: { value: '{{false}}' },
},
},
@@ -346,6 +357,57 @@ export const componentTypes = [
},
},
},
+ {
+ name: 'PasswordInput',
+ displayName: 'Password Input',
+ description: 'Password input field for forms',
+ component: 'PasswordInput',
+ defaultSize: {
+ width: 210,
+ height: 30,
+ },
+ others: {
+ showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
+ showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
+ },
+ properties: {
+ placeholder: { type: 'code', displayName: 'Placeholder' },
+ },
+ validation: {
+ regex: { type: 'code', displayName: 'Regex' },
+ minLength: { type: 'code', displayName: 'Min length' },
+ maxLength: { type: 'code', displayName: 'Max length' },
+ customRule: { type: 'code', displayName: 'Custom validation' },
+ },
+ events: {},
+ styles: {
+ visibility: { type: 'code', displayName: 'Visibility' },
+ disabledState: { type: 'code', displayName: 'Disable' },
+ },
+ exposedVariables: {
+ value: '',
+ },
+ definition: {
+ others: {
+ showOnDesktop: { value: true },
+ showOnMobile: { value: false },
+ },
+ properties: {
+ placeholder: { value: 'password' },
+ },
+ validation: {
+ regex: { value: '' },
+ minLength: { value: null },
+ maxLength: { value: null },
+ customRule: { value: null },
+ },
+ events: [],
+ styles: {
+ visibility: { value: '{{true}}' },
+ disabledState: { value: '{{false}}' },
+ },
+ },
+ },
{
name: 'Datepicker',
displayName: 'Date Picker',
@@ -777,7 +839,7 @@ export const componentTypes = [
},
properties: {
label: { value: 'Select' },
- value: { value: '' },
+ value: { value: '{{2}}' },
values: { value: '{{[1,2,3]}}' },
display_values: { value: '{{["one", "two", "three"]}}' },
visible: { value: true },
@@ -938,6 +1000,9 @@ export const componentTypes = [
defaultMarkers: {
value: `{{ [{"lat": 40.7128, "lng": -73.935242}] }}`,
},
+ canSearch: {
+ value: `{{true}}` ,
+ },
},
addNewMarkers: { value: '{{false}}' },
events: [],
diff --git a/frontend/src/Editor/ConfigHandle.jsx b/frontend/src/Editor/ConfigHandle.jsx
index 3bfb2d4a92..5164a5cd08 100644
--- a/frontend/src/Editor/ConfigHandle.jsx
+++ b/frontend/src/Editor/ConfigHandle.jsx
@@ -18,6 +18,7 @@ export const ConfigHandle = function ConfigHandle({ id, component, configHandleC
src="/assets/images/icons/menu.svg"
width="8"
height="8"
+ draggable="false"
/>
{component.name}
@@ -28,6 +29,7 @@ export const ConfigHandle = function ConfigHandle({ id, component, configHandleC
role="button"
className="mx-2"
height="12"
+ draggable="false"
onClick={() => removeComponent({ id })}
/>
diff --git a/frontend/src/Editor/DataSourceManager/DataSourceManager.jsx b/frontend/src/Editor/DataSourceManager/DataSourceManager.jsx
index bd7b0a662a..65fca59273 100644
--- a/frontend/src/Editor/DataSourceManager/DataSourceManager.jsx
+++ b/frontend/src/Editor/DataSourceManager/DataSourceManager.jsx
@@ -202,7 +202,7 @@ class DataSourceManager extends React.Component {
{!selectedDataSource && (
-
{!addToFolder && (
DATABASES
+DATABASES
{DataBaseSources.map((dataSource) => ( this.selectDataSource(dataSource)}>
@@ -225,7 +225,7 @@ class DataSourceManager extends React.Component {
))}
-
)}
+
+ {event.actionId === 'set-localstorage-value' && (
+ <>
+
diff --git a/frontend/src/Editor/LeftSidebar/index.js b/frontend/src/Editor/LeftSidebar/index.js
index db3ab21edc..29cd8c5942 100644
--- a/frontend/src/Editor/LeftSidebar/index.js
+++ b/frontend/src/Editor/LeftSidebar/index.js
@@ -50,7 +50,7 @@ export const LeftSidebar = ({
APIS
+APIS
{ApiSources.map((dataSource) => ( this.selectDataSource(dataSource)}>
diff --git a/frontend/src/Editor/DataSourceManager/SourceComponents/Database/Firestore.schema.json b/frontend/src/Editor/DataSourceManager/SourceComponents/Database/Firestore.schema.json
index 43ac997369..8f290f17cf 100644
--- a/frontend/src/Editor/DataSourceManager/SourceComponents/Database/Firestore.schema.json
+++ b/frontend/src/Editor/DataSourceManager/SourceComponents/Database/Firestore.schema.json
@@ -13,7 +13,10 @@
"rawData": []
},
"options": {
- "gcp_key": { "type": "string", "encrypted": true }
+ "gcp_key": {
+ "type": "string",
+ "encrypted": true
+ }
}
},
"properties": {
@@ -21,9 +24,12 @@
"$label": "Private key",
"$key": "gcp_key",
"$rows": 15,
+ "$encrypted": true,
"type": "textarea",
"description": "Enter private key"
}
},
- "required": ["gcp_key"]
-}
+ "required": [
+ "gcp_key"
+ ]
+}
\ No newline at end of file
diff --git a/frontend/src/Editor/Editor.jsx b/frontend/src/Editor/Editor.jsx
index 7ab2127720..2ea680afc0 100644
--- a/frontend/src/Editor/Editor.jsx
+++ b/frontend/src/Editor/Editor.jsx
@@ -309,6 +309,22 @@ class Editor extends React.Component {
});
};
+ saveAppName = (id, name, notify = false) => {
+ if (!name.trim()) {
+ toast.warn("App name can't be empty or whitespace", {
+ hideProgressBar: true,
+ position: 'top-center',
+ });
+
+ this.setState({
+ app: { ...this.state.app, name: this.state.oldName },
+ });
+
+ return;
+ }
+ this.saveApp(id, { name }, notify);
+ };
+
renderDataSource = (dataSource) => {
const sourceMeta = DataSourceTypes.find((source) => source.kind === dataSource.kind);
return (
@@ -445,7 +461,7 @@ class Editor extends React.Component {
};
toggleQueryEditor = () => {
- this.setState({ showQueryEditor: !this.state.showQueryEditor });
+ this.setState((prev) => ({ showQueryEditor: !prev.showQueryEditor }));
this.toolTipRefHide.current.style.display = this.state.showQueryEditor ? 'none' : 'flex';
this.toolTipRefShow.current.style.display = this.state.showQueryEditor ? 'flex' : 'none';
};
@@ -473,7 +489,7 @@ class Editor extends React.Component {
};
toggleQuerySearch = () => {
- this.setState({ showQuerySearchField: !this.state.showQuerySearchField });
+ this.setState((prev) => ({ showQuerySearchField: !prev.showQuerySearchField }));
};
onVersionDeploy = (versionId) => {
@@ -491,8 +507,8 @@ class Editor extends React.Component {
});
};
- toolTipRefHide = createRef(null);
- toolTipRefShow = createRef(null);
+ toolTipRefHide = createRef();
+ toolTipRefShow = createRef();
render() {
const {
@@ -569,8 +585,9 @@ class Editor extends React.Component {
this.setState({ oldName: e.target.value })}
onChange={(e) => this.onNameChanged(e.target.value)}
- onBlur={(e) => this.saveApp(this.state.app.id, { name: e.target.value })}
+ onBlur={(e) => this.saveAppName(this.state.app.id, e.target.value)}
className="form-control-plaintext form-control-plaintext-sm"
value={this.state.app.name}
/>
@@ -592,12 +609,12 @@ class Editor extends React.Component {
/>
![]()
this.setState({ currentLayout: 'desktop' })}
disabled={currentLayout === 'desktop'}
>
@@ -620,6 +638,7 @@ class Editor extends React.Component {
+
+ Key
+
+ handlerChanged(index, 'key', value)}
+ enablePreview={true}
+ />
+
+
+
+
+ )}
Value
+
+ handlerChanged(index, 'value', value)}
+ enablePreview={true}
+ />
+
+
-
{/*
-
)}
diff --git a/frontend/src/HomePage/BlankPage.jsx b/frontend/src/HomePage/BlankPage.jsx
index c478a1f034..96d299245a 100644
--- a/frontend/src/HomePage/BlankPage.jsx
+++ b/frontend/src/HomePage/BlankPage.jsx
@@ -1,6 +1,6 @@
import React from 'react';
-export const BlankPage = function BlankPage({ createApp }) {
+export const BlankPage = function BlankPage({ createApp, handleImportApp, isImportingApp, fileInput }) {
return (
- setAddToFolder(true)}>
- Add to folder
-
-
-
- cloneApp()}>
- Clone app
-
-
-
- exportApp()}>
- Export app
-
-
-
- deleteApp()}>
- Delete app
-
-
+ {canCreateApp && (
+ <>
+
+ setAddToFolder(true)}>
+ Add to folder
+
+
+
+ cloneApp()}>
+ Clone app
+
+
+
+ exportApp()}>
+ Export app
+
+
+
+ )}
+ {canDeleteApp && (
+
+ deleteApp()}>
+ Delete app
+
+
+ )}
@@ -13,7 +13,7 @@ export const BlankPage = function BlankPage({ createApp }) {
You haven't created any apps yet.
-
+
+
Read documentation
diff --git a/frontend/src/HomePage/HomePage.jsx b/frontend/src/HomePage/HomePage.jsx
index 52e680d62e..f6f20080c5 100644
--- a/frontend/src/HomePage/HomePage.jsx
+++ b/frontend/src/HomePage/HomePage.jsx
@@ -88,11 +88,11 @@ class HomePage extends React.Component {
appService
.createApp()
.then((data) => {
- console.log(data);
_self.props.history.push(`/apps/${data.id}`);
})
.catch(({ error }) => {
toast.error(error, { hideProgressBar: true, position: 'top-center' });
+ _self.setState({ creatingApp: false });
});
};
@@ -139,17 +139,16 @@ class HomePage extends React.Component {
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
- this.fileInput.value = '';
this.setState({ isExportingApp: false });
})
- .catch(({ _error }) => {
+ .catch((error) => {
toast.error('Could not export the app.', {
hideProgressBar: true,
position: 'top-center',
});
- this.fileInput.value = '';
+
this.setState({ isExportingApp: false });
- console.log(_error);
+ console.log(error);
});
};
@@ -172,6 +171,7 @@ class HomePage extends React.Component {
isImportingApp: false,
});
this.fetchApps(this.state.currentPage, this.state.currentFolder.id);
+ this.fetchFolders();
})
.catch(({ error }) => {
toast.error(`Could not import the app: ${error}`, {
@@ -191,15 +191,69 @@ class HomePage extends React.Component {
isImportingApp: false,
});
}
+ // set file input as null to handle same file upload
+ event.target.value = null;
};
};
- isAppEditable = (app) => {
- return app.app_group_permissions.some((p) => p.update);
+ canUserPerform(user, action, app) {
+ let permissionGrant;
+
+ switch (action) {
+ case 'create':
+ permissionGrant = this.canAnyGroupPerformAction('app_create', user.group_permissions);
+ break;
+ case 'read':
+ case 'update':
+ permissionGrant =
+ this.canAnyGroupPerformActionOnApp(action, user.app_group_permissions, app) ||
+ this.isUserOwnerOfApp(user, app);
+ break;
+ case 'delete':
+ permissionGrant =
+ this.canAnyGroupPerformActionOnApp('delete', user.app_group_permissions, app) ||
+ this.canAnyGroupPerformAction('app_delete', user.group_permissions) ||
+ this.isUserOwnerOfApp(user, app);
+ break;
+ default:
+ permissionGrant = false;
+ break;
+ }
+
+ return permissionGrant;
+ }
+
+ canAnyGroupPerformActionOnApp(action, appGroupPermissions, app) {
+ if (!appGroupPermissions) {
+ return false;
+ }
+
+ const permissionsToCheck = appGroupPermissions.filter((permission) => permission.app_id == app.id);
+ return this.canAnyGroupPerformAction(action, permissionsToCheck);
+ }
+
+ canAnyGroupPerformAction(action, permissions) {
+ if (!permissions) {
+ return false;
+ }
+
+ return permissions.some((p) => p[action]);
+ }
+
+ isUserOwnerOfApp(user, app) {
+ return user.id == app.user_id;
+ }
+
+ canCreateApp = () => {
+ return this.canUserPerform(this.state.currentUser, 'create');
};
- isAppDeletable = (app) => {
- return app.app_group_permissions.some((p) => p.delete);
+ canUpdateApp = (app) => {
+ return this.canUserPerform(this.state.currentUser, 'update', app);
+ };
+
+ canDeleteApp = (app) => {
+ return this.canUserPerform(this.state.currentUser, 'delete', app);
};
executeAppDeletion = () => {
@@ -260,7 +314,14 @@ class HomePage extends React.Component {
/>
@@ -286,38 +347,43 @@ class HomePage extends React.Component {
{currentFolder.id ? `Folder: ${currentFolder.name}` : 'All applications'}
-
-
+ {this.canCreateApp() && (
+ <>
+
-
-
-
+
-
+
+
+
-
+
-
-
-
+
+
+ )}
+
+
+ |
- {!isLoading && this.isAppEditable(app) && (
+ {!isLoading && this.canUpdateApp(app) && (
+
+
+
|