Refine code

getredash · Dec 27, 2019 · f87b116 · f87b116
1 parent b200465
commit f87b116
Show file tree

Hide file tree

Showing 17 changed files with 34 additions and 55 deletions.
diff --git a/client/app/components/queries/ApiKeyDialog/index.jsx b/client/app/components/queries/ApiKeyDialog/index.jsx
@@ -1,4 +1,4 @@
-import { clone, extend } from "lodash";
+import { extend } from "lodash";
 import React, { useMemo, useState, useCallback } from "react";
 import PropTypes from "prop-types";
 import Modal from "antd/lib/modal";
@@ -22,7 +22,7 @@ function ApiKeyDialog({ dialog, ...props }) {
       .post(`api/queries/${query.id}/regenerate_api_key`)
       .success(data => {
         setUpdatingApiKey(false);
-        setQuery(extend(clone(query), { api_key: data.api_key }));
+        setQuery(extend(query.clone(), { api_key: data.api_key }));
       })
       .error(() => {
         setUpdatingApiKey(false);

diff --git a/client/app/pages/queries/QuerySource.jsx b/client/app/pages/queries/QuerySource.jsx
@@ -81,6 +81,8 @@ function QuerySource(props) {
   }, [query.name]);
 
   const updateQuery = useUpdateQuery(query, setQuery);
+  const updateQueryDescription = useUpdateQueryDescription(query, setQuery);
+  const formatQuery = useFormatQuery(query, dataSource ? dataSource.syntax : null, setQuery);
 
   const handleDataSourceChange = useCallback(
     dataSourceId => {
@@ -119,11 +121,8 @@ function QuerySource(props) {
   }, [query.data_source_id, queryFlags.isNew, dataSourcesLoaded, dataSources, handleDataSourceChange]);
 
   const openAddToDashboardDialog = useAddToDashboardDialog(query);
-
   const openEmbedDialog = useEmbedDialog(query);
-
   const editSchedule = useEditScheduleDialog(query, setQuery);
-
   const openAddNewParameterDialog = useAddNewParameterDialog(query, (newQuery, param) => {
     if (editorRef.current) {
       editorRef.current.paste(param.toQueryTextFragment());
@@ -137,11 +136,8 @@ function QuerySource(props) {
     setSelectedVisualization(visualization.id);
   });
   const editVisualization = useEditVisualizationDialog(query, queryResult, newQuery => setQuery(newQuery));
-
   const deleteVisualization = useDeleteVisualization(query, setQuery);
 
-  const formatQuery = useFormatQuery(query, dataSource ? dataSource.syntax : null, setQuery);
-
   const handleSchemaItemSelect = useCallback(schemaItem => {
     if (editorRef.current) {
       editorRef.current.paste(schemaItem);
@@ -167,8 +163,6 @@ function QuerySource(props) {
     }
   }, [canExecuteQuery, isDirty, selectedText, executeQuery, executeAdhocQuery]);
 
-  const updateQueryDescription = useUpdateQueryDescription(query, setQuery);
-
   return (
     <div className="query-page-wrapper">
       <div className="container">

diff --git a/client/app/pages/queries/components/QueryPageHeader.jsx b/client/app/pages/queries/components/QueryPageHeader.jsx
@@ -61,25 +61,15 @@ function createMenu(menu) {
 
 export default function QueryPageHeader({ query, dataSource, sourceMode, selectedVisualization, onChange }) {
   const queryFlags = useQueryFlags(query, dataSource);
-
   const updateName = useRenameQuery(query, onChange);
-
   const updateTags = useUpdateQueryTags(query, onChange);
-
   const archiveQuery = useArchiveQuery(query, onChange);
-
   const publishQuery = usePublishQuery(query, onChange);
-
   const unpublishQuery = useUnpublishQuery(query, onChange);
-
   const duplicateQuery = useDuplicateQuery(query);
-
   const openApiKeyDialog = useApiKeyDialog(query, onChange);
-
   const openPermissionsEditorDialog = usePermissionsEditorDialog(query);
 
-  const showPermissionsControl = clientConfig.showPermissionsControl;
-
   const moreActionsMenu = useMemo(
     () =>
       createMenu([
@@ -102,7 +92,8 @@ export default function QueryPageHeader({ query, dataSource, sourceMode, selecte
             onClick: archiveQuery,
           },
           managePermissions: {
-            isAvailable: !queryFlags.isNew && queryFlags.canEdit && !queryFlags.isArchived && showPermissionsControl,
+            isAvailable:
+              !queryFlags.isNew && queryFlags.canEdit && !queryFlags.isArchived && clientConfig.showPermissionsControl,
             title: "Manage Permissions",
             onClick: openPermissionsEditorDialog,
           },
@@ -120,15 +111,7 @@ export default function QueryPageHeader({ query, dataSource, sourceMode, selecte
           },
         },
       ]),
-    [
-      showPermissionsControl,
-      queryFlags,
-      archiveQuery,
-      unpublishQuery,
-      openApiKeyDialog,
-      openPermissionsEditorDialog,
-      duplicateQuery,
-    ]
+    [queryFlags, archiveQuery, unpublishQuery, openApiKeyDialog, openPermissionsEditorDialog, duplicateQuery]
   );
 
   return (

diff --git a/client/app/pages/queries/components/QueryVisualizationTabs.jsx b/client/app/pages/queries/components/QueryVisualizationTabs.jsx
@@ -7,7 +7,7 @@ import { VisualizationRenderer } from "@/visualizations/VisualizationRenderer";
 import Button from "antd/lib/button";
 import Modal from "antd/lib/modal";
 
-import "./query-visualization-tabs.less";
+import "./QueryVisualizationTabs.less";
 
 const { TabPane } = Tabs;
 

diff --git a/.../components/query-visualization-tabs.less → ...es/components/QueryVisualizationTabs.less b/.../components/query-visualization-tabs.less → ...es/components/QueryVisualizationTabs.less
diff --git a/client/app/pages/queries/hooks/useAddNewParameterDialog.js b/client/app/pages/queries/hooks/useAddNewParameterDialog.js
@@ -3,7 +3,7 @@ import { useCallback, useRef } from "react";
 import EditParameterSettingsDialog from "@/components/EditParameterSettingsDialog";
 
 export default function useAddNewParameterDialog(query, onParameterAdded) {
-  const onParameterAddedRef = useRef(null);
+  const onParameterAddedRef = useRef();
   onParameterAddedRef.current = isFunction(onParameterAdded) ? onParameterAdded : () => {};
 
   return useCallback(() => {

diff --git a/client/app/pages/queries/hooks/useApiKeyDialog.js b/client/app/pages/queries/hooks/useApiKeyDialog.js
@@ -3,7 +3,7 @@ import { useRef, useCallback } from "react";
 import ApiKeyDialog from "@/components/queries/ApiKeyDialog";
 
 export default function useApiKeyDialog(query, onChange) {
-  const onChangeRef = useRef(null);
+  const onChangeRef = useRef();
   onChangeRef.current = isFunction(onChange) ? onChange : () => {};
 
   return useCallback(() => {

diff --git a/client/app/pages/queries/hooks/useArchiveQuery.jsx b/client/app/pages/queries/hooks/useArchiveQuery.jsx
@@ -40,7 +40,7 @@ function doArchiveQuery(query) {
 }
 
 export default function useArchiveQuery(query, onChange) {
-  const onChangeRef = useRef(null);
+  const onChangeRef = useRef();
   onChangeRef.current = isFunction(onChange) ? onChange : () => {};
 
   return useCallback(() => {

diff --git a/client/app/pages/queries/hooks/useAutocompleteFlags.js b/client/app/pages/queries/hooks/useAutocompleteFlags.js
@@ -10,8 +10,5 @@ export default function useAutocompleteFlags(schema) {
     localOptions.set("liveAutocomplete", state);
   }, []);
 
-  return useMemo(
-    () => [isAvailable, isEnabled, toggleAutocomplete],
-    [isAvailable, isEnabled, toggleAutocomplete]
-  );
+  return useMemo(() => [isAvailable, isEnabled, toggleAutocomplete], [isAvailable, isEnabled, toggleAutocomplete]);
 }
diff --git a/client/app/pages/queries/hooks/useDeleteVisualization.js b/client/app/pages/queries/hooks/useDeleteVisualization.js
@@ -1,18 +1,18 @@
-import { clone, extend, filter, isFunction } from "lodash";
+import { extend, filter, isFunction } from "lodash";
 import { useRef, useCallback } from "react";
 import { Visualization } from "@/services/visualization";
 import notification from "@/services/notification";
 
 export default function useDeleteVisualization(query, onChange) {
-  const onChangeRef = useRef(null);
+  const onChangeRef = useRef();
   onChangeRef.current = isFunction(onChange) ? onChange : () => {};
 
   return useCallback(
     visualizationId =>
       Visualization.delete({ id: visualizationId })
         .$promise.then(() => {
           const filteredVisualizations = filter(query.visualizations, v => v.id !== visualizationId);
-          onChangeRef.current(extend(clone(query), { visualizations: filteredVisualizations }));
+          onChangeRef.current(extend(query.clone(), { visualizations: filteredVisualizations }));
         })
         .catch(() => {
           notification.error("Error deleting visualization.", "Maybe it's used in a dashboard?");

diff --git a/client/app/pages/queries/hooks/useDuplicateQuery.js b/client/app/pages/queries/hooks/useDuplicateQuery.js
@@ -15,7 +15,6 @@ export default function useDuplicateQuery(query) {
     Query.fork({ id: query.id }).$promise
       .then(newQuery => {
         tab.location = newQuery.getUrl(true);
-        return newQuery;
       });
   }, [query.id]);
 }
diff --git a/client/app/pages/queries/hooks/useEditVisualizationDialog.js b/client/app/pages/queries/hooks/useEditVisualizationDialog.js
@@ -3,7 +3,7 @@ import { useCallback, useRef } from "react";
 import EditVisualizationDialog from "@/visualizations/EditVisualizationDialog";
 
 export default function useEditVisualizationDialog(query, queryResult, onChange) {
-  const onChangeRef = useRef(null);
+  const onChangeRef = useRef();
   onChangeRef.current = isFunction(onChange) ? onChange : () => {};
 
   return useCallback(

diff --git a/client/app/pages/queries/hooks/useFormatQuery.js b/client/app/pages/queries/hooks/useFormatQuery.js
@@ -4,7 +4,7 @@ import { Query } from "@/services/query";
 import notification from "@/services/notification";
 
 export default function useFormatQuery(query, syntax, onChange) {
-  const onChangeRef = useRef(null);
+  const onChangeRef = useRef();
   onChangeRef.current = isFunction(onChange) ? onChange : () => {};
 
   return useCallback(() => {

diff --git a/client/app/pages/queries/hooks/useQueryFlags.js b/client/app/pages/queries/hooks/useQueryFlags.js
@@ -1,4 +1,4 @@
-import { isEmpty } from "lodash";
+import { isNil, isEmpty } from "lodash";
 import { useMemo } from "react";
 import { currentUser } from "@/services/auth";
 
@@ -8,7 +8,7 @@ export default function useQueryFlags(query, dataSource = null) {
   return useMemo(
     () => ({
       // state flags
-      isNew: query.isNew(),
+      isNew: isNil(query.id),
       isDraft: query.is_draft,
       isArchived: query.is_archived,
 

diff --git a/client/app/pages/queries/hooks/useUpdateQuery.jsx b/client/app/pages/queries/hooks/useUpdateQuery.jsx
@@ -73,7 +73,7 @@ function doSaveQuery(data, { canOverwrite = false } = {}) {
 }
 
 export default function useUpdateQuery(query, onChange) {
-  const onChangeRef = useRef(null);
+  const onChangeRef = useRef();
   onChangeRef.current = isFunction(onChange) ? onChange : () => {};
 
   return useCallback(

diff --git a/client/app/pages/queries/hooks/useUpdateQueryDescription.js b/client/app/pages/queries/hooks/useUpdateQueryDescription.js
@@ -5,8 +5,11 @@ import recordEvent from "@/services/recordEvent";
 export default function useUpdateQueryDescription(query, onChange) {
   const updateQuery = useUpdateQuery(query, onChange);
 
-  return useCallback(description => {
-    recordEvent("edit_description", "query", query.id);
-    updateQuery({ description });
-  }, [query.id, updateQuery]);
+  return useCallback(
+    description => {
+      recordEvent("edit_description", "query", query.id);
+      updateQuery({ description });
+    },
+    [query.id, updateQuery]
+  );
 }
diff --git a/client/app/pages/queries/hooks/useUpdateQueryTags.js b/client/app/pages/queries/hooks/useUpdateQueryTags.js
@@ -5,8 +5,11 @@ import recordEvent from "@/services/recordEvent";
 export default function useUpdateQueryTags(query, onChange) {
   const updateQuery = useUpdateQuery(query, onChange);
 
-  return useCallback(tags => {
-    recordEvent("edit_tags", "query", query.id);
-    updateQuery({ tags })
-  }, [query.id, updateQuery]);
+  return useCallback(
+    tags => {
+      recordEvent("edit_tags", "query", query.id);
+      updateQuery({ tags });
+    },
+    [query.id, updateQuery]
+  );
 }