From a9eda01764e962c1d6c6f002208a97bfb4e6a251 Mon Sep 17 00:00:00 2001 From: "Hugh A. Miles II" Date: Tue, 8 Jun 2021 22:28:20 -0400 Subject: [PATCH] feat(database-connection-ui) Allow configuration of Database Images from SupersetText (#15023) * saving this for now * fix some styles * add database images * fix * enforce only numbers * add default iamge --- .../images/icons/default_db_image.svg | 22 +++++++++++++++++++ .../Form/LabeledErrorBoundInput.tsx | 5 +++++ .../src/components/Icon/index.tsx | 3 +++ .../src/components/IconButton/index.tsx | 19 +++++++++++----- .../DatabaseModal/DatabaseConnectionForm.tsx | 1 + .../data/database/DatabaseModal/index.tsx | 6 +++-- superset-frontend/src/views/CRUD/hooks.ts | 3 +++ 7 files changed, 52 insertions(+), 7 deletions(-) create mode 100644 superset-frontend/images/icons/default_db_image.svg diff --git a/superset-frontend/images/icons/default_db_image.svg b/superset-frontend/images/icons/default_db_image.svg new file mode 100644 index 0000000000000..3cd24f4888d8c --- /dev/null +++ b/superset-frontend/images/icons/default_db_image.svg @@ -0,0 +1,22 @@ + + + + + diff --git a/superset-frontend/src/components/Form/LabeledErrorBoundInput.tsx b/superset-frontend/src/components/Form/LabeledErrorBoundInput.tsx index 75df2bb088cbb..f71df9d18ebae 100644 --- a/superset-frontend/src/components/Form/LabeledErrorBoundInput.tsx +++ b/superset-frontend/src/components/Form/LabeledErrorBoundInput.tsx @@ -62,6 +62,11 @@ const alertIconStyles = (theme: SupersetTheme, hasError: boolean) => css` }`} `; const StyledFormGroup = styled('div')` + input::-webkit-outer-spin-button, + input::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; + } margin-bottom: ${({ theme }) => theme.gridUnit * 5}px; .ant-form-item { margin-bottom: 0; diff --git a/superset-frontend/src/components/Icon/index.tsx b/superset-frontend/src/components/Icon/index.tsx index 693354d9a7367..e83dde1131381 100644 --- a/superset-frontend/src/components/Icon/index.tsx +++ b/superset-frontend/src/components/Icon/index.tsx @@ -145,6 +145,7 @@ import { ReactComponent as WarningIcon } from 'images/icons/warning.svg'; import { ReactComponent as WarningSolidIcon } from 'images/icons/warning_solid.svg'; import { ReactComponent as XLargeIcon } from 'images/icons/x-large.svg'; import { ReactComponent as XSmallIcon } from 'images/icons/x-small.svg'; +import { ReactComponent as DefaultDatabaseIcon } from 'images/icons/default_db_image.svg'; export type IconName = | 'alert' @@ -184,6 +185,7 @@ export type IconName = | 'copy' | 'cursor-target' | 'database' + | 'default-database' | 'dataset-physical' | 'dataset-virtual' | 'dataset-virtual-greyscale' @@ -299,6 +301,7 @@ export const iconsRegistry: Record< 'circle-check-solid': CircleCheckSolidIcon, 'color-palette': ColorPaletteIcon, 'cursor-target': CursorTargeIcon, + 'default-database': DefaultDatabaseIcon, 'dataset-physical': DatasetPhysicalIcon, 'dataset-virtual': DatasetVirtualIcon, 'dataset-virtual-greyscale': DatasetVirtualGreyscaleIcon, diff --git a/superset-frontend/src/components/IconButton/index.tsx b/superset-frontend/src/components/IconButton/index.tsx index fb10b77a4a2a3..164d93e67d86f 100644 --- a/superset-frontend/src/components/IconButton/index.tsx +++ b/superset-frontend/src/components/IconButton/index.tsx @@ -17,9 +17,10 @@ * under the License. */ import React from 'react'; -import { styled } from '@superset-ui/core'; +import { styled, supersetTheme } from '@superset-ui/core'; import Button from 'src/components/Button'; import { ButtonProps as AntdButtonProps } from 'antd/lib/button'; +import Icon from 'src/components/Icon'; export interface IconButtonProps extends AntdButtonProps { buttonText: string; @@ -35,7 +36,6 @@ const StyledButton = styled(Button)` width: 33%; `; const StyledImage = styled.div` - margin: ${({ theme }) => theme.gridUnit * 8}px 0; padding: ${({ theme }) => theme.gridUnit * 4}px; &:first-of-type { @@ -43,7 +43,8 @@ const StyledImage = styled.div` } img { - width: fit-content; + width: 100%; + height: 100%; &:first-of-type { margin-right: 0; @@ -82,7 +83,6 @@ const StyledBottom = styled.div` background-color: ${({ theme }) => theme.colors.grayscale.light4}; width: 100%; line-height: 1.5em; - overflow: hidden; white-space: no-wrap; text-overflow: ellipsis; @@ -95,8 +95,17 @@ const IconButton = styled( ({ icon, altText, buttonText, ...props }: IconButtonProps) => ( - {altText} + {icon && {altText}} + {!icon && ( + + )} + {buttonText} diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx index 1eac5de10e057..f70f10565eb4f 100644 --- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx +++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx @@ -176,6 +176,7 @@ const portField = ({ = ({ const [dbName, setDbName] = useState(''); const [isLoading, setLoading] = useState(false); const conf = useCommonConf(); + const dbImages = getDatabaseImages(); const isEditMode = !!databaseId; const sslForced = isFeatureEnabled( FeatureFlag.FORCE_DATABASE_CONNECTIONS_SSL, @@ -336,7 +338,6 @@ const DatabaseModal: FunctionComponent = ({ Or choose from a list of other databases we support{' '} -