feat: 🎸 API resource url

lib/js/app/components/ActionsMenu/ActionsMenu.test.tsx

@@ -3,6 +3,8 @@ import { Provider } from 'react-redux';
 import { render as rtlRender, fireEvent } from '@testing-library/react';
 import configureStore from 'redux-mock-store';
 
+import { AppContext } from '../../contexts';
+
 import ActionsMenu from './ActionsMenu';
 import text from './text.json';
 
@@ -18,9 +20,11 @@ const render = (overProps: any = {}) => {
   const store = mockStore({ queries: {} });
 
   const wrapper = rtlRender(
-    <Provider store={store}>
-      <ActionsMenu {...props} />
-    </Provider>
+    <AppContext.Provider value={{ keenAnalysis: { config: {} } } as any}>
+      <Provider store={store}>
+        <ActionsMenu {...props} />
+      </Provider>
+    </AppContext.Provider>
   );
 
   return {
@@ -161,3 +165,24 @@ test('allows user to embed HTML code', () => {
     ]
   `);
 });
+
+test('allows user to copy API Resource', () => {
+  const {
+    wrapper: { getByText },
+    store,
+  } = render();
+
+  const copyApiResource = getByText(text.apiResource);
+  fireEvent.click(copyApiResource);
+
+  expect(store.getActions()).toMatchInlineSnapshot(`
+    Array [
+      Object {
+        "payload": Object {
+          "config": Object {},
+        },
+        "type": "@app/COPY_API_RESOURCE_URL",
+      },
+    ]
+  `);
+});

lib/js/app/components/ActionsMenu/ActionsMenu.tsx

@@ -1,8 +1,9 @@
-import React, { FC, useState } from 'react';
+import React, { FC, useState, useContext } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { DropdownMenu, Tooltip } from '@keen.io/ui-core';
 import { AnimatePresence } from 'framer-motion';
 
+import { AppContext } from '../../contexts';
 import { getQueryResults } from '../../modules/queries';
 
 import {
@@ -22,6 +23,7 @@ import {
   exportChartToJson,
   exportDataToCsv,
   showEmbedModal,
+  copyApiResourceUrl,
 } from '../../modules/app';
 
 type Props = {
@@ -43,6 +45,9 @@ const ActionsMenu: FC<Props> = ({ isNewQuery, onRemoveQuery, onHideMenu }) => {
   const dispatch = useDispatch();
   const queryResults = useSelector(getQueryResults);
   const [tooltip, showTooltip] = useState(false);
+  const {
+    keenAnalysis: { config },
+  } = useContext(AppContext);
   return (
     <Container>
       <DropdownMenu.Container>
@@ -51,15 +56,15 @@ const ActionsMenu: FC<Props> = ({ isNewQuery, onRemoveQuery, onHideMenu }) => {
           onMouseEnter={() => !queryResults && showTooltip(true)}
           onMouseLeave={() => tooltip && showTooltip(false)}
         >
-          <AnimatePresence>
-            {tooltip && (
+          {tooltip && (
+            <AnimatePresence>
               <TooltipMotion {...tooltipMotion}>
                 <Tooltip hasArrow={false} mode="dark">
                   <TooltipContent>{text.tooltip}</TooltipContent>
                 </Tooltip>
               </TooltipMotion>
-            )}
-          </AnimatePresence>
+            </AnimatePresence>
+          )}
           <ExportDataLinks isActive={queryResults}>
             <DropdownMenu.Item
               onClick={() => {
@@ -107,6 +112,14 @@ const ActionsMenu: FC<Props> = ({ isNewQuery, onRemoveQuery, onHideMenu }) => {
         >
           {text.shareQuery}
         </DropdownMenu.Item>
+        <DropdownMenu.Item
+          onClick={() => {
+            dispatch(copyApiResourceUrl(config));
+            onHideMenu();
+          }}
+        >
+          {text.apiResource}
+        </DropdownMenu.Item>
         <DropdownMenu.Item
           onClick={() => {
             dispatch(showEmbedModal());

lib/js/app/components/ActionsMenu/text.json

@@ -6,5 +6,6 @@
   "json": "JSON",
   "csv": "CSV",
   "tooltip": "Run query to download result",
-  "embedHtml": "Embed HTML"
+  "embedHtml": "Embed HTML",
+  "apiResource": "API Resource"
 }

lib/js/app/constants.ts

@@ -40,6 +40,8 @@ export const ERRORS = {
   TOO_MANY_QUERIES: 'TooManyCachedQueriesInTheCurrentBillingPeriod',
 };
 
+export const API_VERSION = '3.0';
+
 export const EXTRACTION_PREVIEW_EVENTS_DEFAULT = 100;
 export const EXTRACTION_PREVIEW_EVENTS_LIMIT = 100000;
 export const EXTRACTION_BULK_EVENTS_DEFAULT = 1000;

lib/js/app/modules/app/actions.ts

@@ -36,6 +36,7 @@ import {
   DOWNLOAD_CODE_SNIPPET,
   SHOW_EMAIL_EXTRACTION_MODAL,
   HIDE_EMAIL_EXTRACTION_MODAL,
+  COPY_API_RESOURCE_URL,
 } from './constants';
 
 import {
@@ -212,3 +213,12 @@ export const downloadCodeSnippet = (
     readKey,
   },
 });
+
+export const copyApiResourceUrl = (
+  config: Record<string, any>
+): AppActions => ({
+  type: COPY_API_RESOURCE_URL,
+  payload: {
+    config,
+  },
+});

lib/js/app/modules/app/constants.ts

@@ -29,5 +29,6 @@ export const DOWNLOAD_CODE_SNIPPET = '@app/DOWNLOAD_CODE_SNIPPET';
 export const APP_START = '@app/APP_START';
 export const SHOW_EMAIL_EXTRACTION_MODAL = '@app/SHOW_EMAIL_EXTRACTION_MODAL';
 export const HIDE_EMAIL_EXTRACTION_MODAL = '@app/HIDE_EMAIL_EXTRACTION_MODAL';
+export const COPY_API_RESOURCE_URL = '@app/COPY_API_RESOURCE_URL';
 
 export const URL_STATE = 'keen_explorer_state';

lib/js/app/modules/app/index.ts

@@ -29,6 +29,7 @@ import {
   downloadCodeSnippet,
   showEmailExtractionModal,
   hideEmailExtractionModal,
+  copyApiResourceUrl,
 } from './actions';
 import {
   getConfirmation,
@@ -87,6 +88,7 @@ export {
   copyEmbeddedCode,
   downloadCodeSnippet,
   exportDataToCsv,
+  copyApiResourceUrl,
   ReducerState,
   SettingsModalSource,
 };

lib/js/app/modules/app/saga.ts

@@ -55,6 +55,7 @@ import {
   exportToCsv,
   createCodeSnippet,
   exportToHtml,
+  createResourceUrl,
 } from '../../utils';
 
 import { SET_QUERY_EVENT, NEW_QUERY_EVENT } from '../../queryCreator';
@@ -67,6 +68,7 @@ import {
   AppStartAction,
   CopyEmbeddedCodeAction,
   DownloadCodeSnippetAction,
+  CopyApiResourceUrlAction,
 } from './types';
 
 import {
@@ -88,6 +90,7 @@ import {
   EXPORT_DATA_TO_CSV,
   COPY_EMBEDDED_CODE,
   DOWNLOAD_CODE_SNIPPET,
+  COPY_API_RESOURCE_URL,
 } from './constants';
 
 const createScreenResizeChannel = () =>
@@ -417,6 +420,29 @@ export function* downloadCodeSnippet({ payload }: DownloadCodeSnippetAction) {
   }
 }
 
+export function* copyApiResourceUrl({ payload }: CopyApiResourceUrlAction) {
+  const { config } = payload;
+  const query = yield select(getQuerySettings);
+  const notificationManager = yield getContext(NOTIFICATION_MANAGER_CONTEXT);
+  try {
+    const url = createResourceUrl({ query, config });
+    console.log(url);
+    yield copyToClipboard(url);
+    yield notificationManager.showNotification({
+      type: 'success',
+      message: text.copyApiResourceUrl,
+      autoDismiss: true,
+    });
+  } catch (err) {
+    yield notificationManager.showNotification({
+      type: 'error',
+      message: text.copyApiResourceUrlError,
+      showDismissButton: true,
+      autoDismiss: false,
+    });
+  }
+}
+
 export function* appSaga() {
   yield takeLatest(APP_START, appStart);
   yield takeLatest(SHARE_QUERY_URL, shareQueryUrl);
@@ -432,5 +458,6 @@ export function* appSaga() {
   yield takeLatest(EXPORT_DATA_TO_CSV, exportDataToCsv);
   yield takeLatest(COPY_EMBEDDED_CODE, copyEmbeddedCode);
   yield takeLatest(DOWNLOAD_CODE_SNIPPET, downloadCodeSnippet);
+  yield takeLatest(COPY_API_RESOURCE_URL, copyApiResourceUrl);
   yield debounce(200, SCREEN_RESIZE, resizeBrowserScreen);
 }

lib/js/app/modules/app/text.json

@@ -5,5 +5,7 @@
   "downloadChartError": "download failed. Please try again later.",
   "downloadInProgress": "download in progress",
   "copyEmbeddedCode": "HTML code copied to clipboard",
-  "copyEmbeddedCodeError": "We were not able to copy HTML code. Try again later."
+  "copyEmbeddedCodeError": "We were not able to copy HTML code. Try again later.",
+  "copyApiResourceUrl": "API Resource copied to clipboard",
+  "copyApiResourceUrlError": "We were not able to copy API Resource. Try again later."
 }