Fix there's no publish button on mobile query page (#4760)

getredash · Mar 30, 2020 · e3745f8 · e3745f8
1 parent 3f66990
commit e3745f8
Showing 1 changed file with 20 additions and 7 deletions.
diff --git a/client/app/pages/queries/components/QueryPageHeader.jsx b/client/app/pages/queries/components/QueryPageHeader.jsx
@@ -5,6 +5,7 @@ import Button from "antd/lib/button";
 import Dropdown from "antd/lib/dropdown";
 import Menu from "antd/lib/menu";
 import Icon from "antd/lib/icon";
+import useMedia from "use-media";
 import EditInPlace from "@/components/EditInPlace";
 import FavoritesControl from "@/components/FavoritesControl";
 import { QueryTagsControl } from "@/components/tags-control/TagsControl";
@@ -68,8 +69,8 @@ export default function QueryPageHeader({
   headerExtra,
   tagsExtra,
   onChange,
-  onRefresh,
 }) {
+  const isDesktop = useMedia({ minWidth: 768 });
   const queryFlags = useQueryFlags(query, dataSource);
   const updateName = useRenameQuery(query, onChange);
   const updateTags = useUpdateQueryTags(query, onChange);
@@ -107,6 +108,12 @@ export default function QueryPageHeader({
             title: "Manage Permissions",
             onClick: openPermissionsEditorDialog,
           },
+          publish: {
+            isAvailable:
+              !isDesktop && queryFlags.isDraft && !queryFlags.isArchived && !queryFlags.isNew && queryFlags.canEdit,
+            title: "Publish",
+            onClick: publishQuery,
+          },
           unpublish: {
             isAvailable: !queryFlags.isNew && queryFlags.canEdit && !queryFlags.isDraft,
             title: "Unpublish",
@@ -122,13 +129,19 @@ export default function QueryPageHeader({
         },
       ]),
     [
-      queryFlags,
+      queryFlags.isNew,
+      queryFlags.canFork,
+      queryFlags.canEdit,
+      queryFlags.isArchived,
+      queryFlags.isDraft,
+      isDuplicating,
+      duplicateQuery,
       archiveQuery,
+      openPermissionsEditorDialog,
+      isDesktop,
+      publishQuery,
       unpublishQuery,
       openApiKeyDialog,
-      openPermissionsEditorDialog,
-      isDuplicating,
-      duplicateQuery,
     ]
   );
 
@@ -157,8 +170,8 @@ export default function QueryPageHeader({
       </div>
       <div className="header-actions">
         {headerExtra}
-        {queryFlags.isDraft && !queryFlags.isArchived && !queryFlags.isNew && queryFlags.canEdit && (
-          <Button className="hidden-xs m-r-5" onClick={publishQuery}>
+        {isDesktop && queryFlags.isDraft && !queryFlags.isArchived && !queryFlags.isNew && queryFlags.canEdit && (
+          <Button className="m-r-5" onClick={publishQuery}>
             <i className="fa fa-paper-plane m-r-5" /> Publish
           </Button>
         )}