feat: 🎸 save query

keen · Aug 13, 2020 · 77039c4 · 77039c4
1 parent 487c27d
commit 77039c4
Show file tree

Hide file tree

Showing 40 changed files with 872 additions and 318 deletions.
diff --git a/lib/js/app/components/App.tsx b/lib/js/app/components/App.tsx
@@ -31,12 +31,10 @@ import { AppState } from '../modules/types';
 
 import Browser from './Browser';
 import Editor from './Editor';
-import QuerySettings from './QuerySettings';
+import QuerySettingsModal from './QuerySettingsModal';
 import Confirm from './Confirm';
 
-import { QueryActions, SettingsContainer } from './App.styles';
-
-import { NEW_QUERY_EVENT, CACHE_AVAILABLE } from '../consts';
+import { NEW_QUERY_EVENT } from '../consts';
 
 const mapStateToProps = (state: AppState) => ({
   savedQuery: getSavedQuery(state),
@@ -90,6 +88,25 @@ class App extends Component {
     this.props.loadPersitedState();
   }
 
+  onSaveQuery = ({
+    displayName,
+    name,
+  }: {
+    displayName: string;
+    name: string;
+  }) => {
+    const body = {
+      query: this.state.query,
+      metadata: {
+        displayName,
+        widget: this.props.widget,
+      },
+      refreshRate: 0,
+    };
+
+    this.props.saveQuery(name, body);
+  };
+
   render() {
     return (
       <div>
@@ -113,38 +130,24 @@ class App extends Component {
             <Editor
               query={this.state.query}
               onRunQuery={() => this.props.runQuery(this.state.query)}
+              onSaveQuery={() => {
+                const { displayName, name } = this.props.savedQuery;
+                this.onSaveQuery({
+                  displayName,
+                  name,
+                });
+              }}
               onUpdateQuery={(query) => {
                 console.log(query, '--- query update');
                 this.setState({ query });
               }}
             />
-            <div>
-              <QueryActions>
-                <SettingsContainer>
-                  <QuerySettings
-                    cacheAvailable={CACHE_AVAILABLE.includes(
-                      this.state.query.analysis_type
-                    )}
-                    onDelete={(queryName) => this.props.deleteQuery(queryName)}
-                    onSave={(name, refreshRate) => {
-                      const body = {
-                        query: this.state.query,
-                        metadata: {
-                          displayName: name,
-                          widget: this.props.widget,
-                        },
-                        refreshRate: refreshRate * 60 * 60,
-                      };
-
-                      this.props.saveQuery(name, body);
-                    }}
-                  />
-                </SettingsContainer>
-              </QueryActions>
-            </div>
           </div>
         )}
         <Confirm />
+        <QuerySettingsModal
+          onSaveQuery={(settings) => this.onSaveQuery(settings)}
+        />
       </div>
     );
   }

diff --git a/lib/js/app/components/Editor/Editor.tsx b/lib/js/app/components/Editor/Editor.tsx
@@ -26,17 +26,24 @@ type Props = {
   onUpdateQuery: (query: Record<string, any>) => void;
   /** Run query event handler */
   onRunQuery: () => void;
+  /** Save query event handler */
+  onSaveQuery: () => void;
 };
 
-const Editor: FC<Props> = ({ query, onRunQuery, onUpdateQuery }) => {
+const Editor: FC<Props> = ({
+  query,
+  onRunQuery,
+  onSaveQuery,
+  onUpdateQuery,
+}) => {
   const dispatch = useDispatch();
   const queryResults = useSelector(getQueryResults);
   const runQueryError = useSelector(getError);
   const isQueryLoading = useSelector(getQueryPerformState);
 
   return (
     <div>
-      <EditorNavigation query={query} />
+      <EditorNavigation onSaveQuery={onSaveQuery} />
       <Button
         onClick={() => {
           dispatch(setViewMode('browser'));

diff --git a/lib/js/app/components/EditorNavigation/EditorNavigation.styles.ts b/lib/js/app/components/EditorNavigation/EditorNavigation.styles.ts
@@ -1,12 +1,21 @@
 import styled from 'styled-components';
+import { colors } from '@keen.io/colors';
 
 export const Container = styled.div`
   display: flex;
+  align-items: center;
   justify-content: space-between;
   background: #f1f5f8;
   padding: 10px 20px;
 `;
 
+export const QueryName = styled.div`
+  font-size: 20px;
+  lineh-height: 24px;
+  font-family: 'Gangster Grotesk Bold', sans-serif;
+  color: ${colors.blue[500]};
+`;
+
 export const MenuItem = styled.div``;
 
 export const Menu = styled.div`

diff --git a/lib/js/app/components/EditorNavigation/EditorNavigation.tsx b/lib/js/app/components/EditorNavigation/EditorNavigation.tsx
@@ -1,56 +1,62 @@
 import React, { FC } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
-import { getPubSub } from '@keen.io/pubsub';
-import { Button } from '@keen.io/ui-core';
+import { Button, FadeLoader } from '@keen.io/ui-core';
 
-import { Container, Menu, MenuItem } from './EditorNavigation.styles';
+import {
+  Container,
+  QueryName,
+  Menu,
+  MenuItem,
+} from './EditorNavigation.styles';
 import text from './text.json';
 
-import ShareQuery from '../ShareQuery';
-import APIResource from '../APIResource';
 import { getSavedQuery } from '../../modules/savedQuery';
-import { copyShareUrl } from '../../modules/app';
-
-import { copyToClipboard } from '../../utils';
-
-import { NEW_QUERY_EVENT } from '../../queryCreator';
+import { getQueriesSaving } from '../../modules/queries';
+import {
+  showQuerySettingsModal,
+  getQuerySettingsModalVisibility,
+} from '../../modules/app';
 
 type Props = {
-  /** Query definition */
-  query: Record<string, any>;
+  /** Save query event handler*/
+  onSaveQuery: () => void;
 };
 
-const EditorNavigation: FC<Props> = ({ query }) => {
+const EditorNavigation: FC<Props> = ({ onSaveQuery }) => {
   const dispatch = useDispatch();
-  const savedQuery = useSelector(getSavedQuery);
+  const { exists, displayName } = useSelector(getSavedQuery);
+  const isSavingQuery = useSelector(getQueriesSaving);
+  const isModalVisible = useSelector(getQuerySettingsModalVisibility);
 
   return (
     <Container>
-      <div>test</div>
+      <QueryName>{displayName ? displayName : text.newQueryTitle}</QueryName>
       <Menu>
+        {exists && (
+          <MenuItem>
+            <span onClick={() => dispatch(showQuerySettingsModal())}>
+              Settings
+            </span>
+          </MenuItem>
+        )}
         <MenuItem>
           <Button
-            style="outline"
-            variant="success"
+            data-testid="save-query"
+            variant="secondary"
+            style="solid"
+            isDisabled={isSavingQuery}
             onClick={() => {
-              const pubsub = getPubSub();
-              pubsub.publish(NEW_QUERY_EVENT);
+              if (!exists) {
+                dispatch(showQuerySettingsModal());
+              } else {
+                onSaveQuery();
+              }
             }}
+            icon={isSavingQuery && !isModalVisible && <FadeLoader />}
           >
-            {text.newQueryButton}
+            {text.saveQuery}
           </Button>
         </MenuItem>
-        <MenuItem>
-          <APIResource
-            onClick={(resourceUrl) => copyToClipboard(resourceUrl)}
-            query={query}
-          />
-        </MenuItem>
-        <MenuItem>
-          <ShareQuery
-            onClick={() => dispatch(copyShareUrl(query, savedQuery))}
-          />
-        </MenuItem>
       </Menu>
     </Container>
   );

diff --git a/lib/js/app/components/EditorNavigation/text.json b/lib/js/app/components/EditorNavigation/text.json
@@ -1,3 +1,5 @@
 {
-  "newQueryButton": "New Query"
+  "newQueryButton": "New Query",
+  "newQueryTitle": "New Query",
+  "saveQuery": "Save Query"
 }
diff --git a/lib/js/app/components/QuerySettings/QuerySettings.styles.ts b/lib/js/app/components/QuerySettings/QuerySettings.styles.ts
@@ -1,50 +1,31 @@
 import styled from 'styled-components';
-import { transparentize } from 'polished';
 import { colors } from '@keen.io/colors';
 
-export const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-`;
-
-export const Title = styled.div`
-  font-size: 16px;
-  font-family: 'Lato Bold', sans-serif;
-  color: ${colors.black['500']};
-  margin-bottom: 20px;
-`;
-
 export const Settings = styled.div`
-  padding: 15px 20px;
-  border-top: solid 1px ${colors.gray['500']};
-  border-bottom: solid 1px ${colors.gray['500']};
+  padding: 25px;
+  width: 350px;
 `;
 
-export const QueryName = styled.div`
+export const FooterContent = styled.div`
   display: flex;
   align-items: center;
-  margin-bottom: 20px;
 `;
 
-export const ResourceName = styled.div`
-  cursor: pointer;
-  margin-bottom: 20px;
+export const LabelContainer = styled.div`
+  margin-bottom: 3px;
 `;
 
-export const ResourceMessage = styled.span`
-  color: ${transparentize(0.5, colors.black['500'])};
-`;
-
-export const InputContainer = styled.div`
-  margin: 0 10px;
-  width: 400px;
-`;
-
-export const Actions = styled.div`
+export const Cancel = styled.div`
+  margin-left: 20px;
   display: flex;
-  margin-top: 15px;
+  align-items: center;
+  cursor: pointer;
+`;
 
-  button + button {
-    margin-left: 10px;
-  }
+export const NewQueryNotice = styled.div`
+  margin-bottom: 20px;
+  color: ${colors.black[100]};
+  font-size: 14px;
+  line-height: 17px;
+  font-family: 'Lato Regular', sans-serif;
 `;