rough draft of footer component

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

@@ -17,7 +17,53 @@
  * 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 { addDangerToast } from 'src/components/MessageToasts/actions';
+import { DatasetObject } from '../types';
 
-export default function Footer() {
-  return <div>Footer</div>;
+interface FooterObject {
+  url: string;
+  datasetObject?: Partial<DatasetObject> | null;
+}
+
+export default function Footer({ url, datasetObject }: FooterObject) {
+  const { createResource } = useSingleViewResource<Partial<DatasetObject>>(
+    'dataset',
+    t('dataset'),
+    addDangerToast,
+  );
+  const cancelButtonOnClick = () => {
+    // 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 tooltipText = t('Select a database table.');
+
+  const onSave = () => {
+    if (datasetObject) {
+      createResource(datasetObject).then(response => {
+        if (!response) {
+          return;
+        }
+      });
+      cancelButtonOnClick();
+    }
+  };
+
+  return (
+    <>
+      <Button onClick={cancelButtonOnClick}>Cancel</Button>
+      <Button
+        buttonStyle="primary"
+        disabled={!datasetObject?.table_name}
+        tooltip={!datasetObject?.table_name ? tooltipText : undefined}
+        onClick={onSave}
+      >
+        Create Dataset
+      </Button>
+    </>
+  );
 }

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

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React from 'react';
+import React, { useReducer, Reducer } from 'react';
 import Header from './Header';
 import DatasetPanel from './DatasetPanel';
 import LeftPanel from './LeftPanel';
@@ -60,19 +60,25 @@ export function datasetReducer(
   }
 }
 
-export default function AddDataset() {
+export default function AddDataset(url: string) {
   // this is commented out for now, but can be commented in as the component
   // is built up. Uncomment the useReducer in imports too
-  // const [dataset, setDataset] = useReducer<
-  //   Reducer<Partial<DatasetObject> | null, DSReducerActionType>
-  // >(datasetReducer, null);
+  const [dataset, setDataset] = useReducer<
+    Reducer<Partial<DatasetObject> | null, DSReducerActionType>
+  >(datasetReducer, null);
+  const prevUrl =
+    '/tablemodelview/list/?pageIndex=0&sortColumn=changed_on_delta_humanized&sortOrder=desc';
+
+  const FooterComponent = () => (
+    <Footer url={prevUrl} datasetObject={dataset} />
+  );
 
   return (
     <DatasetLayout
       header={Header()}
       leftPanel={LeftPanel()}
       datasetPanel={DatasetPanel()}
-      footer={Footer()}
+      footer={FooterComponent()}
     />
   );
 }

superset-frontend/src/views/CRUD/data/dataset/styles.ts

@@ -92,4 +92,9 @@ export const StyledFooter = styled.div`
   border-top: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
   border-bottom: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
   color: ${({ theme }) => theme.colors.info.base};
+  border-top: ${({ theme }) => theme.gridUnit / 4}px solid
+    ${({ theme }) => theme.colors.grayscale.light2};
+  padding: ${({ theme }) => theme.gridUnit * 4}px;
+  display: flex;
+  justify-content: flex-end;
 `;