Sync with original Master

client/app/components/TagsList.less

@@ -1,15 +1,47 @@
-@import '~@/assets/less/ant';
+@import "~@/assets/less/ant";
 
 .tags-list {
+  .tags-list-title {
+    margin: 15px 5px 5px 5px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    label {
+      display: block;
+      white-space: nowrap;
+      margin: 0;
+    }
+
+    a {
+      display: block;
+      white-space: nowrap;
+      cursor: pointer;
+
+      .anticon {
+        font-size: 75%;
+        margin-right: 2px;
+      }
+    }
+  }
+
   .ant-badge-count {
     background-color: fade(@redash-gray, 10%);
     color: fade(@redash-gray, 75%);
   }
 
-  .ant-menu-item-selected {
-    .ant-badge-count {
-      background-color: @primary-color;
-      color: white;
+  .ant-menu.ant-menu-inline {
+    border: none;
+
+    .ant-menu-item {
+      width: 100%;
+    }
+
+    .ant-menu-item-selected {
+      .ant-badge-count {
+        background-color: @primary-color;
+        color: white;
+      }
     }
   }
-}
+}

client/app/components/TagsList.tsx

@@ -0,0 +1,107 @@
+import { map, includes, difference } from "lodash";
+import React, { useState, useCallback, useEffect } from "react";
+import Badge from "antd/lib/badge";
+import Menu from "antd/lib/menu";
+import CloseOutlinedIcon from "@ant-design/icons/CloseOutlined";
+import getTags from "@/services/getTags";
+
+import "./TagsList.less";
+
+type Tag = {
+  name: string;
+  count?: number;
+};
+
+type TagsListProps = {
+  tagsUrl: string;
+  showUnselectAll: boolean;
+  onUpdate?: (selectedTags: string[]) => void;
+};
+
+function TagsList({ tagsUrl, showUnselectAll = false, onUpdate }: TagsListProps): JSX.Element | null {
+  const [allTags, setAllTags] = useState<Tag[]>([]);
+  const [selectedTags, setSelectedTags] = useState<string[]>([]);
+
+  useEffect(() => {
+    let isCancelled = false;
+
+    getTags(tagsUrl).then(tags => {
+      if (!isCancelled) {
+        setAllTags(tags);
+      }
+    });
+
+    return () => {
+      isCancelled = true;
+    };
+  }, [tagsUrl]);
+
+  const toggleTag = useCallback(
+    (event, tag) => {
+      let newSelectedTags;
+      if (event.shiftKey) {
+        // toggle tag
+        if (includes(selectedTags, tag)) {
+          newSelectedTags = difference(selectedTags, [tag]);
+        } else {
+          newSelectedTags = [...selectedTags, tag];
+        }
+      } else {
+        // if the tag is the only selected, deselect it, otherwise select only it
+        if (includes(selectedTags, tag) && selectedTags.length === 1) {
+          newSelectedTags = [];
+        } else {
+          newSelectedTags = [tag];
+        }
+      }
+
+      setSelectedTags(newSelectedTags);
+      if (onUpdate) {
+        onUpdate([...newSelectedTags]);
+      }
+    },
+    [selectedTags, onUpdate]
+  );
+
+  const unselectAll = useCallback(() => {
+    setSelectedTags([]);
+    if (onUpdate) {
+      onUpdate([]);
+    }
+  }, [onUpdate]);
+
+  if (allTags.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="tags-list">
+      <div className="tags-list-title">
+        <label>Tags</label>
+        {showUnselectAll && selectedTags.length > 0 && (
+          <a onClick={unselectAll}>
+            <CloseOutlinedIcon />
+            clear selection
+          </a>
+        )}
+      </div>
+
+      <div className="tiled">
+        <Menu className="invert-stripe-position" mode="inline" selectedKeys={selectedTags}>
+          {map(allTags, tag => (
+            <Menu.Item key={tag.name} className="m-0">
+              <a
+                className="d-flex align-items-center justify-content-between"
+                onClick={event => toggleTag(event, tag.name)}>
+                <span className="max-character col-xs-11">{tag.name}</span>
+                <Badge count={tag.count} />
+              </a>
+            </Menu.Item>
+          ))}
+        </Menu>
+      </div>
+    </div>
+  );
+}
+
+export default TagsList;

client/app/components/items-list/components/Sidebar.jsx

@@ -132,18 +132,20 @@ ProfileImage.propTypes = {
     Tags
  */
 
-export function Tags({ url, onChange }) {
+export function Tags({ url, onChange, showUnselectAll }) {
   if (url === "") {
     return null;
   }
   return (
     <div className="m-b-10">
-      <TagsList tagsUrl={url} onUpdate={onChange} />
+      <TagsList tagsUrl={url} onUpdate={onChange} showUnselectAll={showUnselectAll} />
     </div>
   );
 }
 
 Tags.propTypes = {
   url: PropTypes.string.isRequired,
   onChange: PropTypes.func.isRequired,
+  showUnselectAll: PropTypes.bool,
+  unselectAllButtonTitle: PropTypes.string,
 };

client/app/components/visualizations/visualizationComponents.jsx

@@ -6,6 +6,7 @@ import { Renderer as VisRenderer, Editor as VisEditor, updateVisualizationsSetti
 import { clientConfig } from "@/services/auth";
 
 import countriesDataUrl from "@redash/viz/lib/visualizations/choropleth/maps/countries.geo.json";
+import usaDataUrl from "@redash/viz/lib/visualizations/choropleth/maps/usa-albers.geo.json";
 import subdivJapanDataUrl from "@redash/viz/lib/visualizations/choropleth/maps/japan.prefectures.geo.json";
 
 function wrapComponentWithSettings(WrappedComponent) {
@@ -17,10 +18,40 @@ function wrapComponentWithSettings(WrappedComponent) {
         countries: {
           name: "Countries",
           url: countriesDataUrl,
+          fieldNames: {
+            name: "Short name",
+            name_long: "Full name",
+            abbrev: "Abbreviated name",
+            iso_a2: "ISO code (2 letters)",
+            iso_a3: "ISO code (3 letters)",
+            iso_n3: "ISO code (3 digits)",
+          },
+        },
+        usa: {
+          name: "USA",
+          url: usaDataUrl,
+          fieldNames: {
+            name: "Name",
+            ns_code: "National Standard ANSI Code (8-character)",
+            geoid: "Geographic ID",
+            usps_abbrev: "USPS Abbreviation",
+            fips_code: "FIPS Code (2-character)",
+          },
         },
         subdiv_japan: {
           name: "Japan/Prefectures",
           url: subdivJapanDataUrl,
+          fieldNames: {
+            name: "Name",
+            name_alt: "Name (alternative)",
+            name_local: "Name (local)",
+            iso_3166_2: "ISO-3166-2",
+            postal: "Postal Code",
+            type: "Type",
+            type_en: "Type (EN)",
+            region: "Region",
+            region_code: "Region Code",
+          },
         },
       },
       ...pick(clientConfig, [

client/app/pages/dashboards/DashboardList.jsx

@@ -95,7 +95,7 @@ class DashboardList extends React.Component {
                 onChange={controller.updateSearch}
               />
               <Sidebar.Menu items={this.sidebarMenu} selected={controller.params.currentPage} />
-              <Sidebar.Tags url="api/dashboards/tags" onChange={controller.updateSelectedTags} />
+              <Sidebar.Tags url="api/dashboards/tags" onChange={controller.updateSelectedTags} showUnselectAll />
             </Layout.Sidebar>
             <Layout.Content>
               <div data-test="DashboardLayoutContent">

client/app/pages/queries-list/QueriesList.jsx

@@ -134,7 +134,7 @@ class QueriesList extends React.Component {
                 onChange={controller.updateSearch}
               />
               <Sidebar.Menu items={this.sidebarMenu} selected={controller.params.currentPage} />
-              <Sidebar.Tags url="api/queries/tags" onChange={controller.updateSelectedTags} />
+              <Sidebar.Tags url="api/queries/tags" onChange={controller.updateSelectedTags} showUnselectAll />
             </Layout.Sidebar>
             <Layout.Content>
               {controller.isLoaded && controller.isEmpty ? (

client/app/pages/queries/hooks/useDuplicateQuery.js

@@ -1,7 +1,20 @@
-import { noop } from "lodash";
+import { noop, extend, pick } from "lodash";
 import { useCallback, useState } from "react";
+import url from "url";
+import qs from "query-string";
 import { Query } from "@/services/query";
 
+function keepCurrentUrlParams(targetUrl) {
+  const currentUrlParams = qs.parse(window.location.search);
+  targetUrl = url.parse(targetUrl);
+  const targetUrlParams = qs.parse(targetUrl.search);
+  return url.format(
+    extend(pick(targetUrl, ["protocol", "auth", "host", "pathname", "hash"]), {
+      search: qs.stringify(extend(currentUrlParams, targetUrlParams)),
+    })
+  );
+}
+
 export default function useDuplicateQuery(query) {
   const [isDuplicating, setIsDuplicating] = useState(false);
 
@@ -16,7 +29,7 @@ export default function useDuplicateQuery(query) {
     setIsDuplicating(true);
     Query.fork({ id: query.id })
       .then(newQuery => {
-        tab.location = newQuery.getUrl(true);
+        tab.location = keepCurrentUrlParams(newQuery.getUrl(true));
       })
       .finally(() => {
         setIsDuplicating(false);

client/app/services/auth.js

@@ -2,6 +2,7 @@ import debug from "debug";
 import { includes, extend } from "lodash";
 import location from "@/services/location";
 import { axios } from "@/services/axios";
+import { notifySessionRestored } from "@/services/restoreSession";
 
 export const currentUser = {
   canEdit(object) {
@@ -46,6 +47,9 @@ export const Auth = {
   isAuthenticated() {
     return session.loaded && session.user.id;
   },
+  getLoginUrl() {
+    return AuthUrls.Login;
+  },
   setLoginUrl(loginUrl) {
     AuthUrls.Login = loginUrl;
   },
@@ -94,6 +98,7 @@ export const Auth = {
       .then(() => {
         if (Auth.isAuthenticated()) {
           logger("Loaded session");
+          notifySessionRestored();
           return session;
         }
         logger("Need to login, redirecting");