pt/superset
1
0
Fork 0
mirror of https://github.com/apache/superset.git synced 2024-09-12 00:29:39 -04:00
Code Issues Packages Projects Releases Wiki Activity

refactor: icon to icons for infotooltip component (#15398)

Browse Source 
* intital commit

* align label texts and icons

* fix style
This commit is contained in:
Phillip Kelley-Dotson 2021-07-01 08:52:17 -07:00 committed by GitHub
parent b5119b8dff
commit 7889564250
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 330 additions and 316 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
superset-frontend/src/components/InfoTooltip/index.tsx
View File

@ -20,7 +20,7 @@
import React from 'react'; import React from 'react';
import { styled } from '@superset-ui/core'; import { styled } from '@superset-ui/core';
import { Tooltip } from 'src/components/Tooltip'; import { Tooltip } from 'src/components/Tooltip';
import Icon from 'src/components/Icon'; import Icons from 'src/components/Icons';
export interface InfoTooltipProps { export interface InfoTooltipProps {
className?: string; className?: string;
@ -74,7 +74,7 @@ export default function InfoTooltip({
overlayStyle={overlayStyle} overlayStyle={overlayStyle}
color={bgColor} color={bgColor}
> >
<Icon name="info-solid-small" /> <Icons.InfoSolidSmall />
</StyledTooltip> </StyledTooltip>
); );
} }

642
superset-frontend/src/views/CRUD/data/database/DatabaseModal/ExtraOptions.tsx
View File

@ -18,7 +18,7 @@
*/ */
import React, { ChangeEvent, EventHandler } from 'react'; import React, { ChangeEvent, EventHandler } from 'react';
import cx from 'classnames'; import cx from 'classnames';
import { t, SupersetTheme } from '@superset-ui/core'; import { t, SupersetTheme, styled } from '@superset-ui/core';
import InfoTooltip from 'src/components/InfoTooltip'; import InfoTooltip from 'src/components/InfoTooltip';
import IndeterminateCheckbox from 'src/components/IndeterminateCheckbox'; import IndeterminateCheckbox from 'src/components/IndeterminateCheckbox';
import Collapse from 'src/components/Collapse'; import Collapse from 'src/components/Collapse';
@ -34,6 +34,15 @@ const defaultExtra =
'{\n "metadata_params": {},\n "engine_params": {},' + '{\n "metadata_params": {},\n "engine_params": {},' +
'\n "metadata_cache_timeout": {},\n "schemas_allowed_for_csv_upload": [] \n}'; '\n "metadata_cache_timeout": {},\n "schemas_allowed_for_csv_upload": [] \n}';
const StyledOptionContainer = styled.div`
.input-container > div > svg {
margin-top: ${({ theme }) => theme.gridUnit * 0.25}px;
}
span[role='img'] {
margin-top: ${({ theme }) => theme.gridUnit * 0.5}px;
}
`;
const ExtraOptions = ({ const ExtraOptions = ({
db, db,
onInputChange, onInputChange,
@ -49,338 +58,343 @@ const ExtraOptions = ({
const createAsOpen = !!(db?.allow_ctas || db?.allow_cvas); const createAsOpen = !!(db?.allow_ctas || db?.allow_cvas);
return ( return (
<Collapse <StyledOptionContainer>
expandIconPosition="right" <Collapse
accordion expandIconPosition="right"
css={(theme: SupersetTheme) => antdCollapseStyles(theme)} accordion
> css={(theme: SupersetTheme) => antdCollapseStyles(theme)}
<Collapse.Panel
header={
<div>
<h4>SQL Lab</h4>
<p className="helper">
Configure how this database will function in SQL Lab.
</p>
</div>
}
key="1"
> >
<StyledInputContainer className="mb-0"> <Collapse.Panel
<div className="input-container"> header={
<IndeterminateCheckbox <div>
id="expose_in_sqllab" <h4>SQL Lab</h4>
indeterminate={false} <p className="helper">
checked={!!db?.expose_in_sqllab} Configure how this database will function in SQL Lab.
onChange={onInputChange} </p>
labelText={t('Expose in SQL Lab')} </div>
/> }
<InfoTooltip key="1"
tooltip={t('Allow this database to be queried in SQL Lab')} >
/> <StyledInputContainer className="mb-0">
</div> <div className="input-container">
<StyledExpandableForm <IndeterminateCheckbox
className={cx('expandable', { id="expose_in_sqllab"
open: expandableModalIsOpen, indeterminate={false}
'ctas-open': createAsOpen, checked={!!db?.expose_in_sqllab}
})} onChange={onInputChange}
> labelText={t('Expose in SQL Lab')}
<StyledInputContainer className="mb-0"> />
<div className="input-container"> <InfoTooltip
<IndeterminateCheckbox tooltip={t('Allow this database to be queried in SQL Lab')}
id="allow_ctas" />
indeterminate={false} </div>
checked={!!db?.allow_ctas} <StyledExpandableForm
onChange={onInputChange} className={cx('expandable', {
labelText={t('Allow CREATE TABLE AS')} open: expandableModalIsOpen,
/> 'ctas-open': createAsOpen,
<InfoTooltip })}
tooltip={t('Allow creation of new tables based on queries')} >
/> <StyledInputContainer className="mb-0">
</div>
</StyledInputContainer>
<StyledInputContainer className="mb-0">
<div className="input-container">
<IndeterminateCheckbox
id="allow_cvas"
indeterminate={false}
checked={!!db?.allow_cvas}
onChange={onInputChange}
labelText={t('Allow CREATE VIEW AS')}
/>
<InfoTooltip
tooltip={t('Allow creation of new views based on queries')}
/>
</div>
<StyledInputContainer
className={cx('expandable', { open: createAsOpen })}
>
<div className="control-label">{t('CTAS & CVAS SCHEMA')}</div>
<div className="input-container"> <div className="input-container">
<input <IndeterminateCheckbox
type="text" id="allow_ctas"
name="force_ctas_schema" indeterminate={false}
value={db?.force_ctas_schema || ''} checked={!!db?.allow_ctas}
placeholder={t('Search or select schema')}
onChange={onInputChange} onChange={onInputChange}
labelText={t('Allow CREATE TABLE AS')}
/>
<InfoTooltip
tooltip={t('Allow creation of new tables based on queries')}
/> />
</div> </div>
<div className="helper"> </StyledInputContainer>
{t( <StyledInputContainer className="mb-0">
'When allowing CREATE TABLE AS option in SQL Lab, this option ' + <div className="input-container">
'forces the table to be created in this schema.', <IndeterminateCheckbox
)} id="allow_cvas"
indeterminate={false}
checked={!!db?.allow_cvas}
onChange={onInputChange}
labelText={t('Allow CREATE VIEW AS')}
/>
<InfoTooltip
tooltip={t('Allow creation of new views based on queries')}
/>
</div>
<StyledInputContainer
className={cx('expandable', { open: createAsOpen })}
>
<div className="control-label">{t('CTAS & CVAS SCHEMA')}</div>
<div className="input-container">
<input
type="text"
name="force_ctas_schema"
value={db?.force_ctas_schema || ''}
placeholder={t('Search or select schema')}
onChange={onInputChange}
/>
</div>
<div className="helper">
{t(
'When allowing CREATE TABLE AS option in SQL Lab, this option ' +
'forces the table to be created in this schema.',
)}
</div>
</StyledInputContainer>
</StyledInputContainer>
<StyledInputContainer className="mb-0">
<div className="input-container">
<IndeterminateCheckbox
id="allow_dml"
indeterminate={false}
checked={!!db?.allow_dml}
onChange={onInputChange}
labelText={t('Allow DML')}
/>
<InfoTooltip
tooltip={t(
'Allow manipulation of the database using non-SELECT statements such as UPDATE, DELETE, CREATE, etc.',
)}
/>
</div> </div>
</StyledInputContainer> </StyledInputContainer>
</StyledInputContainer> <StyledInputContainer>
<StyledInputContainer className="mb-0"> <div className="input-container">
<div className="input-container"> <IndeterminateCheckbox
<IndeterminateCheckbox id="allow_multi_schema_metadata_fetch"
id="allow_dml" indeterminate={false}
indeterminate={false} checked={!!db?.allow_multi_schema_metadata_fetch}
checked={!!db?.allow_dml} onChange={onInputChange}
onChange={onInputChange} labelText={t('Allow multi schema metadata fetch')}
labelText={t('Allow DML')} />
/> <InfoTooltip
<InfoTooltip tooltip={t(
tooltip={t( 'Allow SQL Lab to fetch a list of all tables and all views across all database ' +
'Allow manipulation of the database using non-SELECT statements such as UPDATE, DELETE, CREATE, etc.', 'schemas. For large data warehouse with thousands of tables, this can be ' +
)} 'expensive and put strain on the system.',
/> )}
/>
</div>
</StyledInputContainer>
</StyledExpandableForm>
</StyledInputContainer>
</Collapse.Panel>
<Collapse.Panel
header={
<div>
<h4>Performance</h4>
<p className="helper">
Adjust settings that will impact the performance of this
database.
</p>
</div>
}
key="2"
>
<StyledInputContainer className="mb-8">
<div className="control-label">{t('Chart cache timeout')}</div>
<div className="input-container">
<input
type="number"
name="cache_timeout"
value={db?.cache_timeout || ''}
placeholder={t('Chart cache timeout')}
onChange={onInputChange}
/>
</div>
<div className="helper">
{t(
'Duration (in seconds) of the caching timeout for charts of this database.' +
' A timeout of 0 indicates that the cache never expires.' +
' Note this defaults to the global timeout if undefined.',
)}
</div>
</StyledInputContainer>
<StyledInputContainer className="mb-0">
<div className="input-container">
<IndeterminateCheckbox
id="allow_run_async"
indeterminate={false}
checked={!!db?.allow_run_async}
onChange={onInputChange}
labelText={t('Asynchronous query execution')}
/>
<InfoTooltip
tooltip={t(
'Operate the database in asynchronous mode, meaning that the queries ' +
'are executed on remote workers as opposed to on the web server itself. ' +
'This assumes that you have a Celery worker setup as well as a results ' +
'backend. Refer to the installation docs for more information.',
)}
/>
</div>
</StyledInputContainer>
</Collapse.Panel>
<Collapse.Panel
header={
<div>
<h4>Security</h4>
<p className="helper">
Add connection information for other systems.
</p>
</div>
}
key="3"
>
<StyledInputContainer>
<div className="control-label">{t('Secure extra')}</div>
<div className="input-container">
<StyledJsonEditor
name="encrypted_extra"
value={db?.encrypted_extra || ''}
placeholder={t('Secure extra')}
onChange={(json: string) =>
onEditorChange({ json, name: 'encrypted_extra' })
}
width="100%"
height="160px"
/>
</div>
<div className="helper">
<div>
{t(
'JSON string containing additional connection configuration.',
)}
</div> </div>
</StyledInputContainer> <div>
<StyledInputContainer> {t(
<div className="input-container"> 'This is used to provide connection information for systems like Hive, ' +
<IndeterminateCheckbox 'Presto, and BigQuery, which do not conform to the username:password syntax ' +
id="allow_multi_schema_metadata_fetch" 'normally used by SQLAlchemy.',
indeterminate={false} )}
checked={!!db?.allow_multi_schema_metadata_fetch}
onChange={onInputChange}
labelText={t('Allow multi schema metadata fetch')}
/>
<InfoTooltip
tooltip={t(
'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 ' +
'expensive and put strain on the system.',
)}
/>
</div> </div>
</StyledInputContainer>
</StyledExpandableForm>
</StyledInputContainer>
</Collapse.Panel>
<Collapse.Panel
header={
<div>
<h4>Performance</h4>
<p className="helper">
Adjust settings that will impact the performance of this database.
</p>
</div>
}
key="2"
>
<StyledInputContainer className="mb-8">
<div className="control-label">{t('Chart cache timeout')}</div>
<div className="input-container">
<input
type="number"
name="cache_timeout"
value={db?.cache_timeout || ''}
placeholder={t('Chart cache timeout')}
onChange={onInputChange}
/>
</div>
<div className="helper">
{t(
'Duration (in seconds) of the caching timeout for charts of this database.' +
' A timeout of 0 indicates that the cache never expires.' +
' Note this defaults to the global timeout if undefined.',
)}
</div>
</StyledInputContainer>
<StyledInputContainer className="mb-0">
<div className="input-container">
<IndeterminateCheckbox
id="allow_run_async"
indeterminate={false}
checked={!!db?.allow_run_async}
onChange={onInputChange}
labelText={t('Asynchronous query execution')}
/>
<InfoTooltip
tooltip={t(
'Operate the database in asynchronous mode, meaning that the queries ' +
'are executed on remote workers as opposed to on the web server itself. ' +
'This assumes that you have a Celery worker setup as well as a results ' +
'backend. Refer to the installation docs for more information.',
)}
/>
</div>
</StyledInputContainer>
</Collapse.Panel>
<Collapse.Panel
header={
<div>
<h4>Security</h4>
<p className="helper">
Add connection information for other systems.
</p>
</div>
}
key="3"
>
<StyledInputContainer>
<div className="control-label">{t('Secure extra')}</div>
<div className="input-container">
<StyledJsonEditor
name="encrypted_extra"
value={db?.encrypted_extra || ''}
placeholder={t('Secure extra')}
onChange={(json: string) =>
onEditorChange({ json, name: 'encrypted_extra' })
}
width="100%"
height="160px"
/>
</div>
<div className="helper">
<div>
{t('JSON string containing additional connection configuration.')}
</div> </div>
<div> </StyledInputContainer>
<StyledInputContainer>
<div className="control-label">{t('Root certificate')}</div>
<div className="input-container">
<textarea
name="server_cert"
value={db?.server_cert || ''}
placeholder={t('Root certificate')}
onChange={onTextChange}
/>
</div>
<div className="helper">
{t( {t(
'This is used to provide connection information for systems like Hive, ' + 'Optional CA_BUNDLE contents to validate HTTPS requests. Only available on ' +
'Presto, and BigQuery, which do not conform to the username:password syntax ' + 'certain database engines.',
'normally used by SQLAlchemy.',
)} )}
</div> </div>
</div> </StyledInputContainer>
</StyledInputContainer> </Collapse.Panel>
<StyledInputContainer> <Collapse.Panel
<div className="control-label">{t('Root certificate')}</div> header={
<div className="input-container">
<textarea
name="server_cert"
value={db?.server_cert || ''}
placeholder={t('Root certificate')}
onChange={onTextChange}
/>
</div>
<div className="helper">
{t(
'Optional CA_BUNDLE contents to validate HTTPS requests. Only available on ' +
'certain database engines.',
)}
</div>
</StyledInputContainer>
</Collapse.Panel>
<Collapse.Panel
header={
<div>
<h4>Other</h4>
<p className="helper">Additional settings.</p>
</div>
}
key="4"
>
<StyledInputContainer className="mb-0">
<div className="input-container">
<IndeterminateCheckbox
id="impersonate_user"
indeterminate={false}
checked={!!db?.impersonate_user}
onChange={onInputChange}
labelText={t(
'Impersonate Logged In User (Presto, Trino, Hive, and GSheets)',
)}
/>
<InfoTooltip
tooltip={t(
'If Presto or Trino, 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 ' +
'and hive.server2.enable.doAs is enabled, will run the queries as ' +
'service account, but impersonate the currently logged on user via ' +
'hive.server2.proxy.user property.',
)}
/>
</div>
</StyledInputContainer>
<StyledInputContainer className="mb-0">
<div className="input-container">
<IndeterminateCheckbox
id="allow_csv_upload"
indeterminate={false}
checked={!!db?.allow_csv_upload}
onChange={onInputChange}
labelText={t('Allow data upload')}
/>
<InfoTooltip
tooltip={t(
'If selected, please set the schemas allowed for data upload in Extra.',
)}
/>
</div>
</StyledInputContainer>
<StyledInputContainer className="extra-container">
<div className="control-label">{t('Extra')}</div>
<div className="input-container">
<StyledJsonEditor
name="extra"
value={db?.extra ?? defaultExtra}
placeholder={t('Secure extra')}
onChange={(json: string) =>
onEditorChange({ json, name: 'extra' })
}
width="100%"
height="160px"
/>
</div>
<div className="helper">
<div> <div>
{t('JSON string containing extra configuration elements.')} <h4>Other</h4>
<p className="helper">Additional settings.</p>
</div> </div>
<div> }
{t( key="4"
'1. The engine_params object gets unpacked into the sqlalchemy.create_engine ' + >
'call, while the metadata_params gets unpacked into the sqlalchemy.MetaData ' + <StyledInputContainer className="mb-0">
'call.', <div className="input-container">
)} <IndeterminateCheckbox
id="impersonate_user"
indeterminate={false}
checked={!!db?.impersonate_user}
onChange={onInputChange}
labelText={t(
'Impersonate Logged In User (Presto, Trino, Hive, and GSheets)',
)}
/>
<InfoTooltip
tooltip={t(
'If Presto or Trino, 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 ' +
'and hive.server2.enable.doAs is enabled, will run the queries as ' +
'service account, but impersonate the currently logged on user via ' +
'hive.server2.proxy.user property.',
)}
/>
</div> </div>
<div> </StyledInputContainer>
{t( <StyledInputContainer className="mb-0">
'2. The metadata_cache_timeout is a cache timeout setting in seconds for ' + <div className="input-container">
'metadata fetch of this database. Specify it as "metadata_cache_timeout": ' + <IndeterminateCheckbox
'{"schema_cache_timeout": 600, "table_cache_timeout": 600}. If unset, cache ' + id="allow_csv_upload"
'will not be enabled for the functionality. A timeout of 0 indicates that ' + indeterminate={false}
'the cache never expires.', checked={!!db?.allow_csv_upload}
)} onChange={onInputChange}
labelText={t('Allow data upload')}
/>
<InfoTooltip
tooltip={t(
'If selected, please set the schemas allowed for data upload in Extra.',
)}
/>
</div> </div>
<div> </StyledInputContainer>
{t( <StyledInputContainer className="extra-container">
'3. The schemas_allowed_for_csv_upload is a comma separated list of schemas ' + <div className="control-label">{t('Extra')}</div>
'that CSVs are allowed to upload to. Specify it as ' + <div className="input-container">
'"schemas_allowed_for_csv_upload": ["public", "csv_upload"]. If database ' + <StyledJsonEditor
'flavor does not support schema or any schema is allowed to be accessed, ' + name="extra"
'just leave the list empty.', value={db?.extra ?? defaultExtra}
)} placeholder={t('Secure extra')}
onChange={(json: string) =>
onEditorChange({ json, name: 'extra' })
}
width="100%"
height="160px"
/>
</div> </div>
<div> <div className="helper">
{t( <div>
"4. The version field is a string specifying this db's version. This " + {t('JSON string containing extra configuration elements.')}
'should be used with Presto DBs so that the syntax is correct.', </div>
)} <div>
{t(
'1. The engine_params object gets unpacked into the sqlalchemy.create_engine ' +
'call, while the metadata_params gets unpacked into the sqlalchemy.MetaData ' +
'call.',
)}
</div>
<div>
{t(
'2. The metadata_cache_timeout is a cache timeout setting in seconds for ' +
'metadata fetch of this database. Specify it as "metadata_cache_timeout": ' +
'{"schema_cache_timeout": 600, "table_cache_timeout": 600}. If unset, cache ' +
'will not be enabled for the functionality. A timeout of 0 indicates that ' +
'the cache never expires.',
)}
</div>
<div>
{t(
'3. The schemas_allowed_for_csv_upload is a comma separated list of schemas ' +
'that CSVs are allowed to upload to. Specify it as ' +
'"schemas_allowed_for_csv_upload": ["public", "csv_upload"]. If database ' +
'flavor does not support schema or any schema is allowed to be accessed, ' +
'just leave the list empty.',
)}
</div>
<div>
{t(
"4. The version field is a string specifying this db's version. This " +
'should be used with Presto DBs so that the syntax is correct.',
)}
</div>
<div>
{t(
'5. The allows_virtual_table_explore field is a boolean specifying whether ' +
'or not the Explore button in SQL Lab results is shown.',
)}
</div>
</div> </div>
<div> </StyledInputContainer>
{t( </Collapse.Panel>
'5. The allows_virtual_table_explore field is a boolean specifying whether ' + </Collapse>
'or not the Explore button in SQL Lab results is shown.', </StyledOptionContainer>
)}
</div>
</div>
</StyledInputContainer>
</Collapse.Panel>
</Collapse>
); );
}; };