feat: base tabbed modal for new database CRUD UI

superset-frontend/spec/javascripts/views/CRUD/data/database/DatabaseList_spec.jsx

@@ -22,6 +22,7 @@ import configureStore from 'redux-mock-store';
 import { styledMount as mount } from 'spec/helpers/theming';
 
 import DatabaseList from 'src/views/CRUD/data/database/DatabaseList';
+import DatabaseModal from 'src/views/CRUD/data/database/DatabaseModal';
 import SubMenu from 'src/components/Menu/SubMenu';
 
 // store needed for withToasts(DatabaseList)
@@ -38,4 +39,8 @@ describe('DatabaseList', () => {
   it('renders a SubMenu', () => {
     expect(wrapper.find(SubMenu)).toExist();
   });
+
+  it('renders a DatabaseModal', () => {
+    expect(wrapper.find(DatabaseModal)).toExist();
+  });
 });

superset-frontend/spec/javascripts/views/CRUD/data/database/DatabaseModal_spec.jsx

@@ -0,0 +1,41 @@
+/**
+ * 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 thunk from 'redux-thunk';
+import configureStore from 'redux-mock-store';
+import { styledMount as mount } from 'spec/helpers/theming';
+
+import DatabaseModal from 'src/views/CRUD/data/database/DatabaseModal';
+import Modal from 'src/common/components/Modal';
+
+// store needed for withToasts(DatabaseModal)
+const mockStore = configureStore([thunk]);
+const store = mockStore({});
+
+describe('DatabaseModal', () => {
+  const wrapper = mount(<DatabaseModal />, { context: { store } });
+
+  it('renders', () => {
+    expect(wrapper.find(DatabaseModal)).toExist();
+  });
+
+  it('renders a Modal', () => {
+    expect(wrapper.find(Modal)).toExist();
+  });
+});

superset-frontend/src/common/components/Modal.tsx

@@ -0,0 +1,127 @@
+/**
+ * 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/style';
+import { Modal as BaseModal } from 'src/common/components';
+import { t } from '@superset-ui/translation';
+import Button from 'src/views/CRUD/data/dataset/Button';
+
+interface ModalProps {
+  className?: string;
+  children: React.ReactNode;
+  disablePrimaryButton?: boolean;
+  onHide: () => void;
+  onHandledPrimaryAction: () => void;
+  primaryButtonName: string;
+  primaryButtonType?: 'primary' | 'danger';
+  show: boolean;
+  title: React.ReactNode;
+  width?: string;
+  centered?: boolean;
+}
+
+const StyledModal = styled(BaseModal)`
+  .ant-modal-header {
+    background-color: ${({ theme }) => theme.colors.grayscale.light4};
+    border-radius: ${({ theme }) => theme.borderRadius}px
+      ${({ theme }) => theme.borderRadius}px 0 0;
+
+    .ant-modal-title h4 {
+      display: flex;
+      margin: 0;
+      align-items: center;
+    }
+  }
+
+  .ant-modal-close-x {
+    display: flex;
+    align-items: center;
+
+    .close {
+      flex: 1 1 auto;
+      margin-bottom: 3px;
+      color: ${({ theme }) => theme.colors.secondary.dark1};
+      font-size: 32px;
+      font-weight: ${({ theme }) => theme.typography.weights.light};
+    }
+  }
+
+  .ant-modal-body {
+    padding: 18px;
+  }
+
+  .ant-modal-footer {
+    border-top: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
+    padding: 16px;
+
+    .btn {
+      font-size: 12px;
+      text-transform: uppercase;
+    }
+
+    .btn + .btn {
+      margin-left: 8px;
+    }
+  }
+`;
+
+export default function Modal({
+  children,
+  disablePrimaryButton = false,
+  onHide,
+  onHandledPrimaryAction,
+  primaryButtonName,
+  primaryButtonType = 'primary',
+  show,
+  title,
+  width,
+  centered,
+  ...rest
+}: ModalProps) {
+  return (
+    <StyledModal
+      centered={!!centered}
+      onOk={onHandledPrimaryAction}
+      onCancel={onHide}
+      width={width || '600px'}
+      visible={show}
+      title={title}
+      closeIcon={
+        <span className="close" aria-hidden="true">
+          ×
+        </span>
+      }
+      footer={[
+        <Button key="back" onClick={onHide}>
+          {t('Cancel')}
+        </Button>,
+        <Button
+          key="submit"
+          disabled={disablePrimaryButton}
+          onClick={onHandledPrimaryAction}
+        >
+          {primaryButtonName}
+        </Button>,
+      ]}
+      {...rest}
+    >
+      {children}
+    </StyledModal>
+  );
+}

superset-frontend/src/common/components/Tabs.tsx

@@ -0,0 +1,55 @@
+/**
+ * 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 styled from '@superset-ui/style';
+import { Tabs as BaseTabs } from 'src/common/components';
+
+const Tabs = styled(BaseTabs)`
+  margin-top: -18px;
+
+  .ant-tabs-nav-list {
+    width: 100%;
+  }
+
+  .ant-tabs-tab {
+    flex: 1 1 auto;
+    width: 0;
+
+    &.ant-tabs-tab-active .ant-tabs-tab-btn {
+      color: inherit;
+    }
+  }
+
+  .ant-tabs-tab-btn {
+    flex: 1 1 auto;
+    font-size: ${({ theme }) => theme.typography.sizes.s}px;
+    text-align: center;
+    text-transform: uppercase;
+
+    .required {
+      margin-left: ${({ theme }) => theme.gridUnit / 2}px;
+      color: ${({ theme }) => theme.colors.error.base};
+    }
+  }
+
+  .ant-tabs-ink-bar {
+    background: ${({ theme }) => theme.colors.secondary.base};
+  }
+`;
+
+export default Tabs;

superset-frontend/src/components/Icon/index.tsx

@@ -28,6 +28,7 @@ import { ReactComponent as CircleCheckIcon } from 'images/icons/circle-check.svg
 import { ReactComponent as CircleCheckSolidIcon } from 'images/icons/circle-check-solid.svg';
 import { ReactComponent as CloseIcon } from 'images/icons/close.svg';
 import { ReactComponent as CompassIcon } from 'images/icons/compass.svg';
+import { ReactComponent as DatabasesIcon } from 'images/icons/databases.svg';
 import { ReactComponent as DatasetPhysicalIcon } from 'images/icons/dataset_physical.svg';
 import { ReactComponent as DatasetVirtualIcon } from 'images/icons/dataset_virtual.svg';
 import { ReactComponent as DropdownArrowIcon } from 'images/icons/dropdown-arrow.svg';
@@ -57,6 +58,7 @@ type IconName =
   | 'circle-check'
   | 'close'
   | 'compass'
+  | 'databases'
   | 'dataset-physical'
   | 'dataset-virtual'
   | 'dropdown-arrow'
@@ -85,6 +87,7 @@ export const iconsRegistry: Record<
   'checkbox-on': CheckboxOnIcon,
   'circle-check-solid': CircleCheckSolidIcon,
   'circle-check': CircleCheckIcon,
+  databases: DatabasesIcon,
   'dataset-physical': DatasetPhysicalIcon,
   'dataset-virtual': DatasetVirtualIcon,
   'favorite-selected': FavoriteSelectedIcon,
@@ -106,6 +109,7 @@ export const iconsRegistry: Record<
   trash: TrashIcon,
   warning: WarningIcon,
 };
+
 interface IconProps extends SVGProps<SVGSVGElement> {
   name: IconName;
 }
@@ -117,6 +121,7 @@ const Icon = ({
   ...rest
 }: IconProps) => {
   const Component = iconsRegistry[name];
+
   return (
     <Component color={color} viewBox={viewBox} data-test={name} {...rest} />
   );