chore: Moves spec files to the src folder - iteration 7 (#16943)

superset-frontend/src/SqlLab/components/ShareSqlLabQuery/ShareSqlLabQuery.test.jsx

@@ -0,0 +1,132 @@
+/**
+ * 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 configureStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
+import fetchMock from 'fetch-mock';
+import * as featureFlags from 'src/featureFlags';
+import { Provider } from 'react-redux';
+import { supersetTheme, ThemeProvider } from '@superset-ui/core';
+import { render, screen, act } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import userEvent from '@testing-library/user-event';
+import * as utils from 'src/utils/common';
+import ShareSqlLabQuery from 'src/SqlLab/components/ShareSqlLabQuery';
+
+const mockStore = configureStore([thunk]);
+const store = mockStore({});
+let isFeatureEnabledMock;
+
+const standardProvider = ({ children }) => (
+  <ThemeProvider theme={supersetTheme}>
+    <Provider store={store}>{children}</Provider>
+  </ThemeProvider>
+);
+
+const defaultProps = {
+  queryEditor: {
+    dbId: 0,
+    title: 'query title',
+    schema: 'query_schema',
+    autorun: false,
+    sql: 'SELECT * FROM ...',
+    remoteId: 999,
+  },
+  addDangerToast: jest.fn(),
+};
+
+describe('ShareSqlLabQuery', () => {
+  const storeQueryUrl = 'glob:*/kv/store/';
+  const storeQueryMockId = '123';
+
+  beforeEach(async () => {
+    fetchMock.post(storeQueryUrl, () => ({ id: storeQueryMockId }), {
+      overwriteRoutes: true,
+    });
+    fetchMock.resetHistory();
+    jest.clearAllMocks();
+  });
+
+  afterAll(fetchMock.reset);
+
+  describe('via /kv/store', () => {
+    beforeAll(() => {
+      isFeatureEnabledMock = jest
+        .spyOn(featureFlags, 'isFeatureEnabled')
+        .mockImplementation(() => true);
+    });
+
+    afterAll(() => {
+      isFeatureEnabledMock.restore();
+    });
+
+    it('calls storeQuery() with the query when getCopyUrl() is called', async () => {
+      await act(async () => {
+        render(<ShareSqlLabQuery {...defaultProps} />, {
+          wrapper: standardProvider,
+        });
+      });
+      const button = screen.getByRole('button');
+      const storeQuerySpy = jest.spyOn(utils, 'storeQuery');
+      userEvent.click(button);
+      expect(storeQuerySpy.mock.calls).toHaveLength(1);
+      storeQuerySpy.mockRestore();
+    });
+  });
+
+  describe('via saved query', () => {
+    beforeAll(() => {
+      isFeatureEnabledMock = jest
+        .spyOn(featureFlags, 'isFeatureEnabled')
+        .mockImplementation(() => false);
+    });
+
+    afterAll(() => {
+      isFeatureEnabledMock.restore();
+    });
+
+    it('does not call storeQuery() with the query when getCopyUrl() is called and feature is not enabled', async () => {
+      await act(async () => {
+        render(<ShareSqlLabQuery {...defaultProps} />, {
+          wrapper: standardProvider,
+        });
+      });
+      const storeQuerySpy = jest.spyOn(utils, 'storeQuery');
+      const button = screen.getByRole('button');
+      userEvent.click(button);
+      expect(storeQuerySpy.mock.calls).toHaveLength(0);
+      storeQuerySpy.mockRestore();
+    });
+
+    it('button is disabled and there is a request to save the query', async () => {
+      const updatedProps = {
+        queryEditor: {
+          ...defaultProps.queryEditor,
+          remoteId: undefined,
+        },
+      };
+
+      render(<ShareSqlLabQuery {...updatedProps} />, {
+        wrapper: standardProvider,
+      });
+      const button = await screen.findByRole('button', { name: /copy link/i });
+      expect(button).toBeDisabled();
+    });
+  });
+});

superset-frontend/src/SqlLab/components/ShareSqlLabQuery/index.tsx

@@ -0,0 +1,122 @@
+/**
+ * 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 Button from 'src/components/Button';
+import Icons from 'src/components/Icons';
+import withToasts from 'src/components/MessageToasts/withToasts';
+import CopyToClipboard from 'src/components/CopyToClipboard';
+import { storeQuery } from 'src/utils/common';
+import { getClientErrorObject } from 'src/utils/getClientErrorObject';
+import { FeatureFlag, isFeatureEnabled } from 'src/featureFlags';
+import { QueryEditor } from 'src/SqlLab/types';
+
+interface ShareSqlLabQueryPropTypes {
+  queryEditor: QueryEditor;
+  addDangerToast: (msg: string) => void;
+}
+
+const StyledIcon = styled(Icons.Link)`
+  &:first-of-type {
+    margin: 0;
+    display: flex;
+    svg {
+      margin: 0;
+    }
+  }
+`;
+
+function ShareSqlLabQuery({
+  queryEditor,
+  addDangerToast,
+}: ShareSqlLabQueryPropTypes) {
+  const theme = useTheme();
+
+  const getCopyUrlForKvStore = (callback: Function) => {
+    const { dbId, title, schema, autorun, sql } = queryEditor;
+    const sharedQuery = { dbId, title, schema, autorun, sql };
+
+    return storeQuery(sharedQuery)
+      .then(shortUrl => {
+        callback(shortUrl);
+      })
+      .catch(response => {
+        getClientErrorObject(response).then(() => {
+          addDangerToast(t('There was an error with your request'));
+        });
+      });
+  };
+
+  const getCopyUrlForSavedQuery = (callback: Function) => {
+    let savedQueryToastContent;
+
+    if (queryEditor.remoteId) {
+      savedQueryToastContent = `${
+        window.location.origin + window.location.pathname
+      }?savedQueryId=${queryEditor.remoteId}`;
+      callback(savedQueryToastContent);
+    } else {
+      savedQueryToastContent = t('Please save the query to enable sharing');
+      callback(savedQueryToastContent);
+    }
+  };
+  const getCopyUrl = (callback: Function) => {
+    if (isFeatureEnabled(FeatureFlag.SHARE_QUERIES_VIA_KV_STORE)) {
+      return getCopyUrlForKvStore(callback);
+    }
+    return getCopyUrlForSavedQuery(callback);
+  };
+
+  const buildButton = (canShare: boolean) => {
+    const tooltip = canShare
+      ? t('Copy query link to your clipboard')
+      : t('Save the query to enable this feature');
+    return (
+      <Button buttonSize="small" tooltip={tooltip} disabled={!canShare}>
+        <StyledIcon
+          iconColor={
+            canShare ? theme.colors.primary.base : theme.colors.grayscale.base
+          }
+          iconSize="xl"
+        />
+        {t('Copy link')}
+      </Button>
+    );
+  };
+
+  const canShare =
+    !!queryEditor.remoteId ||
+    isFeatureEnabled(FeatureFlag.SHARE_QUERIES_VIA_KV_STORE);
+
+  return (
+    <>
+      {canShare ? (
+        <CopyToClipboard
+          getText={getCopyUrl}
+          wrapped={false}
+          copyNode={buildButton(canShare)}
+        />
+      ) : (
+        buildButton(canShare)
+      )}
+    </>
+  );
+}
+
+export default withToasts(ShareSqlLabQuery);