mirror of
https://github.com/apache/superset.git
synced 2024-09-12 00:29:39 -04:00
style: database modal updates (#11311)
This commit is contained in:
parent
094359cc5b
commit
69810170f7
80
superset-frontend/src/common/components/InfoTooltip.tsx
Normal file
80
superset-frontend/src/common/components/InfoTooltip.tsx
Normal file
@ -0,0 +1,80 @@
|
|||||||
|
/**
|
||||||
|
* Licensed to the Apache Software Foundation (ASF) under one
|
||||||
|
* or more contributor license agreements. See the NOTICE file
|
||||||
|
* distributed with this work for additional information
|
||||||
|
* regarding copyright ownership. The ASF licenses this file
|
||||||
|
* to you under the Apache License, Version 2.0 (the
|
||||||
|
* "License"); you may not use this file except in compliance
|
||||||
|
* with the License. You may obtain a copy of the License at
|
||||||
|
*
|
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
*
|
||||||
|
* Unless required by applicable law or agreed to in writing,
|
||||||
|
* software distributed under the License is distributed on an
|
||||||
|
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||||
|
* KIND, either express or implied. See the License for the
|
||||||
|
* specific language governing permissions and limitations
|
||||||
|
* under the License.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import { styled } from '@superset-ui/core';
|
||||||
|
import Tooltip from 'src/common/components/Tooltip';
|
||||||
|
import Icon from 'src/components/Icon';
|
||||||
|
|
||||||
|
interface InfoTooltipProps {
|
||||||
|
className?: string;
|
||||||
|
tooltip: string;
|
||||||
|
placement?:
|
||||||
|
| 'bottom'
|
||||||
|
| 'left'
|
||||||
|
| 'right'
|
||||||
|
| 'top'
|
||||||
|
| 'topLeft'
|
||||||
|
| 'topRight'
|
||||||
|
| 'bottomLeft'
|
||||||
|
| 'bottomRight'
|
||||||
|
| 'leftTop'
|
||||||
|
| 'leftBottom'
|
||||||
|
| 'rightTop'
|
||||||
|
| 'rightBottom'
|
||||||
|
| undefined;
|
||||||
|
trigger?: string | Array<string>;
|
||||||
|
overlayStyle?: any;
|
||||||
|
bgColor?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const StyledTooltip = styled(Tooltip)`
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
path:first-of-type {
|
||||||
|
fill: #999999;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const defaultOverlayStyle = {
|
||||||
|
fontSize: '12px',
|
||||||
|
lineHeight: '16px',
|
||||||
|
};
|
||||||
|
|
||||||
|
const defaultColor = 'rgba(0,0,0,0.9)';
|
||||||
|
|
||||||
|
export default function InfoTooltip({
|
||||||
|
tooltip,
|
||||||
|
placement = 'right',
|
||||||
|
trigger = 'hover',
|
||||||
|
overlayStyle = defaultOverlayStyle,
|
||||||
|
bgColor = defaultColor,
|
||||||
|
}: InfoTooltipProps) {
|
||||||
|
return (
|
||||||
|
<StyledTooltip
|
||||||
|
title={tooltip}
|
||||||
|
placement={placement}
|
||||||
|
trigger={trigger}
|
||||||
|
overlayStyle={overlayStyle}
|
||||||
|
color={bgColor}
|
||||||
|
>
|
||||||
|
<Icon name="info-solid-small" />
|
||||||
|
</StyledTooltip>
|
||||||
|
);
|
||||||
|
}
|
@ -26,6 +26,7 @@ import AntdPopover from './Popover';
|
|||||||
import AntdTooltip from './Tooltip';
|
import AntdTooltip from './Tooltip';
|
||||||
import { Menu } from '.';
|
import { Menu } from '.';
|
||||||
import { Dropdown } from './Dropdown';
|
import { Dropdown } from './Dropdown';
|
||||||
|
import InfoTooltip from './InfoTooltip';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
title: 'Common Components',
|
title: 'Common Components',
|
||||||
@ -175,3 +176,51 @@ export const Tooltip = () => (
|
|||||||
<Button>A button with tooltip</Button>
|
<Button>A button with tooltip</Button>
|
||||||
</AntdTooltip>
|
</AntdTooltip>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
export const StyledInfoTooltip = (args: any) => {
|
||||||
|
const styles = {
|
||||||
|
padding: '100px 0 0 200px',
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={styles}>
|
||||||
|
<InfoTooltip tooltip="This is the text that will display!" {...args} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
StyledInfoTooltip.args = {
|
||||||
|
placement: 'right',
|
||||||
|
trigger: 'hover',
|
||||||
|
};
|
||||||
|
|
||||||
|
StyledInfoTooltip.argTypes = {
|
||||||
|
placement: {
|
||||||
|
name: 'Placement',
|
||||||
|
control: {
|
||||||
|
type: 'select',
|
||||||
|
options: [
|
||||||
|
'bottom',
|
||||||
|
'left',
|
||||||
|
'right',
|
||||||
|
'top',
|
||||||
|
'topLeft',
|
||||||
|
'topRight',
|
||||||
|
'bottomLeft',
|
||||||
|
'bottomRight',
|
||||||
|
'leftTop',
|
||||||
|
'leftBottom',
|
||||||
|
'rightTop',
|
||||||
|
'rightBottom',
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
trigger: {
|
||||||
|
name: 'Trigger',
|
||||||
|
control: {
|
||||||
|
type: 'select',
|
||||||
|
options: ['hover', 'click'],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
@ -18,7 +18,7 @@
|
|||||||
*/
|
*/
|
||||||
import React, { FunctionComponent, useState, useEffect } from 'react';
|
import React, { FunctionComponent, useState, useEffect } from 'react';
|
||||||
import { styled, t, SupersetClient } from '@superset-ui/core';
|
import { styled, t, SupersetClient } from '@superset-ui/core';
|
||||||
import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls';
|
import InfoTooltip from 'src/common/components/InfoTooltip';
|
||||||
import { useSingleViewResource } from 'src/views/CRUD/hooks';
|
import { useSingleViewResource } from 'src/views/CRUD/hooks';
|
||||||
import withToasts from 'src/messageToasts/enhancers/withToasts';
|
import withToasts from 'src/messageToasts/enhancers/withToasts';
|
||||||
import getClientErrorObject from 'src/utils/getClientErrorObject';
|
import getClientErrorObject from 'src/utils/getClientErrorObject';
|
||||||
@ -27,6 +27,7 @@ import Modal from 'src/common/components/Modal';
|
|||||||
import Tabs from 'src/common/components/Tabs';
|
import Tabs from 'src/common/components/Tabs';
|
||||||
import Button from 'src/components/Button';
|
import Button from 'src/components/Button';
|
||||||
import IndeterminateCheckbox from 'src/components/IndeterminateCheckbox';
|
import IndeterminateCheckbox from 'src/components/IndeterminateCheckbox';
|
||||||
|
import { JsonEditor } from 'src/components/AsyncAceEditor';
|
||||||
import { DatabaseObject } from './types';
|
import { DatabaseObject } from './types';
|
||||||
|
|
||||||
interface DatabaseModalProps {
|
interface DatabaseModalProps {
|
||||||
@ -45,6 +46,10 @@ const StyledIcon = styled(Icon)`
|
|||||||
const StyledInputContainer = styled.div`
|
const StyledInputContainer = styled.div`
|
||||||
margin-bottom: ${({ theme }) => theme.gridUnit * 2}px;
|
margin-bottom: ${({ theme }) => theme.gridUnit * 2}px;
|
||||||
|
|
||||||
|
&.extra-container {
|
||||||
|
padding-top: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
.helper {
|
.helper {
|
||||||
display: block;
|
display: block;
|
||||||
padding: ${({ theme }) => theme.gridUnit}px 0;
|
padding: ${({ theme }) => theme.gridUnit}px 0;
|
||||||
@ -107,6 +112,12 @@ const StyledInputContainer = styled.div`
|
|||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
const StyledJsonEditor = styled(JsonEditor)`
|
||||||
|
flex: 1 1 auto;
|
||||||
|
border: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
|
||||||
|
border-radius: ${({ theme }) => theme.gridUnit}px;
|
||||||
|
`;
|
||||||
|
|
||||||
const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
|
const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
|
||||||
addDangerToast,
|
addDangerToast,
|
||||||
addSuccessToast,
|
addSuccessToast,
|
||||||
@ -241,6 +252,17 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
|
|||||||
setDB(data);
|
setDB(data);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const onEditorChange = (json: string, name: string) => {
|
||||||
|
const data = {
|
||||||
|
database_name: db ? db.database_name : '',
|
||||||
|
sqlalchemy_uri: db ? db.sqlalchemy_uri : '',
|
||||||
|
...db,
|
||||||
|
};
|
||||||
|
|
||||||
|
data[name] = json;
|
||||||
|
setDB(data);
|
||||||
|
};
|
||||||
|
|
||||||
const validate = () => {
|
const validate = () => {
|
||||||
if (
|
if (
|
||||||
db &&
|
db &&
|
||||||
@ -383,8 +405,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
|
|||||||
onChange={onInputChange}
|
onChange={onInputChange}
|
||||||
/>
|
/>
|
||||||
<div>{t('Asynchronous Query Execution')}</div>
|
<div>{t('Asynchronous Query Execution')}</div>
|
||||||
<InfoTooltipWithTrigger
|
<InfoTooltip
|
||||||
label="aqe"
|
|
||||||
tooltip={t(
|
tooltip={t(
|
||||||
'Operate the database in asynchronous mode, meaning that the queries ' +
|
'Operate the database in asynchronous mode, meaning that the queries ' +
|
||||||
'are executed on remote workers as opposed to on the web server itself. ' +
|
'are executed on remote workers as opposed to on the web server itself. ' +
|
||||||
@ -406,10 +427,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
|
|||||||
onChange={onInputChange}
|
onChange={onInputChange}
|
||||||
/>
|
/>
|
||||||
<div>{t('Expose in SQL Lab')}</div>
|
<div>{t('Expose in SQL Lab')}</div>
|
||||||
<InfoTooltipWithTrigger
|
<InfoTooltip tooltip={t('Expose this DB in SQL Lab')} />
|
||||||
label="sql-expose"
|
|
||||||
tooltip={t('Expose this DB in SQL Lab')}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</StyledInputContainer>
|
</StyledInputContainer>
|
||||||
<StyledInputContainer>
|
<StyledInputContainer>
|
||||||
@ -421,8 +439,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
|
|||||||
onChange={onInputChange}
|
onChange={onInputChange}
|
||||||
/>
|
/>
|
||||||
<div>{t('Allow CREATE TABLE AS')}</div>
|
<div>{t('Allow CREATE TABLE AS')}</div>
|
||||||
<InfoTooltipWithTrigger
|
<InfoTooltip
|
||||||
label="allow-cta"
|
|
||||||
tooltip={t('Allow CREATE TABLE AS option in SQL Lab')}
|
tooltip={t('Allow CREATE TABLE AS option in SQL Lab')}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
@ -436,8 +453,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
|
|||||||
onChange={onInputChange}
|
onChange={onInputChange}
|
||||||
/>
|
/>
|
||||||
<div>{t('Allow CREATE VIEW AS')}</div>
|
<div>{t('Allow CREATE VIEW AS')}</div>
|
||||||
<InfoTooltipWithTrigger
|
<InfoTooltip
|
||||||
label="allow-cva"
|
|
||||||
tooltip={t('Allow CREATE VIEW AS option in SQL Lab')}
|
tooltip={t('Allow CREATE VIEW AS option in SQL Lab')}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
@ -451,8 +467,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
|
|||||||
onChange={onInputChange}
|
onChange={onInputChange}
|
||||||
/>
|
/>
|
||||||
<div>{t('Allow DML')}</div>
|
<div>{t('Allow DML')}</div>
|
||||||
<InfoTooltipWithTrigger
|
<InfoTooltip
|
||||||
label="allow-dml"
|
|
||||||
tooltip={t(
|
tooltip={t(
|
||||||
'Allow users to run non-SELECT statements (UPDATE, DELETE, CREATE, ...)',
|
'Allow users to run non-SELECT statements (UPDATE, DELETE, CREATE, ...)',
|
||||||
)}
|
)}
|
||||||
@ -468,8 +483,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
|
|||||||
onChange={onInputChange}
|
onChange={onInputChange}
|
||||||
/>
|
/>
|
||||||
<div>{t('Allow Multi Schema Metadata Fetch')}</div>
|
<div>{t('Allow Multi Schema Metadata Fetch')}</div>
|
||||||
<InfoTooltipWithTrigger
|
<InfoTooltip
|
||||||
label="allow-msmf"
|
|
||||||
tooltip={t(
|
tooltip={t(
|
||||||
'Allow SQL Lab to fetch a list of all tables and all views across all database ' +
|
'Allow SQL Lab to fetch a list of all tables and all views across all database ' +
|
||||||
'schemas. For large data warehouse with thousands of tables, this can be ' +
|
'schemas. For large data warehouse with thousands of tables, this can be ' +
|
||||||
@ -502,11 +516,15 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
|
|||||||
<StyledInputContainer>
|
<StyledInputContainer>
|
||||||
<div className="control-label">{t('Secure Extra')}</div>
|
<div className="control-label">{t('Secure Extra')}</div>
|
||||||
<div className="input-container">
|
<div className="input-container">
|
||||||
<textarea
|
<StyledJsonEditor
|
||||||
name="encrypted_extra"
|
name="encrypted_extra"
|
||||||
value={db ? db.encrypted_extra || '' : ''}
|
value={db ? db.encrypted_extra || '' : ''}
|
||||||
placeholder={t('Secure Extra')}
|
placeholder={t('Secure Extra')}
|
||||||
onChange={onTextChange}
|
onChange={(json: string) =>
|
||||||
|
onEditorChange(json, 'encrypted_extra')
|
||||||
|
}
|
||||||
|
width="100%"
|
||||||
|
height="160px"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="helper">
|
<div className="helper">
|
||||||
@ -552,8 +570,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
|
|||||||
onChange={onInputChange}
|
onChange={onInputChange}
|
||||||
/>
|
/>
|
||||||
<div>{t('Impersonate Logged In User (Presto & Hive)')}</div>
|
<div>{t('Impersonate Logged In User (Presto & Hive)')}</div>
|
||||||
<InfoTooltipWithTrigger
|
<InfoTooltip
|
||||||
label="impersonate"
|
|
||||||
tooltip={t(
|
tooltip={t(
|
||||||
'If Presto, all the queries in SQL Lab are going to be executed as the ' +
|
'If Presto, all the queries in SQL Lab are going to be executed as the ' +
|
||||||
'currently logged on user who must have permission to run them. If Hive ' +
|
'currently logged on user who must have permission to run them. If Hive ' +
|
||||||
@ -573,21 +590,23 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
|
|||||||
onChange={onInputChange}
|
onChange={onInputChange}
|
||||||
/>
|
/>
|
||||||
<div>{t('Allow CSV Upload')}</div>
|
<div>{t('Allow CSV Upload')}</div>
|
||||||
<InfoTooltipWithTrigger
|
<InfoTooltip
|
||||||
label="allow-csv"
|
|
||||||
tooltip={t(
|
tooltip={t(
|
||||||
'If selected, please set the schemas allowed for csv upload in Extra.',
|
'If selected, please set the schemas allowed for csv upload in Extra.',
|
||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</StyledInputContainer>
|
</StyledInputContainer>
|
||||||
<StyledInputContainer>
|
<StyledInputContainer className="extra-container">
|
||||||
<div className="control-label">{t('Extra')}</div>
|
<div className="control-label">{t('Extra')}</div>
|
||||||
<div className="input-container">
|
<div className="input-container">
|
||||||
<textarea
|
<StyledJsonEditor
|
||||||
name="extra"
|
name="extra"
|
||||||
value={(db && db.extra) ?? defaultExtra}
|
value={(db && db.extra) ?? defaultExtra}
|
||||||
onChange={onTextChange}
|
placeholder={t('Secure Extra')}
|
||||||
|
onChange={(json: string) => onEditorChange(json, 'extra')}
|
||||||
|
width="100%"
|
||||||
|
height="160px"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="helper">
|
<div className="helper">
|
||||||
|
Loading…
Reference in New Issue
Block a user