[pull] master from apache:master

superset-frontend/package.json

@@ -151,7 +151,7 @@
     "match-sorter": "^6.1.0",
     "memoize-one": "^5.1.1",
     "moment": "^2.26.0",
-    "moment-timezone": "^0.5.33",
+    "moment-timezone": "^0.5.37",
     "mousetrap": "^1.6.1",
     "mustache": "^2.2.1",
     "polished": "^3.7.2",

superset-frontend/src/logger/LogUtils.ts

@@ -35,6 +35,15 @@ export const LOG_ACTIONS_EXPLORE_DASHBOARD_CHART = 'explore_dashboard_chart';
 export const LOG_ACTIONS_EXPORT_CSV_DASHBOARD_CHART =
   'export_csv_dashboard_chart';
 export const LOG_ACTIONS_CHANGE_DASHBOARD_FILTER = 'change_dashboard_filter';
+export const LOG_ACTIONS_DATASET_CREATION_EMPTY_CANCELLATION =
+  'dataset_creation_empty_cancellation';
+export const LOG_ACTIONS_DATASET_CREATION_DATABASE_CANCELLATION =
+  'dataset_creation_database_cancellation';
+export const LOG_ACTIONS_DATASET_CREATION_SCHEMA_CANCELLATION =
+  'dataset_creation_schema_cancellation';
+export const LOG_ACTIONS_DATASET_CREATION_TABLE_CANCELLATION =
+  'dataset_creation_table_cancellation';
+export const LOG_ACTIONS_DATASET_CREATION_SUCCESS = 'dataset_creation_success';
 
 // Log event types --------------------------------------------------------------
 export const LOG_EVENT_TYPE_TIMING = new Set([
@@ -56,6 +65,14 @@ export const LOG_EVENT_TYPE_USER = new Set([
   LOG_ACTIONS_MOUNT_EXPLORER,
 ]);
 
+export const LOG_EVENT_DATASET_TYPE_DATASET_CREATION = [
+  LOG_ACTIONS_DATASET_CREATION_EMPTY_CANCELLATION,
+  LOG_ACTIONS_DATASET_CREATION_DATABASE_CANCELLATION,
+  LOG_ACTIONS_DATASET_CREATION_SCHEMA_CANCELLATION,
+  LOG_ACTIONS_DATASET_CREATION_TABLE_CANCELLATION,
+  LOG_ACTIONS_DATASET_CREATION_SUCCESS,
+];
+
 export const Logger = {
   timeOriginOffset: 0,
 

superset-frontend/src/views/CRUD/data/dataset/AddDataset/AddDataset.test.tsx

@@ -35,7 +35,7 @@ describe('AddDataset', () => {
     // Left panel
     expect(blankeStateImgs[0]).toBeVisible();
     // Footer
-    expect(screen.getByText(/footer/i)).toBeVisible();
+    expect(screen.getByText(/Cancel/i)).toBeVisible();
 
     expect(blankeStateImgs.length).toBe(1);
   });

superset-frontend/src/views/CRUD/data/dataset/AddDataset/Footer/Footer.test.tsx

@@ -20,10 +20,47 @@ import React from 'react';
 import { render, screen } from 'spec/helpers/testing-library';
 import Footer from 'src/views/CRUD/data/dataset/AddDataset/Footer';
 
+const mockedProps = {
+  url: 'realwebsite.com',
+};
+
+const mockPropsWithDataset = {
+  url: 'realwebsite.com',
+  datasetObject: {
+    database: {
+      id: '1',
+      database_name: 'examples',
+    },
+    owners: [1, 2, 3],
+    schema: 'public',
+    dataset_name: 'Untitled',
+    table_name: 'real_info',
+  },
+};
+
 describe('Footer', () => {
-  it('renders a blank state Footer', () => {
-    render(<Footer />);
+  it('renders a Footer with a cancel button and a disabled create button', () => {
+    render(<Footer {...mockedProps} />, { useRedux: true });
+
+    const saveButton = screen.getByRole('button', {
+      name: /Cancel/i,
+    });
+
+    const createButton = screen.getByRole('button', {
+      name: /Create/i,
+    });
+
+    expect(saveButton).toBeVisible();
+    expect(createButton).toBeDisabled();
+  });
+
+  it('renders a Create Dataset button when a table is selected', () => {
+    render(<Footer {...mockPropsWithDataset} />, { useRedux: true });
+
+    const createButton = screen.getByRole('button', {
+      name: /Create/i,
+    });
 
-    expect(screen.getByText(/footer/i)).toBeVisible();
+    expect(createButton).toBeEnabled();
   });
 });

superset-frontend/src/views/CRUD/data/dataset/AddDataset/Footer/index.tsx

@@ -17,7 +17,104 @@
  * under the License.
  */
 import React from 'react';
+import Button from 'src/components/Button';
+import { t } from '@superset-ui/core';
+import { useSingleViewResource } from 'src/views/CRUD/hooks';
+import { logEvent } from 'src/logger/actions';
+import withToasts from 'src/components/MessageToasts/withToasts';
+import {
+  LOG_ACTIONS_DATASET_CREATION_EMPTY_CANCELLATION,
+  LOG_ACTIONS_DATASET_CREATION_DATABASE_CANCELLATION,
+  LOG_ACTIONS_DATASET_CREATION_SCHEMA_CANCELLATION,
+  LOG_ACTIONS_DATASET_CREATION_TABLE_CANCELLATION,
+  LOG_ACTIONS_DATASET_CREATION_SUCCESS,
+} from 'src/logger/LogUtils';
+import { DatasetObject } from '../types';
 
-export default function Footer() {
-  return <div>Footer</div>;
+interface FooterProps {
+  url: string;
+  addDangerToast: () => void;
+  datasetObject?: Partial<DatasetObject> | null;
+  onDatasetAdd?: (dataset: DatasetObject) => void;
 }
+
+const INPUT_FIELDS = ['db', 'schema', 'table_name'];
+const LOG_ACTIONS = [
+  LOG_ACTIONS_DATASET_CREATION_EMPTY_CANCELLATION,
+  LOG_ACTIONS_DATASET_CREATION_DATABASE_CANCELLATION,
+  LOG_ACTIONS_DATASET_CREATION_SCHEMA_CANCELLATION,
+  LOG_ACTIONS_DATASET_CREATION_TABLE_CANCELLATION,
+];
+
+function Footer({ url, datasetObject, addDangerToast }: FooterProps) {
+  const { createResource } = useSingleViewResource<Partial<DatasetObject>>(
+    'dataset',
+    t('dataset'),
+    addDangerToast,
+  );
+
+  const createLogAction = (dataset: Partial<DatasetObject>) => {
+    let totalCount = 0;
+    const value = Object.keys(dataset).reduce((total, key) => {
+      if (INPUT_FIELDS.includes(key) && dataset[key]) {
+        totalCount += 1;
+      }
+      return totalCount;
+    }, 0);
+
+    return LOG_ACTIONS[value];
+  };
+  const goToPreviousUrl = () => {
+    // this is a placeholder url until the final feature gets implemented
+    // at that point we will be passing in the url of the previous location.
+    window.location.href = url;
+  };
+
+  const cancelButtonOnClick = () => {
+    if (!datasetObject) {
+      logEvent(LOG_ACTIONS_DATASET_CREATION_EMPTY_CANCELLATION, {});
+    } else {
+      const logAction = createLogAction(datasetObject);
+      logEvent(logAction, datasetObject);
+    }
+    goToPreviousUrl();
+  };
+
+  const tooltipText = t('Select a database table.');
+
+  const onSave = () => {
+    if (datasetObject) {
+      const data = {
+        database: datasetObject.db?.id,
+        schema: datasetObject.schema,
+        table_name: datasetObject.table_name,
+      };
+      createResource(data).then(response => {
+        if (!response) {
+          return;
+        }
+        if (typeof response === 'number') {
+          logEvent(LOG_ACTIONS_DATASET_CREATION_SUCCESS, datasetObject);
+          // When a dataset is created the response we get is its ID number
+          goToPreviousUrl();
+        }
+      });
+    }
+  };
+
+  return (
+    <>
+      <Button onClick={cancelButtonOnClick}>Cancel</Button>
+      <Button
+        buttonStyle="primary"
+        disabled={!datasetObject?.table_name}
+        tooltip={!datasetObject?.table_name ? tooltipText : undefined}
+        onClick={onSave}
+      >
+        {t('Create Dataset')}
+      </Button>
+    </>
+  );
+}
+
+export default withToasts(Footer);