feat(database-connection-ui) Allow configuration of Database Images f…

…rom SupersetText (#15023)

* saving this for now

* fix some styles

* add database images

* fix

* enforce only numbers

* add default iamge

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;

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,

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,15 +36,15 @@ 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 {
     margin-right: 0;
   }
 
   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) => (
     <StyledButton {...props}>
       <StyledImage>
-        <img src={icon} alt={altText} />
+        {icon && <img src={icon} alt={altText} />}
+        {!icon && (
+          <Icon
+            color={supersetTheme.colors.primary.base}
+            height={100}
+            width={100}
+            name="default-database"
+          />
+        )}
       </StyledImage>
+
       <StyledBottom>
         <StyledInner>{buttonText}</StyledInner>
       </StyledBottom>

superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx

@@ -176,6 +176,7 @@ const portField = ({
   <ValidatedInput
     id="port"
     name="port"
+    type="number"
     required={required}
     value={db?.parameters?.port}
     validationMethods={{ onBlur: getValidation }}

superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx

@@ -40,6 +40,7 @@ import {
   useSingleViewResource,
   useAvailableDatabases,
   useDatabaseValidation,
+  getDatabaseImages,
 } from 'src/views/CRUD/hooks';
 import { useCommonConf } from 'src/views/CRUD/data/database/state';
 import {
@@ -213,6 +214,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
   const [dbName, setDbName] = useState('');
   const [isLoading, setLoading] = useState<boolean>(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<DatabaseModalProps> = ({
       <span className="available-label">
         Or choose from a list of other databases we support{' '}
       </span>
-      <Label className="label-available-select">supported databases</Label>
       <Select
         style={{ width: '100%' }}
         onChange={setDatabaseModel}
@@ -357,9 +358,10 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
         ?.filter((db: DatabaseForm) => db.preferred)
         .map((database: DatabaseForm) => (
           <IconButton
-            icon="preferred-item"
+            className="preferred-item"
             onClick={() => setDatabaseModel(database.engine)}
             buttonText={database.name}
+            icon={dbImages[database.engine]}
           />
         ))}
     </div>

superset-frontend/src/views/CRUD/hooks.ts

@@ -26,6 +26,7 @@ import { FilterValue } from 'src/components/ListView/types';
 import Chart, { Slice } from 'src/types/Chart';
 import copyTextToClipboard from 'src/utils/copy';
 import { getClientErrorObject } from 'src/utils/getClientErrorObject';
+import SupersetText from 'src/utils/textUtils';
 import { FavoriteStatus, ImportResourceName, DatabaseObject } from './types';
 
 interface ListViewResourceState<D extends object = any> {
@@ -625,6 +626,8 @@ export const copyQueryLink = (
     });
 };
 
+export const getDatabaseImages = () => SupersetText.DB_IMAGES;
+
 export const testDatabaseConnection = (
   connection: DatabaseObject,
   handleErrorMsg: (errorMsg: string) => void,