diff --git a/superset-frontend/src/common/components/InfoTooltip.tsx b/superset-frontend/src/common/components/InfoTooltip.tsx new file mode 100644 index 0000000000..1bf4bd1d53 --- /dev/null +++ b/superset-frontend/src/common/components/InfoTooltip.tsx @@ -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; + 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 ( + + + + ); +} diff --git a/superset-frontend/src/common/components/common.stories.tsx b/superset-frontend/src/common/components/common.stories.tsx index 36dd7c51a0..19f597ea5b 100644 --- a/superset-frontend/src/common/components/common.stories.tsx +++ b/superset-frontend/src/common/components/common.stories.tsx @@ -26,6 +26,7 @@ import AntdPopover from './Popover'; import AntdTooltip from './Tooltip'; import { Menu } from '.'; import { Dropdown } from './Dropdown'; +import InfoTooltip from './InfoTooltip'; export default { title: 'Common Components', @@ -175,3 +176,51 @@ export const Tooltip = () => ( ); + +export const StyledInfoTooltip = (args: any) => { + const styles = { + padding: '100px 0 0 200px', + }; + + return ( +
+ +
+ ); +}; + +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'], + }, + }, +}; diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal.tsx b/superset-frontend/src/views/CRUD/data/database/DatabaseModal.tsx index 6518d0dede..e384bc9773 100644 --- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal.tsx +++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal.tsx @@ -18,7 +18,7 @@ */ import React, { FunctionComponent, useState, useEffect } from 'react'; 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 withToasts from 'src/messageToasts/enhancers/withToasts'; 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 Button from 'src/components/Button'; import IndeterminateCheckbox from 'src/components/IndeterminateCheckbox'; +import { JsonEditor } from 'src/components/AsyncAceEditor'; import { DatabaseObject } from './types'; interface DatabaseModalProps { @@ -45,6 +46,10 @@ const StyledIcon = styled(Icon)` const StyledInputContainer = styled.div` margin-bottom: ${({ theme }) => theme.gridUnit * 2}px; + &.extra-container { + padding-top: 8px; + } + .helper { display: block; 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 = ({ addDangerToast, addSuccessToast, @@ -241,6 +252,17 @@ const DatabaseModal: FunctionComponent = ({ 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 = () => { if ( db && @@ -383,8 +405,7 @@ const DatabaseModal: FunctionComponent = ({ onChange={onInputChange} />
{t('Asynchronous Query Execution')}
- = ({ onChange={onInputChange} />
{t('Expose in SQL Lab')}
- + @@ -421,8 +439,7 @@ const DatabaseModal: FunctionComponent = ({ onChange={onInputChange} />
{t('Allow CREATE TABLE AS')}
- @@ -436,8 +453,7 @@ const DatabaseModal: FunctionComponent = ({ onChange={onInputChange} />
{t('Allow CREATE VIEW AS')}
- @@ -451,8 +467,7 @@ const DatabaseModal: FunctionComponent = ({ onChange={onInputChange} />
{t('Allow DML')}
- = ({ onChange={onInputChange} />
{t('Allow Multi Schema Metadata Fetch')}
- = ({
{t('Secure Extra')}
-