feat(SqlLab): Change Save Dataset Button to Split Save Query Button IV (#20852)

* Moving entire split save btn PR * Addressed review comments * Remove arbitrary div from ErrorBoundary in Chart * Added accidentally removed comment * Fix act errors in SaveQuery tests * Fix SaveDatasetActionButton test * SaveDatasetModal test almost working * SaveDatasetModal tests all passing * Clean SaveDatasetModal test * Fix create chart button and SaveDatasetModal text in SQL Lab * Fix untitled dataset name on SaveDatasetModal in explore * Fix styling on split save button
2026-04-24 10:35:01 +00:00 · 2022-08-01 14:36:34 -05:00
parent 3a11856ecb
commit 8a04536f9d
25 changed files with 515 additions and 196 deletions
--- a/superset-frontend/src/SqlLab/components/SaveDatasetActionButton/SaveDatasetActionButton.test.tsx
+++ b/superset-frontend/src/SqlLab/components/SaveDatasetActionButton/SaveDatasetActionButton.test.tsx
@@ -0,0 +1,62 @@
+/**
+ * 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 { render, screen } from 'spec/helpers/testing-library';
+import userEvent from '@testing-library/user-event';
+import { Menu } from 'src/components/Menu';
+import SaveDatasetActionButton from 'src/SqlLab/components/SaveDatasetActionButton';
+
+const overlayMenu = (
+  <Menu>
+    <Menu.Item>Save dataset</Menu.Item>
+  </Menu>
+);
+
+describe('SaveDatasetActionButton', () => {
+  it('renders a split save button', () => {
+    render(
+      <SaveDatasetActionButton
+        setShowSave={() => true}
+        overlayMenu={overlayMenu}
+      />,
+    );
+
+    const saveBtn = screen.getByRole('button', { name: /save/i });
+    const caretBtn = screen.getByRole('button', { name: /caret-down/i });
+
+    expect(saveBtn).toBeVisible();
+    expect(caretBtn).toBeVisible();
+  });
+
+  it('renders a "save dataset" dropdown menu item when user clicks caret button', () => {
+    render(
+      <SaveDatasetActionButton
+        setShowSave={() => true}
+        overlayMenu={overlayMenu}
+      />,
+    );
+
+    const caretBtn = screen.getByRole('button', { name: /caret-down/i });
+    userEvent.click(caretBtn);
+
+    const saveDatasetMenuItem = screen.getByText(/save dataset/i);
+
+    expect(saveDatasetMenuItem).toBeInTheDocument();
+  });
+});
--- a/superset-frontend/src/SqlLab/components/SaveDatasetActionButton/index.tsx
+++ b/superset-frontend/src/SqlLab/components/SaveDatasetActionButton/index.tsx
@@ -0,0 +1,83 @@
+/**
+ * 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 { t, useTheme, styled } from '@superset-ui/core';
+import Icons from 'src/components/Icons';
+import { DropdownButton } from 'src/components/DropdownButton';
+import Button from 'src/components/Button';
+import { DropdownButtonProps } from 'antd/lib/dropdown';
+
+interface Props {
+  setShowSave: (arg0: boolean) => void;
+  overlayMenu: JSX.Element | null;
+}
+
+export default function SaveDatasetActionButton({
+  setShowSave,
+  overlayMenu,
+}: Props) {
+  const theme = useTheme();
+
+  const StyledDropdownButton = styled(
+    DropdownButton as React.FC<DropdownButtonProps>,
+  )`
+    &.ant-dropdown-button button.ant-btn.ant-btn-default {
+      &:first-of-type {
+        width: ${theme.gridUnit * 16}px;
+      }
+      font-weight: ${theme.gridUnit * 150};
+      background-color: ${theme.colors.primary.light4};
+      color: ${theme.colors.primary.dark1};
+      &:nth-child(2) {
+        &:before,
+        &:hover:before {
+          border-left: 2px solid ${theme.colors.primary.dark2};
+        }
+      }
+    }
+    span[name='caret-down'] {
+      margin-left: ${theme.gridUnit * 1}px;
+      color: ${theme.colors.primary.dark2};
+    }
+  `;
+
+  return !overlayMenu ? (
+    <Button
+      onClick={() => setShowSave(true)}
+      buttonStyle="primary"
+      css={{ width: theme.gridUnit * 25 }}
+    >
+      {t('Save')}
+    </Button>
+  ) : (
+    <StyledDropdownButton
+      onClick={() => setShowSave(true)}
+      overlay={overlayMenu}
+      icon={
+        <Icons.CaretDown
+          iconColor={theme.colors.grayscale.light5}
+          name="caret-down"
+        />
+      }
+      trigger={['click']}
+    >
+      {t('Save')}
+    </StyledDropdownButton>
+  );
+}