From e3e03d202db959d708acbfe8a25a50dddc85fa7f Mon Sep 17 00:00:00 2001
From: John Bodley <4567245+john-bodley@users.noreply.github.com>
Date: Tue, 15 Mar 2022 06:29:18 +1300
Subject: [PATCH 01/17] chore: Deprecate Python 3.7 (#19017)

* chore: Deprecate Python 3.7 and add support for Python 3.10

* Update local-backend.mdx

* Update UPDATING.md

Co-authored-by: John Bodley <john.bodley@airbnb.com>
---
 Makefile                                 | 6 +++---
 UPDATING.md                              | 1 +
 docs/docs/contributing/local-backend.mdx | 2 +-
 setup.py                                 | 3 +--
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/Makefile b/Makefile
index 47d0f5b55824a..8dc7ffa8f569e 100644
--- a/Makefile
+++ b/Makefile
@@ -15,8 +15,8 @@
 # limitations under the License.
 #
 
-# Python version installed; we need 3.7-3.9
-PYTHON=`command -v python3.9 || command -v python3.8 || command -v python3.7`
+# Python version installed; we need 3.8-3.9
+PYTHON=`command -v python3.9 || command -v python3.8`
 
 .PHONY: install superset venv pre-commit
 
@@ -70,7 +70,7 @@ update-js:
 
 venv:
 	# Create a virtual environment and activate it (recommended)
-	if ! [ -x "${PYTHON}" ]; then echo "You need Python 3.7, 3.8 or 3.9 installed"; exit 1; fi
+	if ! [ -x "${PYTHON}" ]; then echo "You need Python 3.8 or 3.9 installed"; exit 1; fi
 	test -d venv || ${PYTHON} -m venv venv # setup a python3 virtualenv
 	. venv/bin/activate
 
diff --git a/UPDATING.md b/UPDATING.md
index 977a63ac54b16..ea9f02094a52c 100644
--- a/UPDATING.md
+++ b/UPDATING.md
@@ -36,6 +36,7 @@ assists people when migrating to a new version.
 - [17539](https://github.com/apache/superset/pull/17539): all Superset CLI commands (init, load_examples and etc) require setting the FLASK_APP environment variable (which is set by default when `.flaskenv` is loaded)
 - [18970](https://github.com/apache/superset/pull/18970): Changes feature
 flag for the legacy datasource editor (DISABLE_LEGACY_DATASOURCE_EDITOR) in config.py to True, thus disabling the feature from being shown in the client.
+- [19017](https://github.com/apache/superset/pull/19017): Removes Python 3.7 support.
 
 ### Potential Downtime
 
diff --git a/docs/docs/contributing/local-backend.mdx b/docs/docs/contributing/local-backend.mdx
index 7c03c0dc50db4..1da5b8b3e1ba4 100644
--- a/docs/docs/contributing/local-backend.mdx
+++ b/docs/docs/contributing/local-backend.mdx
@@ -12,7 +12,7 @@ version: 1
 Make sure your machine meets the [OS dependencies](https://superset.apache.org/docs/installation/installing-superset-from-scratch#os-dependencies) before following these steps.
 You also need to install MySQL or [MariaDB](https://mariadb.com/downloads).
 
-Ensure that you are using Python version 3.7 or 3.8, then proceed with:
+Ensure that you are using Python version 3.8 or 3.9, then proceed with:
 
 ````bash
 # Create a virtual environment and activate it (recommended)
diff --git a/setup.py b/setup.py
index 9899daf4009fa..b091cef5fa8e3 100644
--- a/setup.py
+++ b/setup.py
@@ -167,13 +167,12 @@ def get_git_sha() -> str:
         "vertica": ["sqlalchemy-vertica-python>=0.5.9, < 0.6"],
         "netezza": ["nzalchemy>=11.0.2"],
     },
-    python_requires="~=3.7",
+    python_requires="~=3.8",
     author="Apache Software Foundation",
     author_email="dev@superset.apache.org",
     url="https://superset.apache.org/",
     download_url="https://www.apache.org/dist/superset/" + version_string,
     classifiers=[
-        "Programming Language :: Python :: 3.7",
         "Programming Language :: Python :: 3.8",
         "Programming Language :: Python :: 3.9",
     ],

From 981f09b5db77fc2348a508da49cdddf1fcfcb3c6 Mon Sep 17 00:00:00 2001
From: Jinghuayao <81597121+jinghua-qa@users.noreply.github.com>
Date: Tue, 15 Mar 2022 08:16:06 -0700
Subject: [PATCH 02/17] test(native filter): add new native filter test
 (#19115)

* add new native filter test
---
 .../dashboard/nativeFilters.test.ts           | 36 +++++++++++++++++++
 1 file changed, 36 insertions(+)

diff --git a/superset-frontend/cypress-base/cypress/integration/dashboard/nativeFilters.test.ts b/superset-frontend/cypress-base/cypress/integration/dashboard/nativeFilters.test.ts
index e0eccfa520150..433b4a65e33cb 100644
--- a/superset-frontend/cypress-base/cypress/integration/dashboard/nativeFilters.test.ts
+++ b/superset-frontend/cypress-base/cypress/integration/dashboard/nativeFilters.test.ts
@@ -529,6 +529,42 @@ describe('Nativefilters Sanity test', () => {
       .contains('year')
       .should('be.visible');
   });
+  it('User can create a value filter', () => {
+    cy.get(nativeFilters.filterFromDashboardView.expand).click({ force: true });
+    cy.get(nativeFilters.filterFromDashboardView.createFilterButton)
+      .should('be.visible')
+      .click();
+    cy.get(nativeFilters.modal.container).should('be.visible');
+    cy.get('body').type('{home}');
+
+    cy.get(nativeFilters.filtersPanel.filterTypeInput)
+      .click({ scrollBehavior: false })
+      .type('{home}Value{enter}', { scrollBehavior: false });
+    cy.get(nativeFilters.filtersPanel.filterTypeInput)
+      .find(nativeFilters.filtersPanel.filterTypeItem)
+      .should('have.text', 'Value');
+    cy.get(nativeFilters.modal.container)
+      .find(nativeFilters.filtersPanel.filterName)
+      .click({ scrollBehavior: false })
+      .clear()
+      .type('country_name', { scrollBehavior: false });
+
+    cy.get(nativeFilters.silentLoading).should('not.exist');
+    cy.get(nativeFilters.filtersPanel.filterInfoInput)
+      .last()
+      .should('be.visible')
+      .click({ force: true });
+    cy.get(nativeFilters.filtersPanel.filterInfoInput)
+      .last()
+      .type('country_name {enter}');
+    cy.get(nativeFilters.modal.footer)
+      .find(nativeFilters.modal.saveButton)
+      .should('be.visible')
+      .click({ force: true });
+    cy.get(nativeFilters.filterFromDashboardView.filterName)
+      .should('be.visible', { timeout: 40000 })
+      .contains('country_name');
+  });
 });
 
 xdescribe('Nativefilters', () => {

From 74910f99d8e1fe0c054780848927b4b54554cec9 Mon Sep 17 00:00:00 2001
From: Diego Medina <diegomedina24@gmail.com>
Date: Wed, 16 Mar 2022 01:01:21 -0400
Subject: [PATCH 03/17] fix(dashboard): scrolling table viz overlaps next chart
 (#19121)

---
 .../components/gridComponents/Chart.jsx       | 20 +++++++++++++++----
 .../components/gridComponents/Chart.test.jsx  |  8 ++++++++
 2 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/superset-frontend/src/dashboard/components/gridComponents/Chart.jsx b/superset-frontend/src/dashboard/components/gridComponents/Chart.jsx
index 7e7c8c5222980..239bb508deb06 100644
--- a/superset-frontend/src/dashboard/components/gridComponents/Chart.jsx
+++ b/superset-frontend/src/dashboard/components/gridComponents/Chart.jsx
@@ -128,6 +128,8 @@ export default class Chart extends React.Component {
     this.resize = this.resize.bind(this);
     this.setDescriptionRef = this.setDescriptionRef.bind(this);
     this.setHeaderRef = this.setHeaderRef.bind(this);
+    this.getChartHeight = this.getChartHeight.bind(this);
+    this.getDescriptionHeight = this.getDescriptionHeight.bind(this);
   }
 
   shouldComponentUpdate(nextProps, nextState) {
@@ -178,21 +180,31 @@ export default class Chart extends React.Component {
     return this.props.cacheBusterProp !== nextProps.cacheBusterProp;
   }
 
+  componentDidMount() {
+    if (this.props.isExpanded) {
+      const descriptionHeight = this.getDescriptionHeight();
+      this.setState({ descriptionHeight });
+    }
+  }
+
   componentWillUnmount() {
     clearTimeout(this.resizeTimeout);
   }
 
   componentDidUpdate(prevProps) {
     if (this.props.isExpanded !== prevProps.isExpanded) {
-      const descriptionHeight =
-        this.props.isExpanded && this.descriptionRef
-          ? this.descriptionRef.offsetHeight
-          : 0;
+      const descriptionHeight = this.getDescriptionHeight();
       // eslint-disable-next-line react/no-did-update-set-state
       this.setState({ descriptionHeight });
     }
   }
 
+  getDescriptionHeight() {
+    return this.props.isExpanded && this.descriptionRef
+      ? this.descriptionRef.offsetHeight
+      : 0;
+  }
+
   getChartHeight() {
     const headerHeight = this.getHeaderHeight();
     return this.state.height - headerHeight - this.state.descriptionHeight;
diff --git a/superset-frontend/src/dashboard/components/gridComponents/Chart.test.jsx b/superset-frontend/src/dashboard/components/gridComponents/Chart.test.jsx
index 153838271ad2e..59cbce2090354 100644
--- a/superset-frontend/src/dashboard/components/gridComponents/Chart.test.jsx
+++ b/superset-frontend/src/dashboard/components/gridComponents/Chart.test.jsx
@@ -93,6 +93,14 @@ describe('Chart', () => {
     expect(wrapper.find('.slice_description')).toExist();
   });
 
+  it('should calculate the description height if it has one and isExpanded=true', () => {
+    const spy = jest.spyOn(Chart.prototype, 'getDescriptionHeight');
+    const wrapper = setup({ isExpanded: true });
+
+    expect(wrapper.find('.slice_description')).toExist();
+    expect(spy).toHaveBeenCalled();
+  });
+
   it('should call refreshChart when SliceHeader calls forceRefresh', () => {
     const refreshChart = sinon.spy();
     const wrapper = setup({ refreshChart });

From 8e7af79aa9eadafe5def8dd7bac593f0b5f55776 Mon Sep 17 00:00:00 2001
From: smileydev <47900232+prosdev0107@users.noreply.github.com>
Date: Wed, 16 Mar 2022 01:09:56 -0400
Subject: [PATCH 04/17] fix(dbs-dropdown): make to allow the search in
 supported db dropdown (#19125)

---
 .../src/views/CRUD/data/database/DatabaseModal/index.tsx         | 1 +
 1 file changed, 1 insertion(+)

diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx
index 813ace469c160..81ae065b23de7 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx
@@ -688,6 +688,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
         className="available-select"
         onChange={setDatabaseModel}
         placeholder={t('Choose a database...')}
+        showSearch
       >
         {[...(availableDbs?.databases || [])]
           ?.sort((a: DatabaseForm, b: DatabaseForm) =>

From 30c97ad5bfe1dc9b074efc294c647c32fdd05fe0 Mon Sep 17 00:00:00 2001
From: smileydev <47900232+prosdev0107@users.noreply.github.com>
Date: Wed, 16 Mar 2022 01:10:55 -0400
Subject: [PATCH 05/17] fix(dashboard-css): make to stay custom css when reload
 (#19084)

* fix(dashboard-css): make to stay custome css when reload

* fix(dashboard-css): make to add injectCustomCSS into HeaderActionsDropdown.test.tsx
---
 .../HeaderActionsDropdown/HeaderActionsDropdown.test.tsx       | 3 +++
 .../components/Header/HeaderActionsDropdown/index.jsx          | 2 --
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/superset-frontend/src/dashboard/components/Header/HeaderActionsDropdown/HeaderActionsDropdown.test.tsx b/superset-frontend/src/dashboard/components/Header/HeaderActionsDropdown/HeaderActionsDropdown.test.tsx
index 8779f8ef2f064..8996645079472 100644
--- a/superset-frontend/src/dashboard/components/Header/HeaderActionsDropdown/HeaderActionsDropdown.test.tsx
+++ b/superset-frontend/src/dashboard/components/Header/HeaderActionsDropdown/HeaderActionsDropdown.test.tsx
@@ -21,6 +21,7 @@ import { render, screen } from 'spec/helpers/testing-library';
 import userEvent from '@testing-library/user-event';
 import fetchMock from 'fetch-mock';
 import { HeaderDropdownProps } from 'src/dashboard/components/Header/types';
+import injectCustomCss from 'src/dashboard/util/injectCustomCss';
 import HeaderActionsDropdown from '.';
 
 const createProps = () => ({
@@ -180,7 +181,9 @@ test('should NOT render the "Refresh dashboard" menu item as disabled', async ()
 
 test('should render with custom css', () => {
   const mockedProps = createProps();
+  const { customCss } = mockedProps;
   render(setup(mockedProps));
+  injectCustomCss(customCss);
   expect(screen.getByRole('button')).toHaveStyle('margin-left: 100px');
 });
 
diff --git a/superset-frontend/src/dashboard/components/Header/HeaderActionsDropdown/index.jsx b/superset-frontend/src/dashboard/components/Header/HeaderActionsDropdown/index.jsx
index b86af3da8a89d..b7d368ec32db2 100644
--- a/superset-frontend/src/dashboard/components/Header/HeaderActionsDropdown/index.jsx
+++ b/superset-frontend/src/dashboard/components/Header/HeaderActionsDropdown/index.jsx
@@ -117,8 +117,6 @@ class HeaderActionsDropdown extends React.PureComponent {
   }
 
   UNSAFE_componentWillMount() {
-    injectCustomCss(this.state.css);
-
     SupersetClient.get({ endpoint: '/csstemplateasyncmodelview/api/read' })
       .then(({ json }) => {
         const cssTemplates = json.result.map(row => ({

From 3d66912d89851f03c38803b29128a45d66b34cb6 Mon Sep 17 00:00:00 2001
From: David Aaron Suddjian <1858430+suddjian@users.noreply.github.com>
Date: Wed, 16 Mar 2022 09:59:56 -0700
Subject: [PATCH 06/17] fix: clean up chart metadata config (#19143)

* fix: clean up chart metadata config

* missed a spot

* missed another spot

* fix failing time-specific test

* can't call translation functions here

* Revert "fix failing time-specific test"

This reverts commit 3eeb8ab9cc5db155a30d08b81fd697af1fcaf6ea.

* skip problematic test

* extra import
---
 .../src/chart/models/ChartMetadata.ts         | 22 ++++++++-----
 .../superset-ui-core/src/chart/types/Base.ts  | 13 +++++---
 .../TimezoneSelector.test.tsx                 |  2 +-
 .../VizTypeControl/VizTypeGallery.tsx         | 32 +++++++++++--------
 4 files changed, 42 insertions(+), 27 deletions(-)

diff --git a/superset-frontend/packages/superset-ui-core/src/chart/models/ChartMetadata.ts b/superset-frontend/packages/superset-ui-core/src/chart/models/ChartMetadata.ts
index 1013eeee2d3b3..7a25fe86208d1 100644
--- a/superset-frontend/packages/superset-ui-core/src/chart/models/ChartMetadata.ts
+++ b/superset-frontend/packages/superset-ui-core/src/chart/models/ChartMetadata.ts
@@ -43,10 +43,11 @@ export interface ChartMetadataConfig {
   exampleGallery?: ExampleImage[];
   tags?: string[];
   category?: string | null;
-  label?: {
-    name?: ChartLabel;
-    description?: string;
-  } | null;
+  // deprecated: true hides a chart from all viz picker interactions.
+  deprecated?: boolean;
+  // label: ChartLabel.DEPRECATED which will display a "deprecated" label on the chart.
+  label?: ChartLabel | null;
+  labelExplanation?: string | null;
 }
 
 export default class ChartMetadata {
@@ -80,10 +81,11 @@ export default class ChartMetadata {
 
   category: string | null;
 
-  label?: {
-    name?: ChartLabel;
-    description?: string;
-  } | null;
+  deprecated?: boolean;
+
+  label?: ChartLabel | null;
+
+  labelExplanation?: string | null;
 
   constructor(config: ChartMetadataConfig) {
     const {
@@ -101,7 +103,9 @@ export default class ChartMetadata {
       exampleGallery = [],
       tags = [],
       category = null,
+      deprecated = false,
       label = null,
+      labelExplanation = null,
     } = config;
 
     this.name = name;
@@ -127,7 +131,9 @@ export default class ChartMetadata {
     this.exampleGallery = exampleGallery;
     this.tags = tags;
     this.category = category;
+    this.deprecated = deprecated;
     this.label = label;
+    this.labelExplanation = labelExplanation;
   }
 
   canBeAnnotationType(type: string): boolean {
diff --git a/superset-frontend/packages/superset-ui-core/src/chart/types/Base.ts b/superset-frontend/packages/superset-ui-core/src/chart/types/Base.ts
index aad547ca2aa5d..0bfae7777e7df 100644
--- a/superset-frontend/packages/superset-ui-core/src/chart/types/Base.ts
+++ b/superset-frontend/packages/superset-ui-core/src/chart/types/Base.ts
@@ -53,18 +53,21 @@ export interface PlainObject {
 }
 
 export enum ChartLabel {
-  VERIFIED = 'VERIFIED',
   DEPRECATED = 'DEPRECATED',
   FEATURED = 'FEATURED',
 }
 
-export const ChartLabelWeight = {
+export const chartLabelExplanations: Record<ChartLabel, string> = {
+  [ChartLabel.DEPRECATED]:
+    'This chart uses features or modules which are no longer actively maintained. It will eventually be replaced or removed.',
+  [ChartLabel.FEATURED]:
+    'This chart was tested and verified, so the overall experience should be stable.',
+};
+
+export const chartLabelWeight: Record<ChartLabel, { weight: number }> = {
   [ChartLabel.DEPRECATED]: {
     weight: -0.1,
   },
-  [ChartLabel.VERIFIED]: {
-    weight: 0.2,
-  },
   [ChartLabel.FEATURED]: {
     weight: 0.1,
   },
diff --git a/superset-frontend/src/components/TimezoneSelector/TimezoneSelector.test.tsx b/superset-frontend/src/components/TimezoneSelector/TimezoneSelector.test.tsx
index 035cff842c9e2..79830fd820921 100644
--- a/superset-frontend/src/components/TimezoneSelector/TimezoneSelector.test.tsx
+++ b/superset-frontend/src/components/TimezoneSelector/TimezoneSelector.test.tsx
@@ -55,7 +55,7 @@ it('use the default timezone when an invalid timezone is provided', async () =>
   expect(onTimezoneChange).toHaveBeenLastCalledWith('Africa/Abidjan');
 });
 
-it('can select a timezone values and returns canonical value', async () => {
+it.skip('can select a timezone values and returns canonical value', async () => {
   const onTimezoneChange = jest.fn();
   render(
     <TimezoneSelector
diff --git a/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeGallery.tsx b/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeGallery.tsx
index dc7afacb6c082..b0861a759058f 100644
--- a/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeGallery.tsx
+++ b/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeGallery.tsx
@@ -33,8 +33,8 @@ import {
   ChartMetadata,
   SupersetTheme,
   useTheme,
-  ChartLabel,
-  ChartLabelWeight,
+  chartLabelWeight,
+  chartLabelExplanations,
 } from '@superset-ui/core';
 import { AntdCollapse } from 'src/components';
 import { Tooltip } from 'src/components/Tooltip';
@@ -414,10 +414,10 @@ const Thumbnail: React.FC<ThumbnailProps> = ({
       >
         {type.name}
       </div>
-      {type.label?.name && (
+      {type.label && (
         <ThumbnailLabelWrapper>
           <HighlightLabel>
-            <div>{t(type.label?.name)}</div>
+            <div>{t(type.label)}</div>
           </HighlightLabel>
         </ThumbnailLabelWrapper>
       )}
@@ -503,8 +503,7 @@ export default function VizTypeGallery(props: VizTypeGalleryProps) {
       .map(([key, value]) => ({ key, value }))
       .filter(
         ({ value }) =>
-          nativeFilterGate(value.behaviors || []) &&
-          value.label?.name !== ChartLabel.DEPRECATED,
+          nativeFilterGate(value.behaviors || []) && !value.deprecated,
       );
     result.sort((a, b) => vizSortFactor(a) - vizSortFactor(b));
     return result;
@@ -593,12 +592,16 @@ export default function VizTypeGallery(props: VizTypeGalleryProps) {
       .search(searchInputValue)
       .map(result => result.item)
       .sort((a, b) => {
-        const aName = a.value?.label?.name;
-        const bName = b.value?.label?.name;
+        const aLabel = a.value?.label;
+        const bLabel = b.value?.label;
         const aOrder =
-          aName && ChartLabelWeight[aName] ? ChartLabelWeight[aName].weight : 0;
+          aLabel && chartLabelWeight[aLabel]
+            ? chartLabelWeight[aLabel].weight
+            : 0;
         const bOrder =
-          bName && ChartLabelWeight[bName] ? ChartLabelWeight[bName].weight : 0;
+          bLabel && chartLabelWeight[bLabel]
+            ? chartLabelWeight[bLabel].weight
+            : 0;
         return bOrder - aOrder;
       });
   }, [searchInputValue, fuse]);
@@ -798,15 +801,18 @@ export default function VizTypeGallery(props: VizTypeGalleryProps) {
               `}
             >
               {selectedVizMetadata?.name}
-              {selectedVizMetadata?.label?.name && (
+              {selectedVizMetadata?.label && (
                 <Tooltip
                   id="viz-badge-tooltip"
                   placement="top"
-                  title={selectedVizMetadata.label?.description}
+                  title={
+                    selectedVizMetadata.labelExplanation ??
+                    chartLabelExplanations[selectedVizMetadata.label]
+                  }
                 >
                   <TitleLabelWrapper>
                     <HighlightLabel>
-                      <div>{t(selectedVizMetadata.label?.name)}</div>
+                      <div>{t(selectedVizMetadata.label)}</div>
                     </HighlightLabel>
                   </TitleLabelWrapper>
                 </Tooltip>

From bb618a47ff1e1747cf66bffa8bceee133a5c9064 Mon Sep 17 00:00:00 2001
From: Lyndsi Kay Williams <55605634+lyndsiWilliams@users.noreply.github.com>
Date: Wed, 16 Mar 2022 14:09:19 -0500
Subject: [PATCH 07/17] fix(sqllab): Updated blank states for query results and
 query history (#19111)

* Empty states updated on result tab and query history tab

* Testing on query history blank state

* Testing on result tab with empty state

* Forgot to remove a comment

* Corrected empty state image size and centered with drag bar

* Centered blank states vertically
---
 .../QueryHistory/QueryHistory.test.tsx        | 50 +++++++++++++++++++
 .../SqlLab/components/QueryHistory/index.tsx  | 22 ++++++--
 .../components/SouthPane/SouthPane.test.jsx   | 50 +++++++++++++++++--
 .../src/SqlLab/components/SouthPane/index.tsx | 19 ++++++-
 4 files changed, 134 insertions(+), 7 deletions(-)
 create mode 100644 superset-frontend/src/SqlLab/components/QueryHistory/QueryHistory.test.tsx

diff --git a/superset-frontend/src/SqlLab/components/QueryHistory/QueryHistory.test.tsx b/superset-frontend/src/SqlLab/components/QueryHistory/QueryHistory.test.tsx
new file mode 100644
index 0000000000000..782b147839186
--- /dev/null
+++ b/superset-frontend/src/SqlLab/components/QueryHistory/QueryHistory.test.tsx
@@ -0,0 +1,50 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+import { render, screen } from 'spec/helpers/testing-library';
+import QueryHistory from 'src/SqlLab/components/QueryHistory';
+
+const NOOP = () => {};
+const mockedProps = {
+  queries: [],
+  actions: {
+    queryEditorSetSql: NOOP,
+    cloneQueryToNewTab: NOOP,
+    fetchQueryResults: NOOP,
+    clearQueryResults: NOOP,
+    removeQuery: NOOP,
+  },
+  displayLimit: 1000,
+};
+
+const setup = (overrides = {}) => (
+  <QueryHistory {...mockedProps} {...overrides} />
+);
+
+describe('QueryHistory', () => {
+  it('Renders an empty state for query history', () => {
+    render(setup());
+
+    const emptyStateText = screen.getByText(
+      /run a query to display query history/i,
+    );
+
+    expect(emptyStateText).toBeVisible();
+  });
+});
diff --git a/superset-frontend/src/SqlLab/components/QueryHistory/index.tsx b/superset-frontend/src/SqlLab/components/QueryHistory/index.tsx
index e2d0453bb297a..7cf9d6ba657dd 100644
--- a/superset-frontend/src/SqlLab/components/QueryHistory/index.tsx
+++ b/superset-frontend/src/SqlLab/components/QueryHistory/index.tsx
@@ -17,8 +17,8 @@
  * under the License.
  */
 import React from 'react';
-import Alert from 'src/components/Alert';
-import { t } from '@superset-ui/core';
+import { EmptyStateMedium } from 'src/components/EmptyState';
+import { t, styled } from '@superset-ui/core';
 import { Query } from 'src/SqlLab/types';
 import QueryTable from 'src/SqlLab/components/QueryTable';
 
@@ -34,6 +34,17 @@ interface QueryHistoryProps {
   displayLimit: number;
 }
 
+const StyledEmptyStateWrapper = styled.div`
+  height: 100%;
+  .ant-empty-image img {
+    margin-right: 28px;
+  }
+
+  p {
+    margin-right: 28px;
+  }
+`;
+
 const QueryHistory = ({ queries, actions, displayLimit }: QueryHistoryProps) =>
   queries.length > 0 ? (
     <QueryTable
@@ -52,7 +63,12 @@ const QueryHistory = ({ queries, actions, displayLimit }: QueryHistoryProps) =>
       displayLimit={displayLimit}
     />
   ) : (
-    <Alert type="info" message={t('No query history yet...')} />
+    <StyledEmptyStateWrapper>
+      <EmptyStateMedium
+        title={t('Run a query to display query history')}
+        image="document.svg"
+      />
+    </StyledEmptyStateWrapper>
   );
 
 export default QueryHistory;
diff --git a/superset-frontend/src/SqlLab/components/SouthPane/SouthPane.test.jsx b/superset-frontend/src/SqlLab/components/SouthPane/SouthPane.test.jsx
index dbf81cfcf282d..1786a6cf313a6 100644
--- a/superset-frontend/src/SqlLab/components/SouthPane/SouthPane.test.jsx
+++ b/superset-frontend/src/SqlLab/components/SouthPane/SouthPane.test.jsx
@@ -20,11 +20,15 @@ import React from 'react';
 import configureStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
 import { styledShallow as shallow } from 'spec/helpers/theming';
+import { render, screen, act } from 'spec/helpers/testing-library';
 import SouthPaneContainer from 'src/SqlLab/components/SouthPane/state';
 import ResultSet from 'src/SqlLab/components/ResultSet';
 import '@testing-library/jest-dom/extend-expect';
 import { STATUS_OPTIONS } from 'src/SqlLab/constants';
 import { initialState } from 'src/SqlLab/fixtures';
+import { UserWithPermissionsAndRoles } from 'src/types/bootstrapTypes';
+
+const NOOP = () => {};
 
 const mockedProps = {
   editorQueries: [
@@ -71,13 +75,36 @@ const mockedProps = {
   offline: false,
 };
 
+const mockedEmptyProps = {
+  editorQueries: [],
+  latestQueryId: '',
+  dataPreviewQueries: [],
+  actions: {
+    queryEditorSetSql: NOOP,
+    cloneQueryToNewTab: NOOP,
+    fetchQueryResults: NOOP,
+    clearQueryResults: NOOP,
+    removeQuery: NOOP,
+    setActiveSouthPaneTab: NOOP,
+  },
+  activeSouthPaneTab: '',
+  height: 100,
+  databases: '',
+  offline: false,
+  displayLimit: 100,
+  user: UserWithPermissionsAndRoles,
+  defaultQueryLimit: 100,
+};
+
 const middlewares = [thunk];
 const mockStore = configureStore(middlewares);
 const store = mockStore(initialState);
+const setup = (overrides = {}) => (
+  <SouthPaneContainer store={store} {...mockedProps} {...overrides} />
+);
 
-describe('SouthPane', () => {
-  const getWrapper = () =>
-    shallow(<SouthPaneContainer store={store} {...mockedProps} />).dive();
+describe('SouthPane - Enzyme', () => {
+  const getWrapper = () => shallow(setup()).dive();
 
   let wrapper;
 
@@ -95,3 +122,20 @@ describe('SouthPane', () => {
     );
   });
 });
+
+describe('SouthPane - RTL', () => {
+  const renderAndWait = overrides => {
+    const mounted = act(async () => {
+      render(setup(overrides));
+    });
+
+    return mounted;
+  };
+  it('Renders an empty state for results', async () => {
+    await renderAndWait(mockedEmptyProps);
+
+    const emptyStateText = screen.getByText(/run a query to display results/i);
+
+    expect(emptyStateText).toBeVisible();
+  });
+});
diff --git a/superset-frontend/src/SqlLab/components/SouthPane/index.tsx b/superset-frontend/src/SqlLab/components/SouthPane/index.tsx
index f7efc04f34725..3fb0f9c5261e4 100644
--- a/superset-frontend/src/SqlLab/components/SouthPane/index.tsx
+++ b/superset-frontend/src/SqlLab/components/SouthPane/index.tsx
@@ -20,6 +20,7 @@ import React, { createRef } from 'react';
 import shortid from 'shortid';
 import Alert from 'src/components/Alert';
 import Tabs from 'src/components/Tabs';
+import { EmptyStateMedium } from 'src/components/EmptyState';
 import { t, styled } from '@superset-ui/core';
 
 import { isFeatureEnabled, FeatureFlag } from 'src/featureFlags';
@@ -93,6 +94,17 @@ const StyledPane = styled.div`
   }
 `;
 
+const StyledEmptyStateWrapper = styled.div`
+  height: 100%;
+  .ant-empty-image img {
+    margin-right: 28px;
+  }
+
+  p {
+    margin-right: 28px;
+  }
+`;
+
 export default function SouthPane({
   editorQueries,
   latestQueryId,
@@ -161,7 +173,12 @@ export default function SouthPane({
       }
     } else {
       results = (
-        <Alert type="info" message={t('Run a query to display results here')} />
+        <StyledEmptyStateWrapper>
+          <EmptyStateMedium
+            title={t('Run a query to display results')}
+            image="document.svg"
+          />
+        </StyledEmptyStateWrapper>
       );
     }
     return results;

From 181ecf450990c5102c1e9a077dfe7455073fb70d Mon Sep 17 00:00:00 2001
From: "Hugh A. Miles II" <hughmil3s@gmail.com>
Date: Wed, 16 Mar 2022 14:39:08 -0700
Subject: [PATCH 08/17] fix: Logic for showing extension in Global Nav (#19158)

* fix logic for checking extensions

* add specific types

* fix lint
---
 superset-frontend/src/views/CRUD/utils.tsx      |  7 +++----
 superset-frontend/src/views/components/Menu.tsx |  2 +-
 .../src/views/components/MenuRight.tsx          | 17 ++++++++++-------
 superset/utils/async_query_manager.py           |  2 +-
 4 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/superset-frontend/src/views/CRUD/utils.tsx b/superset-frontend/src/views/CRUD/utils.tsx
index d9d21c8565d17..c2ae0d8cbed13 100644
--- a/superset-frontend/src/views/CRUD/utils.tsx
+++ b/superset-frontend/src/views/CRUD/utils.tsx
@@ -412,12 +412,11 @@ export const hasTerminalValidation = (errors: Record<string, any>[]) =>
   );
 
 export const checkUploadExtensions = (
-  perm: Array<any> | string | undefined | boolean,
-  cons: Array<any>,
+  perm: Array<string>,
+  cons: Array<string>,
 ) => {
   if (perm !== undefined) {
-    if (typeof perm === 'boolean') return perm;
-    return intersection(perm, cons).length;
+    return intersection(perm, cons).length > 0;
   }
   return false;
 };
diff --git a/superset-frontend/src/views/components/Menu.tsx b/superset-frontend/src/views/components/Menu.tsx
index 068cad8e363d1..77a074f71b6c7 100644
--- a/superset-frontend/src/views/components/Menu.tsx
+++ b/superset-frontend/src/views/components/Menu.tsx
@@ -74,7 +74,7 @@ interface MenuObjectChildProps {
   index?: number;
   url?: string;
   isFrontendRoute?: boolean;
-  perm?: string | Array<any> | boolean;
+  perm?: string | boolean;
   view?: string;
 }
 
diff --git a/superset-frontend/src/views/components/MenuRight.tsx b/superset-frontend/src/views/components/MenuRight.tsx
index 531ed53847346..ab5b5d8d82a7e 100644
--- a/superset-frontend/src/views/components/MenuRight.tsx
+++ b/superset-frontend/src/views/components/MenuRight.tsx
@@ -79,7 +79,6 @@ const RightMenu = ({
     ALLOWED_EXTENSIONS,
     HAS_GSHEETS_INSTALLED,
   } = useSelector<any, ExtentionConfigs>(state => state.common.conf);
-
   const [showModal, setShowModal] = useState<boolean>(false);
   const [engine, setEngine] = useState<string>('');
   const canSql = findPermission('can_sqllab', 'Superset', roles);
@@ -124,19 +123,25 @@ const RightMenu = ({
           label: t('Upload CSV to database'),
           name: 'Upload a CSV',
           url: '/csvtodatabaseview/form',
-          perm: CSV_EXTENSIONS && canUploadCSV,
+          perm:
+            checkUploadExtensions(CSV_EXTENSIONS, ALLOWED_EXTENSIONS) &&
+            canUploadCSV,
         },
         {
           label: t('Upload columnar file to database'),
           name: 'Upload a Columnar file',
           url: '/columnartodatabaseview/form',
-          perm: COLUMNAR_EXTENSIONS && canUploadColumnar,
+          perm:
+            checkUploadExtensions(COLUMNAR_EXTENSIONS, ALLOWED_EXTENSIONS) &&
+            canUploadColumnar,
         },
         {
           label: t('Upload Excel file to database'),
           name: 'Upload Excel',
           url: '/exceltodatabaseview/form',
-          perm: EXCEL_EXTENSIONS && canUploadExcel,
+          perm:
+            checkUploadExtensions(EXCEL_EXTENSIONS, ALLOWED_EXTENSIONS) &&
+            canUploadExcel,
         },
       ],
     },
@@ -209,9 +214,7 @@ const RightMenu = ({
                     title={menuIconAndLabel(menu)}
                   >
                     {menu.childs.map((item, idx) =>
-                      typeof item !== 'string' &&
-                      item.name &&
-                      checkUploadExtensions(item.perm, ALLOWED_EXTENSIONS) ? (
+                      typeof item !== 'string' && item.name && item.perm ? (
                         <>
                           {idx === 2 && <Menu.Divider />}
                           <Menu.Item key={item.name}>
diff --git a/superset/utils/async_query_manager.py b/superset/utils/async_query_manager.py
index a026fd6f3f3d7..fcda931fcd880 100644
--- a/superset/utils/async_query_manager.py
+++ b/superset/utils/async_query_manager.py
@@ -71,7 +71,7 @@ class AsyncQueryManager:
 
     def __init__(self) -> None:
         super().__init__()
-        self._redis: redis.Redis  # type: ignore
+        self._redis: redis.Redis
         self._stream_prefix: str = ""
         self._stream_limit: Optional[int]
         self._stream_limit_firehose: Optional[int]

From 8d53db1db6c3211d6be6905bd1e4cd11043e8219 Mon Sep 17 00:00:00 2001
From: Jesse Yang <jesse.yang@airbnb.com>
Date: Wed, 16 Mar 2022 14:47:41 -0700
Subject: [PATCH 09/17] test: fix TimezoneSelector tests on daylight saving
 time (#19156)

---
 superset-frontend/cypress-base/cypress.json   |  2 +-
 .../integration/dashboard/key_value.test.ts   | 14 ++-
 .../TimezoneSelector.stories.tsx              |  4 +-
 .../TimezoneSelector.test.tsx                 | 94 +++++++++++++------
 .../src/components/TimezoneSelector/index.tsx | 19 ++--
 5 files changed, 89 insertions(+), 44 deletions(-)

diff --git a/superset-frontend/cypress-base/cypress.json b/superset-frontend/cypress-base/cypress.json
index 8e023d8a1a24b..f9729be1c3c91 100644
--- a/superset-frontend/cypress-base/cypress.json
+++ b/superset-frontend/cypress-base/cypress.json
@@ -1,7 +1,7 @@
 {
   "baseUrl": "http://localhost:8088",
   "chromeWebSecurity": false,
-  "defaultCommandTimeout": 5000,
+  "defaultCommandTimeout": 8000,
   "numTestsKeptInMemory": 0,
   "experimentalFetchPolyfill": true,
   "requestTimeout": 10000,
diff --git a/superset-frontend/cypress-base/cypress/integration/dashboard/key_value.test.ts b/superset-frontend/cypress-base/cypress/integration/dashboard/key_value.test.ts
index ba27bf30163a2..24b6ff0aa7a62 100644
--- a/superset-frontend/cypress-base/cypress/integration/dashboard/key_value.test.ts
+++ b/superset-frontend/cypress-base/cypress/integration/dashboard/key_value.test.ts
@@ -27,16 +27,19 @@ interface QueryString {
   native_filters_key: string;
 }
 
-describe('nativefiler url param key', () => {
+xdescribe('nativefiler url param key', () => {
   // const urlParams = { param1: '123', param2: 'abc' };
   before(() => {
     cy.login();
-    cy.visit(WORLD_HEALTH_DASHBOARD);
-    WORLD_HEALTH_CHARTS.forEach(waitForChartLoad);
-    cy.wait(1000); // wait for key to be published (debounced)
   });
+
   let initialFilterKey: string;
   it('should have cachekey in nativefilter param', () => {
+    // things in `before` will not retry and the `waitForChartLoad` check is
+    // especically flaky and may need more retries
+    cy.visit(WORLD_HEALTH_DASHBOARD);
+    WORLD_HEALTH_CHARTS.forEach(waitForChartLoad);
+    cy.wait(1000); // wait for key to be published (debounced)
     cy.location().then(loc => {
       const queryParams = qs.parse(loc.search) as QueryString;
       expect(typeof queryParams.native_filters_key).eq('string');
@@ -44,6 +47,9 @@ describe('nativefiler url param key', () => {
   });
 
   it('should have different key when page reloads', () => {
+    cy.visit(WORLD_HEALTH_DASHBOARD);
+    WORLD_HEALTH_CHARTS.forEach(waitForChartLoad);
+    cy.wait(1000); // wait for key to be published (debounced)
     cy.location().then(loc => {
       const queryParams = qs.parse(loc.search) as QueryString;
       expect(queryParams.native_filters_key).not.equal(initialFilterKey);
diff --git a/superset-frontend/src/components/TimezoneSelector/TimezoneSelector.stories.tsx b/superset-frontend/src/components/TimezoneSelector/TimezoneSelector.stories.tsx
index cf9d1d6e730ed..6bf0d438daca6 100644
--- a/superset-frontend/src/components/TimezoneSelector/TimezoneSelector.stories.tsx
+++ b/superset-frontend/src/components/TimezoneSelector/TimezoneSelector.stories.tsx
@@ -18,7 +18,7 @@
  */
 import React from 'react';
 import { useArgs } from '@storybook/client-api';
-import TimezoneSelector, { TimezoneProps } from './index';
+import TimezoneSelector, { TimezoneSelectorProps } from './index';
 
 export default {
   title: 'TimezoneSelector',
@@ -26,7 +26,7 @@ export default {
 };
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const InteractiveTimezoneSelector = (args: TimezoneProps) => {
+export const InteractiveTimezoneSelector = (args: TimezoneSelectorProps) => {
   const [{ timezone }, updateArgs] = useArgs();
   const onTimezoneChange = (value: string) => {
     updateArgs({ timezone: value });
diff --git a/superset-frontend/src/components/TimezoneSelector/TimezoneSelector.test.tsx b/superset-frontend/src/components/TimezoneSelector/TimezoneSelector.test.tsx
index 79830fd820921..19c713adf4f13 100644
--- a/superset-frontend/src/components/TimezoneSelector/TimezoneSelector.test.tsx
+++ b/superset-frontend/src/components/TimezoneSelector/TimezoneSelector.test.tsx
@@ -20,21 +20,42 @@ import React from 'react';
 import moment from 'moment-timezone';
 import { render, screen, waitFor } from 'spec/helpers/testing-library';
 import userEvent from '@testing-library/user-event';
-import TimezoneSelector from './index';
+import type { TimezoneSelectorProps } from './index';
 
-jest.spyOn(moment.tz, 'guess').mockReturnValue('America/New_York');
+const loadComponent = (mockCurrentTime?: string) => {
+  if (mockCurrentTime) {
+    jest.useFakeTimers('modern');
+    jest.setSystemTime(new Date(mockCurrentTime));
+  }
+  return new Promise<React.FC<TimezoneSelectorProps>>(resolve => {
+    jest.isolateModules(() => {
+      const { default: TimezoneSelector } = module.require('./index');
+      resolve(TimezoneSelector);
+      jest.useRealTimers();
+    });
+  });
+};
 
 const getSelectOptions = () =>
   waitFor(() => document.querySelectorAll('.ant-select-item-option-content'));
 
-it('use the timezone from `moment` if no timezone provided', () => {
+const openSelectMenu = async () => {
+  const searchInput = screen.getByRole('combobox');
+  userEvent.click(searchInput);
+};
+
+jest.spyOn(moment.tz, 'guess').mockReturnValue('America/New_York');
+
+test('use the timezone from `moment` if no timezone provided', async () => {
+  const TimezoneSelector = await loadComponent('2022-01-01');
   const onTimezoneChange = jest.fn();
   render(<TimezoneSelector onTimezoneChange={onTimezoneChange} />);
   expect(onTimezoneChange).toHaveBeenCalledTimes(1);
   expect(onTimezoneChange).toHaveBeenCalledWith('America/Nassau');
 });
 
-it('update to closest deduped timezone when timezone is provided', async () => {
+test('update to closest deduped timezone when timezone is provided', async () => {
+  const TimezoneSelector = await loadComponent('2022-01-01');
   const onTimezoneChange = jest.fn();
   render(
     <TimezoneSelector
@@ -46,7 +67,8 @@ it('update to closest deduped timezone when timezone is provided', async () => {
   expect(onTimezoneChange).toHaveBeenLastCalledWith('America/Vancouver');
 });
 
-it('use the default timezone when an invalid timezone is provided', async () => {
+test('use the default timezone when an invalid timezone is provided', async () => {
+  const TimezoneSelector = await loadComponent('2022-01-01');
   const onTimezoneChange = jest.fn();
   render(
     <TimezoneSelector onTimezoneChange={onTimezoneChange} timezone="UTC" />,
@@ -55,7 +77,8 @@ it('use the default timezone when an invalid timezone is provided', async () =>
   expect(onTimezoneChange).toHaveBeenLastCalledWith('Africa/Abidjan');
 });
 
-it.skip('can select a timezone values and returns canonical value', async () => {
+test('render timezones in correct oder for standard time', async () => {
+  const TimezoneSelector = await loadComponent('2022-01-01');
   const onTimezoneChange = jest.fn();
   render(
     <TimezoneSelector
@@ -63,41 +86,56 @@ it.skip('can select a timezone values and returns canonical value', async () =>
       timezone="America/Nassau"
     />,
   );
-
-  const searchInput = screen.getByRole('combobox', {
-    name: 'Timezone selector',
-  });
-  expect(searchInput).toBeInTheDocument();
-  userEvent.click(searchInput);
-  const isDaylight = moment(moment.now()).isDST();
-
-  const selectedTimezone = isDaylight
-    ? 'GMT -04:00 (Eastern Daylight Time)'
-    : 'GMT -05:00 (Eastern Standard Time)';
-
-  // selected option ranks first
+  await openSelectMenu();
   const options = await getSelectOptions();
-  expect(options[0]).toHaveTextContent(selectedTimezone);
-
-  // others are ranked by offset
+  expect(options[0]).toHaveTextContent('GMT -05:00 (Eastern Standard Time)');
   expect(options[1]).toHaveTextContent('GMT -11:00 (Pacific/Pago_Pago)');
   expect(options[2]).toHaveTextContent('GMT -10:00 (Hawaii Standard Time)');
   expect(options[3]).toHaveTextContent('GMT -10:00 (America/Adak)');
+});
+
+test('render timezones in correct order for daylight saving time', async () => {
+  const TimezoneSelector = await loadComponent('2022-07-01');
+  const onTimezoneChange = jest.fn();
+  render(
+    <TimezoneSelector
+      onTimezoneChange={onTimezoneChange}
+      timezone="America/Nassau"
+    />,
+  );
+  await openSelectMenu();
+  const options = await getSelectOptions();
+  // first option is always current timezone
+  expect(options[0]).toHaveTextContent('GMT -04:00 (Eastern Daylight Time)');
+  expect(options[1]).toHaveTextContent('GMT -11:00 (Pacific/Pago_Pago)');
+  expect(options[2]).toHaveTextContent('GMT -10:00 (Hawaii Standard Time)');
+  expect(options[3]).toHaveTextContent('GMT -09:30 (Pacific/Marquesas)');
+});
 
+test('can select a timezone values and returns canonical timezone name', async () => {
+  const TimezoneSelector = await loadComponent('2022-01-01');
+  const onTimezoneChange = jest.fn();
+  render(
+    <TimezoneSelector
+      onTimezoneChange={onTimezoneChange}
+      timezone="Africa/Abidjan"
+    />,
+  );
+
+  await openSelectMenu();
+
+  const searchInput = screen.getByRole('combobox');
   // search for mountain time
   await userEvent.type(searchInput, 'mou', { delay: 10 });
-
-  const findTitle = isDaylight
-    ? 'GMT -06:00 (Mountain Daylight Time)'
-    : 'GMT -07:00 (Mountain Standard Time)';
+  const findTitle = 'GMT -07:00 (Mountain Standard Time)';
   const selectOption = await screen.findByTitle(findTitle);
-  expect(selectOption).toBeInTheDocument();
   userEvent.click(selectOption);
   expect(onTimezoneChange).toHaveBeenCalledTimes(1);
   expect(onTimezoneChange).toHaveBeenLastCalledWith('America/Cambridge_Bay');
 });
 
-it('can update props and rerender with different values', async () => {
+test('can update props and rerender with different values', async () => {
+  const TimezoneSelector = await loadComponent('2022-01-01');
   const onTimezoneChange = jest.fn();
   const { rerender } = render(
     <TimezoneSelector
diff --git a/superset-frontend/src/components/TimezoneSelector/index.tsx b/superset-frontend/src/components/TimezoneSelector/index.tsx
index 878a9ced16eb0..119cb50fbce37 100644
--- a/superset-frontend/src/components/TimezoneSelector/index.tsx
+++ b/superset-frontend/src/components/TimezoneSelector/index.tsx
@@ -62,11 +62,6 @@ const getTimezoneName = (name: string) => {
   );
 };
 
-export interface TimezoneProps {
-  onTimezoneChange: (value: string) => void;
-  timezone?: string | null;
-}
-
 const ALL_ZONES = moment.tz
   .countries()
   .map(country => moment.tz.zonesForCountry(country, true))
@@ -106,7 +101,15 @@ const matchTimezoneToOptions = (timezone: string) =>
   TIMEZONE_OPTIONS.find(option => option.offsets === getOffsetKey(timezone))
     ?.value || DEFAULT_TIMEZONE.value;
 
-const TimezoneSelector = ({ onTimezoneChange, timezone }: TimezoneProps) => {
+export type TimezoneSelectorProps = {
+  onTimezoneChange: (value: string) => void;
+  timezone?: string | null;
+};
+
+export default function TimezoneSelector({
+  onTimezoneChange,
+  timezone,
+}: TimezoneSelectorProps) {
   const validTimezone = useMemo(
     () => matchTimezoneToOptions(timezone || moment.tz.guess()),
     [timezone],
@@ -129,6 +132,4 @@ const TimezoneSelector = ({ onTimezoneChange, timezone }: TimezoneProps) => {
       sortComparator={TIMEZONE_OPTIONS_SORT_COMPARATOR}
     />
   );
-};
-
-export default TimezoneSelector;
+}

From fc8721800b00ea8a4a627ec54adb5852857f6d3c Mon Sep 17 00:00:00 2001
From: "Hugh A. Miles II" <hughmil3s@gmail.com>
Date: Wed, 16 Mar 2022 15:57:35 -0700
Subject: [PATCH 10/17] =?UTF-8?q?fix:=20Revert=20"refactor:=20converted=20?=
 =?UTF-8?q?QueryAutoRefresh=20to=20functional=20component=20=E2=80=A6=20(#?=
 =?UTF-8?q?19226)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Revert "refactor: converted QueryAutoRefresh to functional component (#18179)"

This reverts commit f497c1900e896a45daac66cf35776d9ad343f69e.

* lint
---
 .../QueryAutoRefresh.test.jsx                 | 40 ++++-----
 .../components/QueryAutoRefresh/index.jsx     | 86 ++++++++++---------
 2 files changed, 67 insertions(+), 59 deletions(-)

diff --git a/superset-frontend/src/SqlLab/components/QueryAutoRefresh/QueryAutoRefresh.test.jsx b/superset-frontend/src/SqlLab/components/QueryAutoRefresh/QueryAutoRefresh.test.jsx
index 93cea6d08d65f..06bf187e1185a 100644
--- a/superset-frontend/src/SqlLab/components/QueryAutoRefresh/QueryAutoRefresh.test.jsx
+++ b/superset-frontend/src/SqlLab/components/QueryAutoRefresh/QueryAutoRefresh.test.jsx
@@ -17,14 +17,12 @@
  * under the License.
  */
 import React from 'react';
-import { render } from 'spec/helpers/testing-library';
-import { ThemeProvider, supersetTheme } from '@superset-ui/core';
+import { shallow } from 'enzyme';
+import sinon from 'sinon';
 import thunk from 'redux-thunk';
 import configureStore from 'redux-mock-store';
 import QueryAutoRefresh from 'src/SqlLab/components/QueryAutoRefresh';
 import { initialState, runningQuery } from 'src/SqlLab/fixtures';
-import fetchMock from 'fetch-mock';
-import * as actions from 'src/SqlLab/actions/sqlLab';
 
 describe('QueryAutoRefresh', () => {
   const middlewares = [thunk];
@@ -40,29 +38,31 @@ describe('QueryAutoRefresh', () => {
     sqlLab,
   };
   const store = mockStore(state);
-  const setup = (overrides = {}) => (
-    <ThemeProvider theme={supersetTheme}>
-      <QueryAutoRefresh store={store} {...overrides} />
-    </ThemeProvider>
-  );
-
-  const mockFetch = fetchMock.get('glob:*/superset/queries/*', {});
+  const getWrapper = () =>
+    shallow(<QueryAutoRefresh store={store} />)
+      .dive()
+      .dive();
+  let wrapper;
 
   it('shouldCheckForQueries', () => {
-    render(setup(), {
-      useRedux: true,
-    });
-
-    expect(mockFetch.called()).toBe(true);
+    wrapper = getWrapper();
+    expect(wrapper.instance().shouldCheckForQueries()).toBe(true);
   });
 
   it('setUserOffline', () => {
-    const spy = jest.spyOn(actions, 'setUserOffline');
+    wrapper = getWrapper();
+    const spy = sinon.spy(wrapper.instance().props.actions, 'setUserOffline');
 
-    render(setup(), {
-      useRedux: true,
+    // state not changed
+    wrapper.setState({
+      offline: false,
     });
+    expect(spy.called).toBe(false);
 
-    expect(spy).toHaveBeenCalled();
+    // state is changed
+    wrapper.setState({
+      offline: true,
+    });
+    expect(spy.callCount).toBe(1);
   });
 });
diff --git a/superset-frontend/src/SqlLab/components/QueryAutoRefresh/index.jsx b/superset-frontend/src/SqlLab/components/QueryAutoRefresh/index.jsx
index 43f6c5d8a7d6e..b54936b691efe 100644
--- a/superset-frontend/src/SqlLab/components/QueryAutoRefresh/index.jsx
+++ b/superset-frontend/src/SqlLab/components/QueryAutoRefresh/index.jsx
@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { useState, useEffect } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
@@ -28,12 +28,31 @@ const QUERY_UPDATE_BUFFER_MS = 5000;
 const MAX_QUERY_AGE_TO_POLL = 21600000;
 const QUERY_TIMEOUT_LIMIT = 10000;
 
-function QueryAutoRefresh({ offline, queries, queriesLastUpdate, actions }) {
-  const [offlineState, setOfflineState] = useState(offline);
-  let timer = null;
+class QueryAutoRefresh extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      offline: props.offline,
+    };
+  }
+
+  UNSAFE_componentWillMount() {
+    this.startTimer();
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.offline !== this.state.offline) {
+      this.props.actions.setUserOffline(this.state.offline);
+    }
+  }
+
+  componentWillUnmount() {
+    this.stopTimer();
+  }
 
-  const shouldCheckForQueries = () => {
+  shouldCheckForQueries() {
     // if there are started or running queries, this method should return true
+    const { queries } = this.props;
     const now = new Date().getTime();
     const isQueryRunning = q =>
       ['running', 'started', 'pending', 'fetching'].indexOf(q.state) >= 0;
@@ -41,57 +60,46 @@ function QueryAutoRefresh({ offline, queries, queriesLastUpdate, actions }) {
     return Object.values(queries).some(
       q => isQueryRunning(q) && now - q.startDttm < MAX_QUERY_AGE_TO_POLL,
     );
-  };
+  }
+
+  startTimer() {
+    if (!this.timer) {
+      this.timer = setInterval(this.stopwatch.bind(this), QUERY_UPDATE_FREQ);
+    }
+  }
 
-  const stopwatch = () => {
+  stopTimer() {
+    clearInterval(this.timer);
+    this.timer = null;
+  }
+
+  stopwatch() {
     // only poll /superset/queries/ if there are started or running queries
-    if (shouldCheckForQueries()) {
+    if (this.shouldCheckForQueries()) {
       SupersetClient.get({
         endpoint: `/superset/queries/${
-          queriesLastUpdate - QUERY_UPDATE_BUFFER_MS
+          this.props.queriesLastUpdate - QUERY_UPDATE_BUFFER_MS
         }`,
         timeout: QUERY_TIMEOUT_LIMIT,
       })
         .then(({ json }) => {
           if (Object.keys(json).length > 0) {
-            actions.refreshQueries(json);
+            this.props.actions.refreshQueries(json);
           }
-
-          setOfflineState(false);
+          this.setState({ offline: false });
         })
         .catch(() => {
-          setOfflineState(true);
+          this.setState({ offline: true });
         });
     } else {
-      setOfflineState(false);
+      this.setState({ offline: false });
     }
-  };
-
-  const startTimer = () => {
-    if (!timer) {
-      timer = setInterval(stopwatch(), QUERY_UPDATE_FREQ);
-    }
-  };
-
-  const stopTimer = () => {
-    clearInterval(timer);
-    timer = null;
-  };
-
-  useEffect(() => {
-    startTimer();
-    return () => {
-      stopTimer();
-    };
-  }, []);
+  }
 
-  useEffect(() => {
-    actions.setUserOffline(offlineState);
-  }, [offlineState]);
-
-  return null;
+  render() {
+    return null;
+  }
 }
-
 QueryAutoRefresh.propTypes = {
   offline: PropTypes.bool.isRequired,
   queries: PropTypes.object.isRequired,

From d01fdad1d8da740af95e32adf2c9fc4bd1da7db5 Mon Sep 17 00:00:00 2001
From: Beto Dealmeida <roberto@dealmeida.net>
Date: Wed, 16 Mar 2022 16:03:06 -0700
Subject: [PATCH 11/17] feat: add export_related flag (#19215)

* feat: add export_related flag

* Fix lint
---
 superset/charts/commands/export.py            |  6 +--
 superset/commands/export/__init__.py          | 16 +++++++
 .../commands/{export.py => export/models.py}  | 11 +++--
 superset/dashboards/commands/export.py        | 15 ++++---
 superset/databases/commands/export.py         | 37 ++++++++--------
 superset/datasets/commands/export.py          | 43 ++++++++++---------
 .../queries/saved_queries/commands/export.py  | 41 ++++++++++--------
 .../charts/commands_tests.py                  | 20 +++++++++
 .../dashboards/commands_tests.py              | 22 ++++++++++
 .../databases/commands_tests.py               | 20 +++++++++
 .../datasets/commands_tests.py                | 20 +++++++++
 .../queries/saved_queries/commands_tests.py   | 18 ++++++++
 12 files changed, 199 insertions(+), 70 deletions(-)
 create mode 100644 superset/commands/export/__init__.py
 rename superset/commands/{export.py => export/models.py} (86%)

diff --git a/superset/charts/commands/export.py b/superset/charts/commands/export.py
index 35f70a82eab65..9b3a06c473585 100644
--- a/superset/charts/commands/export.py
+++ b/superset/charts/commands/export.py
@@ -26,7 +26,7 @@
 from superset.charts.commands.exceptions import ChartNotFoundError
 from superset.charts.dao import ChartDAO
 from superset.datasets.commands.export import ExportDatasetsCommand
-from superset.commands.export import ExportModelsCommand
+from superset.commands.export.models import ExportModelsCommand
 from superset.models.slice import Slice
 from superset.utils.dict_import_export import EXPORT_VERSION
 
@@ -43,7 +43,7 @@ class ExportChartsCommand(ExportModelsCommand):
     not_found = ChartNotFoundError
 
     @staticmethod
-    def _export(model: Slice) -> Iterator[Tuple[str, str]]:
+    def _export(model: Slice, export_related: bool = True) -> Iterator[Tuple[str, str]]:
         chart_slug = secure_filename(model.slice_name)
         file_name = f"charts/{chart_slug}_{model.id}.yaml"
 
@@ -72,5 +72,5 @@ def _export(model: Slice) -> Iterator[Tuple[str, str]]:
         file_content = yaml.safe_dump(payload, sort_keys=False)
         yield file_name, file_content
 
-        if model.table:
+        if model.table and export_related:
             yield from ExportDatasetsCommand([model.table.id]).run()
diff --git a/superset/commands/export/__init__.py b/superset/commands/export/__init__.py
new file mode 100644
index 0000000000000..13a83393a9124
--- /dev/null
+++ b/superset/commands/export/__init__.py
@@ -0,0 +1,16 @@
+# Licensed to the Apache Software Foundation (ASF) under one
+# or more contributor license agreements.  See the NOTICE file
+# distributed with this work for additional information
+# regarding copyright ownership.  The ASF licenses this file
+# to you under the Apache License, Version 2.0 (the
+# "License"); you may not use this file except in compliance
+# with the License.  You may obtain a copy of the License at
+#
+#   http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing,
+# software distributed under the License is distributed on an
+# "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+# KIND, either express or implied.  See the License for the
+# specific language governing permissions and limitations
+# under the License.
diff --git a/superset/commands/export.py b/superset/commands/export/models.py
similarity index 86%
rename from superset/commands/export.py
rename to superset/commands/export/models.py
index 2b54de87852e9..dd4ff3bc57172 100644
--- a/superset/commands/export.py
+++ b/superset/commands/export/models.py
@@ -14,10 +14,8 @@
 # KIND, either express or implied.  See the License for the
 # specific language governing permissions and limitations
 # under the License.
-# isort:skip_file
 
-from datetime import datetime
-from datetime import timezone
+from datetime import datetime, timezone
 from typing import Iterator, List, Tuple, Type
 
 import yaml
@@ -36,14 +34,15 @@ class ExportModelsCommand(BaseCommand):
     dao: Type[BaseDAO] = BaseDAO
     not_found: Type[CommandException] = CommandException
 
-    def __init__(self, model_ids: List[int]):
+    def __init__(self, model_ids: List[int], export_related: bool = True):
         self.model_ids = model_ids
+        self.export_related = export_related
 
         # this will be set when calling validate()
         self._models: List[Model] = []
 
     @staticmethod
-    def _export(model: Model) -> Iterator[Tuple[str, str]]:
+    def _export(model: Model, export_related: bool = True) -> Iterator[Tuple[str, str]]:
         raise NotImplementedError("Subclasses MUST implement _export")
 
     def run(self) -> Iterator[Tuple[str, str]]:
@@ -58,7 +57,7 @@ def run(self) -> Iterator[Tuple[str, str]]:
 
         seen = {METADATA_FILE_NAME}
         for model in self._models:
-            for file_name, file_content in self._export(model):
+            for file_name, file_content in self._export(model, self.export_related):
                 if file_name not in seen:
                     yield file_name, file_content
                     seen.add(file_name)
diff --git a/superset/dashboards/commands/export.py b/superset/dashboards/commands/export.py
index a0467972d5feb..87408bab37706 100644
--- a/superset/dashboards/commands/export.py
+++ b/superset/dashboards/commands/export.py
@@ -29,7 +29,7 @@
 from superset.dashboards.commands.exceptions import DashboardNotFoundError
 from superset.dashboards.commands.importers.v1.utils import find_chart_uuids
 from superset.dashboards.dao import DashboardDAO
-from superset.commands.export import ExportModelsCommand
+from superset.commands.export.models import ExportModelsCommand
 from superset.datasets.commands.export import ExportDatasetsCommand
 from superset.datasets.dao import DatasetDAO
 from superset.models.dashboard import Dashboard
@@ -106,8 +106,11 @@ class ExportDashboardsCommand(ExportModelsCommand):
     dao = DashboardDAO
     not_found = DashboardNotFoundError
 
+    # pylint: disable=too-many-locals
     @staticmethod
-    def _export(model: Dashboard) -> Iterator[Tuple[str, str]]:
+    def _export(
+        model: Dashboard, export_related: bool = True
+    ) -> Iterator[Tuple[str, str]]:
         dashboard_slug = secure_filename(model.dashboard_title)
         file_name = f"dashboards/{dashboard_slug}.yaml"
 
@@ -138,7 +141,8 @@ def _export(model: Dashboard) -> Iterator[Tuple[str, str]]:
                 if dataset_id is not None:
                     dataset = DatasetDAO.find_by_id(dataset_id)
                     target["datasetUuid"] = str(dataset.uuid)
-                    yield from ExportDatasetsCommand([dataset_id]).run()
+                    if export_related:
+                        yield from ExportDatasetsCommand([dataset_id]).run()
 
         # the mapping between dashboard -> charts is inferred from the position
         # attribute, so if it's not present we need to add a default config
@@ -160,5 +164,6 @@ def _export(model: Dashboard) -> Iterator[Tuple[str, str]]:
         file_content = yaml.safe_dump(payload, sort_keys=False)
         yield file_name, file_content
 
-        chart_ids = [chart.id for chart in model.slices]
-        yield from ExportChartsCommand(chart_ids).run()
+        if export_related:
+            chart_ids = [chart.id for chart in model.slices]
+            yield from ExportChartsCommand(chart_ids).run()
diff --git a/superset/databases/commands/export.py b/superset/databases/commands/export.py
index 134bda580c7e5..9e8cb7e374426 100644
--- a/superset/databases/commands/export.py
+++ b/superset/databases/commands/export.py
@@ -25,7 +25,7 @@
 
 from superset.databases.commands.exceptions import DatabaseNotFoundError
 from superset.databases.dao import DatabaseDAO
-from superset.commands.export import ExportModelsCommand
+from superset.commands.export.models import ExportModelsCommand
 from superset.models.core import Database
 from superset.utils.dict_import_export import EXPORT_VERSION
 
@@ -55,7 +55,9 @@ class ExportDatabasesCommand(ExportModelsCommand):
     not_found = DatabaseNotFoundError
 
     @staticmethod
-    def _export(model: Database) -> Iterator[Tuple[str, str]]:
+    def _export(
+        model: Database, export_related: bool = True
+    ) -> Iterator[Tuple[str, str]]:
         database_slug = secure_filename(model.database_name)
         file_name = f"databases/{database_slug}.yaml"
 
@@ -90,18 +92,19 @@ def _export(model: Database) -> Iterator[Tuple[str, str]]:
         file_content = yaml.safe_dump(payload, sort_keys=False)
         yield file_name, file_content
 
-        for dataset in model.tables:
-            dataset_slug = secure_filename(dataset.table_name)
-            file_name = f"datasets/{database_slug}/{dataset_slug}.yaml"
-
-            payload = dataset.export_to_dict(
-                recursive=True,
-                include_parent_ref=False,
-                include_defaults=True,
-                export_uuids=True,
-            )
-            payload["version"] = EXPORT_VERSION
-            payload["database_uuid"] = str(model.uuid)
-
-            file_content = yaml.safe_dump(payload, sort_keys=False)
-            yield file_name, file_content
+        if export_related:
+            for dataset in model.tables:
+                dataset_slug = secure_filename(dataset.table_name)
+                file_name = f"datasets/{database_slug}/{dataset_slug}.yaml"
+
+                payload = dataset.export_to_dict(
+                    recursive=True,
+                    include_parent_ref=False,
+                    include_defaults=True,
+                    export_uuids=True,
+                )
+                payload["version"] = EXPORT_VERSION
+                payload["database_uuid"] = str(model.uuid)
+
+                file_content = yaml.safe_dump(payload, sort_keys=False)
+                yield file_name, file_content
diff --git a/superset/datasets/commands/export.py b/superset/datasets/commands/export.py
index 4e3843a0daee9..be9210a06c669 100644
--- a/superset/datasets/commands/export.py
+++ b/superset/datasets/commands/export.py
@@ -23,7 +23,7 @@
 import yaml
 from werkzeug.utils import secure_filename
 
-from superset.commands.export import ExportModelsCommand
+from superset.commands.export.models import ExportModelsCommand
 from superset.connectors.sqla.models import SqlaTable
 from superset.datasets.commands.exceptions import DatasetNotFoundError
 from superset.datasets.dao import DatasetDAO
@@ -40,7 +40,9 @@ class ExportDatasetsCommand(ExportModelsCommand):
     not_found = DatasetNotFoundError
 
     @staticmethod
-    def _export(model: SqlaTable) -> Iterator[Tuple[str, str]]:
+    def _export(
+        model: SqlaTable, export_related: bool = True
+    ) -> Iterator[Tuple[str, str]]:
         database_slug = secure_filename(model.database.database_name)
         dataset_slug = secure_filename(model.table_name)
         file_name = f"datasets/{database_slug}/{dataset_slug}.yaml"
@@ -76,23 +78,24 @@ def _export(model: SqlaTable) -> Iterator[Tuple[str, str]]:
         yield file_name, file_content
 
         # include database as well
-        file_name = f"databases/{database_slug}.yaml"
-
-        payload = model.database.export_to_dict(
-            recursive=False,
-            include_parent_ref=False,
-            include_defaults=True,
-            export_uuids=True,
-        )
-        # TODO (betodealmeida): move this logic to export_to_dict once this
-        # becomes the default export endpoint
-        if payload.get("extra"):
-            try:
-                payload["extra"] = json.loads(payload["extra"])
-            except json.decoder.JSONDecodeError:
-                logger.info("Unable to decode `extra` field: %s", payload["extra"])
+        if export_related:
+            file_name = f"databases/{database_slug}.yaml"
+
+            payload = model.database.export_to_dict(
+                recursive=False,
+                include_parent_ref=False,
+                include_defaults=True,
+                export_uuids=True,
+            )
+            # TODO (betodealmeida): move this logic to export_to_dict once this
+            # becomes the default export endpoint
+            if payload.get("extra"):
+                try:
+                    payload["extra"] = json.loads(payload["extra"])
+                except json.decoder.JSONDecodeError:
+                    logger.info("Unable to decode `extra` field: %s", payload["extra"])
 
-        payload["version"] = EXPORT_VERSION
+            payload["version"] = EXPORT_VERSION
 
-        file_content = yaml.safe_dump(payload, sort_keys=False)
-        yield file_name, file_content
+            file_content = yaml.safe_dump(payload, sort_keys=False)
+            yield file_name, file_content
diff --git a/superset/queries/saved_queries/commands/export.py b/superset/queries/saved_queries/commands/export.py
index ca2cfe5de9679..e209ae8ad2fd8 100644
--- a/superset/queries/saved_queries/commands/export.py
+++ b/superset/queries/saved_queries/commands/export.py
@@ -23,7 +23,7 @@
 import yaml
 from werkzeug.utils import secure_filename
 
-from superset.commands.export import ExportModelsCommand
+from superset.commands.export.models import ExportModelsCommand
 from superset.models.sql_lab import SavedQuery
 from superset.queries.saved_queries.commands.exceptions import SavedQueryNotFoundError
 from superset.queries.saved_queries.dao import SavedQueryDAO
@@ -38,7 +38,9 @@ class ExportSavedQueriesCommand(ExportModelsCommand):
     not_found = SavedQueryNotFoundError
 
     @staticmethod
-    def _export(model: SavedQuery) -> Iterator[Tuple[str, str]]:
+    def _export(
+        model: SavedQuery, export_related: bool = True
+    ) -> Iterator[Tuple[str, str]]:
         # build filename based on database, optional schema, and label
         database_slug = secure_filename(model.database.database_name)
         schema_slug = secure_filename(model.schema)
@@ -58,23 +60,24 @@ def _export(model: SavedQuery) -> Iterator[Tuple[str, str]]:
         yield file_name, file_content
 
         # include database as well
-        file_name = f"databases/{database_slug}.yaml"
+        if export_related:
+            file_name = f"databases/{database_slug}.yaml"
 
-        payload = model.database.export_to_dict(
-            recursive=False,
-            include_parent_ref=False,
-            include_defaults=True,
-            export_uuids=True,
-        )
-        # TODO (betodealmeida): move this logic to export_to_dict once this
-        # becomes the default export endpoint
-        if "extra" in payload:
-            try:
-                payload["extra"] = json.loads(payload["extra"])
-            except json.decoder.JSONDecodeError:
-                logger.info("Unable to decode `extra` field: %s", payload["extra"])
+            payload = model.database.export_to_dict(
+                recursive=False,
+                include_parent_ref=False,
+                include_defaults=True,
+                export_uuids=True,
+            )
+            # TODO (betodealmeida): move this logic to export_to_dict once this
+            # becomes the default export endpoint
+            if "extra" in payload:
+                try:
+                    payload["extra"] = json.loads(payload["extra"])
+                except json.decoder.JSONDecodeError:
+                    logger.info("Unable to decode `extra` field: %s", payload["extra"])
 
-        payload["version"] = EXPORT_VERSION
+            payload["version"] = EXPORT_VERSION
 
-        file_content = yaml.safe_dump(payload, sort_keys=False)
-        yield file_name, file_content
+            file_content = yaml.safe_dump(payload, sort_keys=False)
+            yield file_name, file_content
diff --git a/tests/integration_tests/charts/commands_tests.py b/tests/integration_tests/charts/commands_tests.py
index bf4fe4fe79bd4..ec205b6a6abee 100644
--- a/tests/integration_tests/charts/commands_tests.py
+++ b/tests/integration_tests/charts/commands_tests.py
@@ -176,6 +176,26 @@ def test_export_chart_command_key_order(self, mock_g):
             "dataset_uuid",
         ]
 
+    @patch("superset.security.manager.g")
+    @pytest.mark.usefixtures("load_energy_table_with_slice")
+    def test_export_chart_command_no_related(self, mock_g):
+        """
+        Test that only the chart is exported when export_related=False.
+        """
+        mock_g.user = security_manager.find_user("admin")
+
+        example_chart = (
+            db.session.query(Slice).filter_by(slice_name="Energy Sankey").one()
+        )
+        command = ExportChartsCommand([example_chart.id], export_related=False)
+        contents = dict(command.run())
+
+        expected = [
+            "metadata.yaml",
+            f"charts/Energy_Sankey_{example_chart.id}.yaml",
+        ]
+        assert expected == list(contents.keys())
+
 
 class TestImportChartsCommand(SupersetTestCase):
     @patch("superset.charts.commands.importers.v1.utils.g")
diff --git a/tests/integration_tests/dashboards/commands_tests.py b/tests/integration_tests/dashboards/commands_tests.py
index 7c7a2046f0592..ae18c741583e7 100644
--- a/tests/integration_tests/dashboards/commands_tests.py
+++ b/tests/integration_tests/dashboards/commands_tests.py
@@ -423,6 +423,28 @@ def test_append_charts(self, mock_suffix):
             "DASHBOARD_VERSION_KEY": "v2",
         }
 
+    @pytest.mark.usefixtures("load_world_bank_dashboard_with_slices")
+    @patch("superset.security.manager.g")
+    @patch("superset.views.base.g")
+    def test_export_dashboard_command_no_related(self, mock_g1, mock_g2):
+        """
+        Test that only the dashboard is exported when export_related=False.
+        """
+        mock_g1.user = security_manager.find_user("admin")
+        mock_g2.user = security_manager.find_user("admin")
+
+        example_dashboard = (
+            db.session.query(Dashboard).filter_by(slug="world_health").one()
+        )
+        command = ExportDashboardsCommand([example_dashboard.id], export_related=False)
+        contents = dict(command.run())
+
+        expected_paths = {
+            "metadata.yaml",
+            "dashboards/World_Banks_Data.yaml",
+        }
+        assert expected_paths == set(contents.keys())
+
 
 class TestImportDashboardsCommand(SupersetTestCase):
     def test_import_v0_dashboard_cli_export(self):
diff --git a/tests/integration_tests/databases/commands_tests.py b/tests/integration_tests/databases/commands_tests.py
index c90550ed69903..59fcf39a86727 100644
--- a/tests/integration_tests/databases/commands_tests.py
+++ b/tests/integration_tests/databases/commands_tests.py
@@ -358,6 +358,26 @@ def test_export_database_command_key_order(self, mock_g):
             "version",
         ]
 
+    @patch("superset.security.manager.g")
+    @pytest.mark.usefixtures(
+        "load_birth_names_dashboard_with_slices", "load_energy_table_with_slice"
+    )
+    def test_export_database_command_no_related(self, mock_g):
+        """
+        Test that only databases are exported when export_related=False.
+        """
+        mock_g.user = security_manager.find_user("admin")
+
+        example_db = get_example_database()
+        db_uuid = example_db.uuid
+
+        command = ExportDatabasesCommand([example_db.id], export_related=False)
+        contents = dict(command.run())
+        prefixes = {path.split("/")[0] for path in contents}
+        assert "metadata.yaml" in prefixes
+        assert "databases" in prefixes
+        assert "datasets" not in prefixes
+
 
 class TestImportDatabasesCommand(SupersetTestCase):
     def test_import_v1_database(self):
diff --git a/tests/integration_tests/datasets/commands_tests.py b/tests/integration_tests/datasets/commands_tests.py
index af22d9319b27c..784b1f19e39d9 100644
--- a/tests/integration_tests/datasets/commands_tests.py
+++ b/tests/integration_tests/datasets/commands_tests.py
@@ -219,6 +219,26 @@ def test_export_dataset_command_key_order(self, mock_g):
             "database_uuid",
         ]
 
+    @patch("superset.security.manager.g")
+    @pytest.mark.usefixtures("load_energy_table_with_slice")
+    def test_export_dataset_command_no_related(self, mock_g):
+        """
+        Test that only datasets are exported when export_related=False.
+        """
+        mock_g.user = security_manager.find_user("admin")
+
+        example_db = get_example_database()
+        example_dataset = _get_table_from_list_by_name(
+            "energy_usage", example_db.tables
+        )
+        command = ExportDatasetsCommand([example_dataset.id], export_related=False)
+        contents = dict(command.run())
+
+        assert list(contents.keys()) == [
+            "metadata.yaml",
+            "datasets/examples/energy_usage.yaml",
+        ]
+
 
 class TestImportDatasetsCommand(SupersetTestCase):
     @pytest.mark.usefixtures("load_world_bank_dashboard_with_slices")
diff --git a/tests/integration_tests/queries/saved_queries/commands_tests.py b/tests/integration_tests/queries/saved_queries/commands_tests.py
index f90924ba0e66a..bd90419155422 100644
--- a/tests/integration_tests/queries/saved_queries/commands_tests.py
+++ b/tests/integration_tests/queries/saved_queries/commands_tests.py
@@ -83,6 +83,24 @@ def test_export_query_command(self, mock_g):
             "database_uuid": str(self.example_database.uuid),
         }
 
+    @patch("superset.queries.saved_queries.filters.g")
+    def test_export_query_command_no_related(self, mock_g):
+        """
+        Test that only the query is exported when export_related=False.
+        """
+        mock_g.user = security_manager.find_user("admin")
+
+        command = ExportSavedQueriesCommand(
+            [self.example_query.id], export_related=False
+        )
+        contents = dict(command.run())
+
+        expected = [
+            "metadata.yaml",
+            "queries/examples/schema1/The_answer.yaml",
+        ]
+        assert expected == list(contents.keys())
+
     @patch("superset.queries.saved_queries.filters.g")
     def test_export_query_command_no_access(self, mock_g):
         """Test that users can't export datasets they don't have access to"""

From b7a0559aaf5ff4266baf5069b93379fbecfb4a00 Mon Sep 17 00:00:00 2001
From: Ville Brofeldt <33317356+villebro@users.noreply.github.com>
Date: Thu, 17 Mar 2022 01:15:52 +0200
Subject: [PATCH 12/17] feat: add permalink to dashboard and explore (#19078)

* rename key_value to temporary_cache

* add migration

* create new key_value package

* add commands

* lots of new stuff

* fix schema reference

* remove redundant filter state from bootstrap data

* add missing license headers

* fix pylint

* fix dashboard permalink access

* use valid json mocks for filter state tests

* fix temporary cache tests

* add anchors to dashboard state

* lint

* fix util test

* fix url shortlink button tests

* remove legacy shortner

* remove unused imports

* fix js tests

* fix test

* add native filter state to anchor link

* add UPDATING.md section

* address comments

* address comments

* lint

* fix test

* add utils tests + other test stubs

* add key_value integration tests

* add filter box state to permalink state

* fully support persisting url parameters

* lint, add redirects and a few integration tests

* fix test + clean up trailing comma

* fix anchor bug

* change value to LargeBinary to support persisting binary values

* fix urlParams type and simplify urlencode

* lint

* add optional entry expiration

* fix incorrect chart id + add test
---
 UPDATING.md                                   |   3 +-
 .../components/AnchorLink/AnchorLink.test.jsx |   8 +-
 .../src/components/AnchorLink/index.jsx       |  11 +-
 .../URLShortLinkButton.test.tsx               |  52 ++++--
 .../components/URLShortLinkButton/index.jsx   |  27 ++-
 superset-frontend/src/constants.ts            |  16 ++
 .../HeaderActionsDropdown.test.tsx            |   4 +-
 .../Header/HeaderActionsDropdown/index.jsx    |   4 +-
 .../components/SliceHeaderControls/index.tsx  |   7 +-
 .../components/gridComponents/Tab.jsx         |   2 +
 .../ShareMenuItems/ShareMenuItems.test.tsx    |  16 +-
 .../components/menu/ShareMenuItems/index.tsx  |  66 ++-----
 .../nativeFilters/FilterBar/index.tsx         |  13 +-
 .../nativeFilters/FilterBar/keyValue.tsx      |  13 +-
 .../dashboard/containers/DashboardPage.tsx    |  14 +-
 superset-frontend/src/dashboard/types.ts      |   8 +
 .../explore/components/EmbedCodeButton.jsx    |  25 ++-
 .../components/EmbedCodeButton.test.jsx       |  10 +-
 .../components/ExploreActionButtons.tsx       |  21 ++-
 .../components/ExploreViewContainer/index.jsx |  10 +-
 .../src/hooks/useUrlShortener.ts              |  39 ----
 superset-frontend/src/utils/urlUtils.ts       |  87 ++++++++-
 superset/config.py                            |   3 +
 superset/dashboards/filter_state/api.py       |   8 +-
 .../filter_state/commands/create.py           |  10 +-
 .../filter_state/commands/delete.py           |  14 +-
 .../dashboards/filter_state/commands/get.py   |   8 +-
 .../filter_state/commands/update.py           |  14 +-
 .../permalink}/__init__.py                    |   0
 superset/dashboards/permalink/api.py          | 171 +++++++++++++++++
 .../permalink/commands}/__init__.py           |   0
 .../dashboards/permalink/commands/base.py     |  23 +++
 .../dashboards/permalink/commands/create.py   |  61 ++++++
 superset/dashboards/permalink/commands/get.py |  65 +++++++
 superset/dashboards/permalink/exceptions.py   |  31 ++++
 superset/dashboards/permalink/schemas.py      |  40 ++++
 .../permalink/types.py}                       |  17 +-
 superset/explore/form_data/api.py             |  10 +-
 superset/explore/form_data/commands/create.py |  13 +-
 superset/explore/form_data/commands/delete.py |  14 +-
 superset/explore/form_data/commands/get.py    |   6 +-
 superset/explore/form_data/commands/update.py |  19 +-
 superset/explore/permalink/__init__.py        |  16 ++
 superset/explore/permalink/api.py             | 174 ++++++++++++++++++
 .../explore/permalink/commands/__init__.py    |  16 ++
 superset/explore/permalink/commands/base.py   |  23 +++
 superset/explore/permalink/commands/create.py |  60 ++++++
 superset/explore/permalink/commands/get.py    |  66 +++++++
 superset/explore/permalink/exceptions.py      |  31 ++++
 superset/explore/permalink/schemas.py         |  37 ++++
 superset/explore/permalink/types.py           |  29 +++
 superset/explore/{form_data => }/utils.py     |   0
 superset/initialization/__init__.py           |   4 +
 superset/key_value/commands/create.py         |  60 +++++-
 superset/key_value/commands/delete.py         |  51 ++++-
 superset/key_value/commands/get.py            |  51 +++--
 superset/key_value/commands/update.py         |  70 +++++--
 .../key_value/{commands => }/exceptions.py    |   5 +
 superset/key_value/models.py                  |  38 ++++
 superset/key_value/types.py                   |  34 ++++
 superset/key_value/utils.py                   |  43 ++++-
 .../6766938c6065_add_key_value_store.py       |  61 ++++++
 superset/temporary_cache/__init__.py          |  16 ++
 .../{key_value => temporary_cache}/api.py     |  27 +--
 superset/temporary_cache/commands/__init__.py |  16 ++
 superset/temporary_cache/commands/create.py   |  45 +++++
 superset/temporary_cache/commands/delete.py   |  45 +++++
 .../commands/entry.py                         |   0
 .../temporary_cache/commands/exceptions.py    |  45 +++++
 superset/temporary_cache/commands/get.py      |  46 +++++
 .../commands/parameters.py                    |   0
 superset/temporary_cache/commands/update.py   |  48 +++++
 superset/temporary_cache/schemas.py           |  37 ++++
 superset/temporary_cache/utils.py             |  28 +++
 superset/views/core.py                        |  55 +++++-
 superset/views/redirects.py                   |  21 +--
 tests/integration_tests/core_tests.py         |  24 ---
 .../dashboards/filter_state/api_tests.py      | 101 +++++-----
 .../dashboards/permalink/__init__.py          |  16 ++
 .../dashboards/permalink/api_tests.py         |  90 +++++++++
 .../explore/form_data/api_tests.py            | 114 +++++++-----
 .../explore/permalink/__init__.py             |  16 ++
 .../explore/permalink/api_tests.py            | 117 ++++++++++++
 tests/integration_tests/fixtures/client.py    |  26 +++
 tests/integration_tests/key_value/__init__.py |  16 ++
 .../key_value/commands/__init__.py            |  16 ++
 .../key_value/commands/create_test.py         |  64 +++++++
 .../key_value/commands/delete_test.py         |  91 +++++++++
 .../key_value/commands/fixtures.py            |  62 +++++++
 .../key_value/commands/get_test.py            | 100 ++++++++++
 .../key_value/commands/update_test.py         |  87 +++++++++
 .../explore/{form_data => }/utils_test.py     |  26 +--
 tests/unit_tests/key_value/__init__.py        |  16 ++
 tests/unit_tests/key_value/utils_test.py      | 117 ++++++++++++
 94 files changed, 2942 insertions(+), 438 deletions(-)
 delete mode 100644 superset-frontend/src/hooks/useUrlShortener.ts
 rename superset/{key_value/commands => dashboards/permalink}/__init__.py (100%)
 create mode 100644 superset/dashboards/permalink/api.py
 rename {tests/unit_tests/explore/form_data => superset/dashboards/permalink/commands}/__init__.py (100%)
 create mode 100644 superset/dashboards/permalink/commands/base.py
 create mode 100644 superset/dashboards/permalink/commands/create.py
 create mode 100644 superset/dashboards/permalink/commands/get.py
 create mode 100644 superset/dashboards/permalink/exceptions.py
 create mode 100644 superset/dashboards/permalink/schemas.py
 rename superset/{key_value/schemas.py => dashboards/permalink/types.py} (69%)
 create mode 100644 superset/explore/permalink/__init__.py
 create mode 100644 superset/explore/permalink/api.py
 create mode 100644 superset/explore/permalink/commands/__init__.py
 create mode 100644 superset/explore/permalink/commands/base.py
 create mode 100644 superset/explore/permalink/commands/create.py
 create mode 100644 superset/explore/permalink/commands/get.py
 create mode 100644 superset/explore/permalink/exceptions.py
 create mode 100644 superset/explore/permalink/schemas.py
 create mode 100644 superset/explore/permalink/types.py
 rename superset/explore/{form_data => }/utils.py (100%)
 rename superset/key_value/{commands => }/exceptions.py (90%)
 create mode 100644 superset/key_value/models.py
 create mode 100644 superset/key_value/types.py
 create mode 100644 superset/migrations/versions/6766938c6065_add_key_value_store.py
 create mode 100644 superset/temporary_cache/__init__.py
 rename superset/{key_value => temporary_cache}/api.py (87%)
 create mode 100644 superset/temporary_cache/commands/__init__.py
 create mode 100644 superset/temporary_cache/commands/create.py
 create mode 100644 superset/temporary_cache/commands/delete.py
 rename superset/{key_value => temporary_cache}/commands/entry.py (100%)
 create mode 100644 superset/temporary_cache/commands/exceptions.py
 create mode 100644 superset/temporary_cache/commands/get.py
 rename superset/{key_value => temporary_cache}/commands/parameters.py (100%)
 create mode 100644 superset/temporary_cache/commands/update.py
 create mode 100644 superset/temporary_cache/schemas.py
 create mode 100644 superset/temporary_cache/utils.py
 create mode 100644 tests/integration_tests/dashboards/permalink/__init__.py
 create mode 100644 tests/integration_tests/dashboards/permalink/api_tests.py
 create mode 100644 tests/integration_tests/explore/permalink/__init__.py
 create mode 100644 tests/integration_tests/explore/permalink/api_tests.py
 create mode 100644 tests/integration_tests/fixtures/client.py
 create mode 100644 tests/integration_tests/key_value/__init__.py
 create mode 100644 tests/integration_tests/key_value/commands/__init__.py
 create mode 100644 tests/integration_tests/key_value/commands/create_test.py
 create mode 100644 tests/integration_tests/key_value/commands/delete_test.py
 create mode 100644 tests/integration_tests/key_value/commands/fixtures.py
 create mode 100644 tests/integration_tests/key_value/commands/get_test.py
 create mode 100644 tests/integration_tests/key_value/commands/update_test.py
 rename tests/unit_tests/explore/{form_data => }/utils_test.py (88%)
 create mode 100644 tests/unit_tests/key_value/__init__.py
 create mode 100644 tests/unit_tests/key_value/utils_test.py

diff --git a/UPDATING.md b/UPDATING.md
index ea9f02094a52c..854e18074d9e0 100644
--- a/UPDATING.md
+++ b/UPDATING.md
@@ -49,11 +49,12 @@ flag for the legacy datasource editor (DISABLE_LEGACY_DATASOURCE_EDITOR) in conf
 
 ### Deprecations
 
+- [19078](https://github.com/apache/superset/pull/19078): Creation of old shorturl links has been deprecated in favor of a new permalink feature that solves the long url problem (old shorturls will still work, though!). By default, new permalinks use UUID4 as the key. However, to use serial ids similar to the old shorturls, add the following to your `superset_config.py`: `PERMALINK_KEY_TYPE = "id"`.
 - [18960](https://github.com/apache/superset/pull/18960): Persisting URL params in chart metadata is no longer supported. To set a default value for URL params in Jinja code, use the optional second argument: `url_param("my-param", "my-default-value")`.
 
 ### Other
 
-- [17589](https://github.com/apache/incubator-superset/pull/17589): It is now possible to limit access to users' recent activity data by setting the `ENABLE_BROAD_ACTIVITY_ACCESS` config flag to false, or customizing the `raise_for_user_activity_access` method in the security manager.
+- [17589](https://github.com/apache/superset/pull/17589): It is now possible to limit access to users' recent activity data by setting the `ENABLE_BROAD_ACTIVITY_ACCESS` config flag to false, or customizing the `raise_for_user_activity_access` method in the security manager.
 - [17536](https://github.com/apache/superset/pull/17536): introduced a key-value endpoint to store dashboard filter state. This endpoint is backed by Flask-Caching and the default configuration assumes that the values will be stored in the file system. If you are already using another cache backend like Redis or Memchached, you'll probably want to change this setting in `superset_config.py`. The key is `FILTER_STATE_CACHE_CONFIG` and the available settings can be found in Flask-Caching [docs](https://flask-caching.readthedocs.io/en/latest/).
 - [17882](https://github.com/apache/superset/pull/17882): introduced a key-value endpoint to store Explore form data. This endpoint is backed by Flask-Caching and the default configuration assumes that the values will be stored in the file system. If you are already using another cache backend like Redis or Memchached, you'll probably want to change this setting in `superset_config.py`. The key is `EXPLORE_FORM_DATA_CACHE_CONFIG` and the available settings can be found in Flask-Caching [docs](https://flask-caching.readthedocs.io/en/latest/).
 
diff --git a/superset-frontend/src/components/AnchorLink/AnchorLink.test.jsx b/superset-frontend/src/components/AnchorLink/AnchorLink.test.jsx
index 9f0c05a8eb87a..3f05416b1c0c5 100644
--- a/superset-frontend/src/components/AnchorLink/AnchorLink.test.jsx
+++ b/superset-frontend/src/components/AnchorLink/AnchorLink.test.jsx
@@ -25,6 +25,7 @@ import URLShortLinkButton from 'src/components/URLShortLinkButton';
 describe('AnchorLink', () => {
   const props = {
     anchorLinkId: 'CHART-123',
+    dashboardId: 10,
   };
 
   const globalLocation = window.location;
@@ -64,8 +65,9 @@ describe('AnchorLink', () => {
     expect(wrapper.find(URLShortLinkButton)).toExist();
     expect(wrapper.find(URLShortLinkButton)).toHaveProp({ placement: 'right' });
 
-    const targetUrl = wrapper.find(URLShortLinkButton).prop('url');
-    const hash = targetUrl.slice(targetUrl.indexOf('#') + 1);
-    expect(hash).toBe(props.anchorLinkId);
+    const anchorLinkId = wrapper.find(URLShortLinkButton).prop('anchorLinkId');
+    const dashboardId = wrapper.find(URLShortLinkButton).prop('dashboardId');
+    expect(anchorLinkId).toBe(props.anchorLinkId);
+    expect(dashboardId).toBe(props.dashboardId);
   });
 });
diff --git a/superset-frontend/src/components/AnchorLink/index.jsx b/superset-frontend/src/components/AnchorLink/index.jsx
index 743cb3a3c6493..71ba76dff7a07 100644
--- a/superset-frontend/src/components/AnchorLink/index.jsx
+++ b/superset-frontend/src/components/AnchorLink/index.jsx
@@ -21,11 +21,11 @@ import PropTypes from 'prop-types';
 import { t } from '@superset-ui/core';
 
 import URLShortLinkButton from 'src/components/URLShortLinkButton';
-import getDashboardUrl from 'src/dashboard/util/getDashboardUrl';
 import getLocationHash from 'src/dashboard/util/getLocationHash';
 
 const propTypes = {
   anchorLinkId: PropTypes.string.isRequired,
+  dashboardId: PropTypes.number,
   filters: PropTypes.object,
   showShortLinkButton: PropTypes.bool,
   inFocus: PropTypes.bool,
@@ -70,17 +70,14 @@ class AnchorLink extends React.PureComponent {
   }
 
   render() {
-    const { anchorLinkId, filters, showShortLinkButton, placement } =
+    const { anchorLinkId, dashboardId, showShortLinkButton, placement } =
       this.props;
     return (
       <span className="anchor-link-container" id={anchorLinkId}>
         {showShortLinkButton && (
           <URLShortLinkButton
-            url={getDashboardUrl({
-              pathname: window.location.pathname,
-              filters,
-              hash: anchorLinkId,
-            })}
+            anchorLinkId={anchorLinkId}
+            dashboardId={dashboardId}
             emailSubject={t('Superset chart')}
             emailContent={t('Check out this chart in dashboard:')}
             placement={placement}
diff --git a/superset-frontend/src/components/URLShortLinkButton/URLShortLinkButton.test.tsx b/superset-frontend/src/components/URLShortLinkButton/URLShortLinkButton.test.tsx
index f54a2ba364fbb..36ffc9e339432 100644
--- a/superset-frontend/src/components/URLShortLinkButton/URLShortLinkButton.test.tsx
+++ b/superset-frontend/src/components/URLShortLinkButton/URLShortLinkButton.test.tsx
@@ -23,48 +23,76 @@ import fetchMock from 'fetch-mock';
 import URLShortLinkButton from 'src/components/URLShortLinkButton';
 import ToastContainer from 'src/components/MessageToasts/ToastContainer';
 
-const fakeUrl = 'http://fakeurl.com';
+const DASHBOARD_ID = 10;
+const PERMALINK_PAYLOAD = {
+  key: '123',
+  url: 'http://fakeurl.com/123',
+};
+const FILTER_STATE_PAYLOAD = {
+  value: '{}',
+};
 
-fetchMock.post('glob:*/r/shortner/', fakeUrl);
+const props = {
+  dashboardId: DASHBOARD_ID,
+};
+
+fetchMock.get(
+  `glob:*/api/v1/dashboard/${DASHBOARD_ID}/filter_state*`,
+  FILTER_STATE_PAYLOAD,
+);
+
+fetchMock.post(
+  `glob:*/api/v1/dashboard/${DASHBOARD_ID}/permalink`,
+  PERMALINK_PAYLOAD,
+);
 
 test('renders with default props', () => {
-  render(<URLShortLinkButton />, { useRedux: true });
+  render(<URLShortLinkButton {...props} />, { useRedux: true });
   expect(screen.getByRole('button')).toBeInTheDocument();
 });
 
 test('renders overlay on click', async () => {
-  render(<URLShortLinkButton />, { useRedux: true });
+  render(<URLShortLinkButton {...props} />, { useRedux: true });
   userEvent.click(screen.getByRole('button'));
   expect(await screen.findByRole('tooltip')).toBeInTheDocument();
 });
 
 test('obtains short url', async () => {
-  render(<URLShortLinkButton />, { useRedux: true });
+  render(<URLShortLinkButton {...props} />, { useRedux: true });
   userEvent.click(screen.getByRole('button'));
-  expect(await screen.findByRole('tooltip')).toHaveTextContent(fakeUrl);
+  expect(await screen.findByRole('tooltip')).toHaveTextContent(
+    PERMALINK_PAYLOAD.url,
+  );
 });
 
 test('creates email anchor', async () => {
   const subject = 'Subject';
   const content = 'Content';
 
-  render(<URLShortLinkButton emailSubject={subject} emailContent={content} />, {
-    useRedux: true,
-  });
+  render(
+    <URLShortLinkButton
+      {...props}
+      emailSubject={subject}
+      emailContent={content}
+    />,
+    {
+      useRedux: true,
+    },
+  );
 
-  const href = `mailto:?Subject=${subject}%20&Body=${content}${fakeUrl}`;
+  const href = `mailto:?Subject=${subject}%20&Body=${content}${PERMALINK_PAYLOAD.url}`;
   userEvent.click(screen.getByRole('button'));
   expect(await screen.findByRole('link')).toHaveAttribute('href', href);
 });
 
 test('renders error message on short url error', async () => {
-  fetchMock.mock('glob:*/r/shortner/', 500, {
+  fetchMock.mock(`glob:*/api/v1/dashboard/${DASHBOARD_ID}/permalink`, 500, {
     overwriteRoutes: true,
   });
 
   render(
     <>
-      <URLShortLinkButton />
+      <URLShortLinkButton {...props} />
       <ToastContainer />
     </>,
     { useRedux: true },
diff --git a/superset-frontend/src/components/URLShortLinkButton/index.jsx b/superset-frontend/src/components/URLShortLinkButton/index.jsx
index 1678471b61f79..35795f81a11fa 100644
--- a/superset-frontend/src/components/URLShortLinkButton/index.jsx
+++ b/superset-frontend/src/components/URLShortLinkButton/index.jsx
@@ -21,14 +21,17 @@ import PropTypes from 'prop-types';
 import { t } from '@superset-ui/core';
 import Popover from 'src/components/Popover';
 import CopyToClipboard from 'src/components/CopyToClipboard';
-import { getShortUrl } from 'src/utils/urlUtils';
+import { getDashboardPermalink, getUrlParam } from 'src/utils/urlUtils';
 import withToasts from 'src/components/MessageToasts/withToasts';
+import { URL_PARAMS } from 'src/constants';
+import { getFilterValue } from 'src/dashboard/components/nativeFilters/FilterBar/keyValue';
 
 const propTypes = {
-  url: PropTypes.string,
+  addDangerToast: PropTypes.func.isRequired,
+  anchorLinkId: PropTypes.string,
+  dashboardId: PropTypes.number,
   emailSubject: PropTypes.string,
   emailContent: PropTypes.string,
-  addDangerToast: PropTypes.func.isRequired,
   placement: PropTypes.oneOf(['right', 'left', 'top', 'bottom']),
 };
 
@@ -50,9 +53,20 @@ class URLShortLinkButton extends React.Component {
 
   getCopyUrl(e) {
     e.stopPropagation();
-    getShortUrl(this.props.url)
-      .then(this.onShortUrlSuccess)
-      .catch(this.props.addDangerToast);
+    const nativeFiltersKey = getUrlParam(URL_PARAMS.nativeFiltersKey);
+    if (this.props.dashboardId) {
+      getFilterValue(this.props.dashboardId, nativeFiltersKey)
+        .then(filterState =>
+          getDashboardPermalink(
+            String(this.props.dashboardId),
+            filterState,
+            this.props.anchorLinkId,
+          )
+            .then(this.onShortUrlSuccess)
+            .catch(this.props.addDangerToast),
+        )
+        .catch(this.props.addDangerToast);
+    }
   }
 
   renderPopover() {
@@ -96,7 +110,6 @@ class URLShortLinkButton extends React.Component {
 }
 
 URLShortLinkButton.defaultProps = {
-  url: window.location.href.substring(window.location.origin.length),
   placement: 'left',
   emailSubject: '',
   emailContent: '',
diff --git a/superset-frontend/src/constants.ts b/superset-frontend/src/constants.ts
index b54fc1173c28f..777d5f2a4e434 100644
--- a/superset-frontend/src/constants.ts
+++ b/superset-frontend/src/constants.ts
@@ -71,8 +71,24 @@ export const URL_PARAMS = {
     name: 'force',
     type: 'boolean',
   },
+  permalinkKey: {
+    name: 'permalink_key',
+    type: 'string',
+  },
 } as const;
 
+export const RESERVED_CHART_URL_PARAMS: string[] = [
+  URL_PARAMS.formDataKey.name,
+  URL_PARAMS.sliceId.name,
+  URL_PARAMS.datasetId.name,
+];
+export const RESERVED_DASHBOARD_URL_PARAMS: string[] = [
+  URL_PARAMS.nativeFilters.name,
+  URL_PARAMS.nativeFiltersKey.name,
+  URL_PARAMS.permalinkKey.name,
+  URL_PARAMS.preselectFilters.name,
+];
+
 /**
  * Faster debounce delay for inputs without expensive operation.
  */
diff --git a/superset-frontend/src/dashboard/components/Header/HeaderActionsDropdown/HeaderActionsDropdown.test.tsx b/superset-frontend/src/dashboard/components/Header/HeaderActionsDropdown/HeaderActionsDropdown.test.tsx
index 8996645079472..d1f87ec999e0c 100644
--- a/superset-frontend/src/dashboard/components/Header/HeaderActionsDropdown/HeaderActionsDropdown.test.tsx
+++ b/superset-frontend/src/dashboard/components/Header/HeaderActionsDropdown/HeaderActionsDropdown.test.tsx
@@ -135,8 +135,8 @@ test('should show the share actions', async () => {
   };
   render(setup(canShareProps));
   await openDropdown();
-  expect(screen.getByText('Copy dashboard URL')).toBeInTheDocument();
-  expect(screen.getByText('Share dashboard by email')).toBeInTheDocument();
+  expect(screen.getByText('Copy permalink to clipboard')).toBeInTheDocument();
+  expect(screen.getByText('Share permalink by email')).toBeInTheDocument();
 });
 
 test('should render the "Save Modal" when user can save', async () => {
diff --git a/superset-frontend/src/dashboard/components/Header/HeaderActionsDropdown/index.jsx b/superset-frontend/src/dashboard/components/Header/HeaderActionsDropdown/index.jsx
index b7d368ec32db2..9375c684af90a 100644
--- a/superset-frontend/src/dashboard/components/Header/HeaderActionsDropdown/index.jsx
+++ b/superset-frontend/src/dashboard/components/Header/HeaderActionsDropdown/index.jsx
@@ -257,8 +257,8 @@ class HeaderActionsDropdown extends React.PureComponent {
         {userCanShare && (
           <ShareMenuItems
             url={url}
-            copyMenuItemTitle={t('Copy dashboard URL')}
-            emailMenuItemTitle={t('Share dashboard by email')}
+            copyMenuItemTitle={t('Copy permalink to clipboard')}
+            emailMenuItemTitle={t('Share permalink by email')}
             emailSubject={emailSubject}
             emailBody={emailBody}
             addSuccessToast={addSuccessToast}
diff --git a/superset-frontend/src/dashboard/components/SliceHeaderControls/index.tsx b/superset-frontend/src/dashboard/components/SliceHeaderControls/index.tsx
index 099ec10132235..09d646853d24e 100644
--- a/superset-frontend/src/dashboard/components/SliceHeaderControls/index.tsx
+++ b/superset-frontend/src/dashboard/components/SliceHeaderControls/index.tsx
@@ -21,6 +21,7 @@ import moment from 'moment';
 import {
   Behavior,
   getChartMetadataRegistry,
+  QueryFormData,
   styled,
   t,
 } from '@superset-ui/core';
@@ -98,7 +99,7 @@ export interface SliceHeaderControlsProps {
   isExpanded?: boolean;
   updatedDttm: number | null;
   isFullSize?: boolean;
-  formData: { slice_id: number; datasource: string };
+  formData: Pick<QueryFormData, 'slice_id' | 'datasource'>;
   onExploreChart: () => void;
 
   forceRefresh: (sliceId: number, dashboardId: number) => void;
@@ -309,8 +310,8 @@ class SliceHeaderControls extends React.PureComponent<
 
         {supersetCanShare && (
           <ShareMenuItems
-            copyMenuItemTitle={t('Copy chart URL')}
-            emailMenuItemTitle={t('Share chart by email')}
+            copyMenuItemTitle={t('Copy permalink to clipboard')}
+            emailMenuItemTitle={t('Share permalink by email')}
             emailSubject={t('Superset chart')}
             emailBody={t('Check out this chart: ')}
             addSuccessToast={addSuccessToast}
diff --git a/superset-frontend/src/dashboard/components/gridComponents/Tab.jsx b/superset-frontend/src/dashboard/components/gridComponents/Tab.jsx
index 17691b842bc68..cf051baefbb90 100644
--- a/superset-frontend/src/dashboard/components/gridComponents/Tab.jsx
+++ b/superset-frontend/src/dashboard/components/gridComponents/Tab.jsx
@@ -30,6 +30,7 @@ export const RENDER_TAB = 'RENDER_TAB';
 export const RENDER_TAB_CONTENT = 'RENDER_TAB_CONTENT';
 
 const propTypes = {
+  dashboardId: PropTypes.number.isRequired,
   id: PropTypes.string.isRequired,
   parentId: PropTypes.string.isRequired,
   component: componentShape.isRequired,
@@ -237,6 +238,7 @@ export default class Tab extends React.PureComponent {
             {!editMode && (
               <AnchorLink
                 anchorLinkId={component.id}
+                dashboardId={this.props.dashboardId}
                 filters={filters}
                 showShortLinkButton
                 placement={index >= 5 ? 'left' : 'right'}
diff --git a/superset-frontend/src/dashboard/components/menu/ShareMenuItems/ShareMenuItems.test.tsx b/superset-frontend/src/dashboard/components/menu/ShareMenuItems/ShareMenuItems.test.tsx
index da7d196bd8b50..579f9d4b69077 100644
--- a/superset-frontend/src/dashboard/components/menu/ShareMenuItems/ShareMenuItems.test.tsx
+++ b/superset-frontend/src/dashboard/components/menu/ShareMenuItems/ShareMenuItems.test.tsx
@@ -31,7 +31,7 @@ const DASHBOARD_ID = '26';
 const createProps = () => ({
   addDangerToast: jest.fn(),
   addSuccessToast: jest.fn(),
-  url: `/superset/dashboard/${DASHBOARD_ID}/?preselect_filters=%7B%7D`,
+  url: `/superset/dashboard/${DASHBOARD_ID}`,
   copyMenuItemTitle: 'Copy dashboard URL',
   emailMenuItemTitle: 'Share dashboard by email',
   emailSubject: 'Superset dashboard COVID Vaccine Dashboard',
@@ -45,10 +45,10 @@ beforeAll((): void => {
   // @ts-ignore
   delete window.location;
   fetchMock.post(
-    'http://localhost/r/shortner/',
-    { body: 'http://localhost:8088/r/3' },
+    `http://localhost/api/v1/dashboard/${DASHBOARD_ID}/permalink`,
+    { key: '123', url: 'http://localhost/superset/dashboard/p/123/' },
     {
-      sendAsJson: false,
+      sendAsJson: true,
     },
   );
 });
@@ -104,7 +104,7 @@ test('Click on "Copy dashboard URL" and succeed', async () => {
 
   await waitFor(() => {
     expect(spy).toBeCalledTimes(1);
-    expect(spy).toBeCalledWith('http://localhost:8088/r/3');
+    expect(spy).toBeCalledWith('http://localhost/superset/dashboard/p/123/');
     expect(props.addSuccessToast).toBeCalledTimes(1);
     expect(props.addSuccessToast).toBeCalledWith('Copied to clipboard!');
     expect(props.addDangerToast).toBeCalledTimes(0);
@@ -130,7 +130,7 @@ test('Click on "Copy dashboard URL" and fail', async () => {
 
   await waitFor(() => {
     expect(spy).toBeCalledTimes(1);
-    expect(spy).toBeCalledWith('http://localhost:8088/r/3');
+    expect(spy).toBeCalledWith('http://localhost/superset/dashboard/p/123/');
     expect(props.addSuccessToast).toBeCalledTimes(0);
     expect(props.addDangerToast).toBeCalledTimes(1);
     expect(props.addDangerToast).toBeCalledWith(
@@ -159,14 +159,14 @@ test('Click on "Share dashboard by email" and succeed', async () => {
   await waitFor(() => {
     expect(props.addDangerToast).toBeCalledTimes(0);
     expect(window.location.href).toBe(
-      'mailto:?Subject=Superset%20dashboard%20COVID%20Vaccine%20Dashboard%20&Body=Check%20out%20this%20dashboard%3A%20http%3A%2F%2Flocalhost%3A8088%2Fr%2F3',
+      'mailto:?Subject=Superset%20dashboard%20COVID%20Vaccine%20Dashboard%20&Body=Check%20out%20this%20dashboard%3A%20http%3A%2F%2Flocalhost%2Fsuperset%2Fdashboard%2Fp%2F123%2F',
     );
   });
 });
 
 test('Click on "Share dashboard by email" and fail', async () => {
   fetchMock.post(
-    'http://localhost/r/shortner/',
+    `http://localhost/api/v1/dashboard/${DASHBOARD_ID}/permalink`,
     { status: 404 },
     { overwriteRoutes: true },
   );
diff --git a/superset-frontend/src/dashboard/components/menu/ShareMenuItems/index.tsx b/superset-frontend/src/dashboard/components/menu/ShareMenuItems/index.tsx
index cb31503ac8611..c70e47dc3d01d 100644
--- a/superset-frontend/src/dashboard/components/menu/ShareMenuItems/index.tsx
+++ b/superset-frontend/src/dashboard/components/menu/ShareMenuItems/index.tsx
@@ -17,19 +17,16 @@
  * under the License.
  */
 import React from 'react';
-import { useUrlShortener } from 'src/hooks/useUrlShortener';
 import copyTextToClipboard from 'src/utils/copy';
-import { t, logging } from '@superset-ui/core';
+import { t, logging, QueryFormData } from '@superset-ui/core';
 import { Menu } from 'src/components/Menu';
-import { getUrlParam } from 'src/utils/urlUtils';
-import { postFormData } from 'src/explore/exploreUtils/formData';
-import { useTabId } from 'src/hooks/useTabId';
-import { URL_PARAMS } from 'src/constants';
-import { mountExploreUrl } from 'src/explore/exploreUtils';
 import {
-  createFilterKey,
-  getFilterValue,
-} from 'src/dashboard/components/nativeFilters/FilterBar/keyValue';
+  getChartPermalink,
+  getDashboardPermalink,
+  getUrlParam,
+} from 'src/utils/urlUtils';
+import { RESERVED_DASHBOARD_URL_PARAMS, URL_PARAMS } from 'src/constants';
+import { getFilterValue } from 'src/dashboard/components/nativeFilters/FilterBar/keyValue';
 
 interface ShareMenuItemProps {
   url?: string;
@@ -40,12 +37,11 @@ interface ShareMenuItemProps {
   addDangerToast: Function;
   addSuccessToast: Function;
   dashboardId?: string;
-  formData?: { slice_id: number; datasource: string };
+  formData?: Pick<QueryFormData, 'slice_id' | 'datasource'>;
 }
 
 const ShareMenuItems = (props: ShareMenuItemProps) => {
   const {
-    url,
     copyMenuItemTitle,
     emailMenuItemTitle,
     emailSubject,
@@ -57,47 +53,25 @@ const ShareMenuItems = (props: ShareMenuItemProps) => {
     ...rest
   } = props;
 
-  const tabId = useTabId();
-
-  const getShortUrl = useUrlShortener(url || '');
-
-  async function getCopyUrl() {
-    const risonObj = getUrlParam(URL_PARAMS.nativeFilters);
-    if (typeof risonObj === 'object' || !dashboardId) return null;
-    const prevData = await getFilterValue(
-      dashboardId,
-      getUrlParam(URL_PARAMS.nativeFiltersKey),
-    );
-    const newDataMaskKey = await createFilterKey(
-      dashboardId,
-      JSON.stringify(prevData),
-      tabId,
-    );
-    const newUrl = new URL(`${window.location.origin}${url}`);
-    newUrl.searchParams.set(URL_PARAMS.nativeFilters.name, newDataMaskKey);
-    return `${newUrl.pathname}${newUrl.search}`;
-  }
-
   async function generateUrl() {
+    // chart
     if (formData) {
-      const key = await postFormData(
-        parseInt(formData.datasource.split('_')[0], 10),
-        formData,
-        formData.slice_id,
-        tabId,
-      );
-      return `${window.location.origin}${mountExploreUrl(null, {
-        [URL_PARAMS.formDataKey.name]: key,
-        [URL_PARAMS.sliceId.name]: formData.slice_id,
-      })}`;
+      // we need to remove reserved dashboard url params
+      return getChartPermalink(formData, RESERVED_DASHBOARD_URL_PARAMS);
+    }
+    // dashboard
+    const nativeFiltersKey = getUrlParam(URL_PARAMS.nativeFiltersKey);
+    let filterState = {};
+    if (nativeFiltersKey && dashboardId) {
+      filterState = await getFilterValue(dashboardId, nativeFiltersKey);
     }
-    const copyUrl = await getCopyUrl();
-    return getShortUrl(copyUrl);
+    return getDashboardPermalink(String(dashboardId), filterState);
   }
 
   async function onCopyLink() {
     try {
-      await copyTextToClipboard(await generateUrl());
+      const url = await generateUrl();
+      await copyTextToClipboard(url);
       addSuccessToast(t('Copied to clipboard!'));
     } catch (error) {
       logging.error(error);
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/index.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/index.tsx
index 73a589312acc6..309d75dac9a80 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/index.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/index.tsx
@@ -165,6 +165,11 @@ export interface FiltersBarProps {
   offset: number;
 }
 
+const EXCLUDED_URL_PARAMS: string[] = [
+  URL_PARAMS.nativeFilters.name,
+  URL_PARAMS.permalinkKey.name,
+];
+
 const publishDataMask = debounce(
   async (
     history,
@@ -177,9 +182,9 @@ const publishDataMask = debounce(
     const { search } = location;
     const previousParams = new URLSearchParams(search);
     const newParams = new URLSearchParams();
-    let dataMaskKey: string;
+    let dataMaskKey: string | null;
     previousParams.forEach((value, key) => {
-      if (key !== URL_PARAMS.nativeFilters.name) {
+      if (!EXCLUDED_URL_PARAMS.includes(key)) {
         newParams.append(key, value);
       }
     });
@@ -200,7 +205,9 @@ const publishDataMask = debounce(
     } else {
       dataMaskKey = await createFilterKey(dashboardId, dataMask, tabId);
     }
-    newParams.set(URL_PARAMS.nativeFiltersKey.name, dataMaskKey);
+    if (dataMaskKey) {
+      newParams.set(URL_PARAMS.nativeFiltersKey.name, dataMaskKey);
+    }
 
     // pathname could be updated somewhere else through window.history
     // keep react router history in sync with window history
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/keyValue.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/keyValue.tsx
index 9682fdb7b8f0e..ec9735f091690 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/keyValue.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/keyValue.tsx
@@ -17,6 +17,7 @@
  * under the License.
  */
 import { SupersetClient, logging } from '@superset-ui/core';
+import { DashboardPermalinkValue } from 'src/dashboard/types';
 
 const assembleEndpoint = (
   dashId: string | number,
@@ -58,7 +59,7 @@ export const createFilterKey = (
     endpoint: assembleEndpoint(dashId, undefined, tabId),
     jsonPayload: { value },
   })
-    .then(r => r.json.key)
+    .then(r => r.json.key as string)
     .catch(err => {
       logging.error(err);
       return null;
@@ -73,3 +74,13 @@ export const getFilterValue = (dashId: string | number, key: string) =>
       logging.error(err);
       return null;
     });
+
+export const getPermalinkValue = (key: string) =>
+  SupersetClient.get({
+    endpoint: `/api/v1/dashboard/permalink/${key}`,
+  })
+    .then(({ json }) => json as DashboardPermalinkValue)
+    .catch(err => {
+      logging.error(err);
+      return null;
+    });
diff --git a/superset-frontend/src/dashboard/containers/DashboardPage.tsx b/superset-frontend/src/dashboard/containers/DashboardPage.tsx
index 878f3d68695ae..e5fff328724d5 100644
--- a/superset-frontend/src/dashboard/containers/DashboardPage.tsx
+++ b/superset-frontend/src/dashboard/containers/DashboardPage.tsx
@@ -49,7 +49,10 @@ import { URL_PARAMS } from 'src/constants';
 import { getUrlParam } from 'src/utils/urlUtils';
 import { canUserEditDashboard } from 'src/dashboard/util/findPermission';
 import { getFilterSets } from '../actions/nativeFilters';
-import { getFilterValue } from '../components/nativeFilters/FilterBar/keyValue';
+import {
+  getFilterValue,
+  getPermalinkValue,
+} from '../components/nativeFilters/FilterBar/keyValue';
 import { filterCardPopoverStyle } from '../styles';
 
 export const MigrationContext = React.createContext(
@@ -161,12 +164,17 @@ const DashboardPage: FC = () => {
   useEffect(() => {
     // eslint-disable-next-line consistent-return
     async function getDataMaskApplied() {
+      const permalinkKey = getUrlParam(URL_PARAMS.permalinkKey);
       const nativeFilterKeyValue = getUrlParam(URL_PARAMS.nativeFiltersKey);
       let dataMaskFromUrl = nativeFilterKeyValue || {};
 
       const isOldRison = getUrlParam(URL_PARAMS.nativeFilters);
-      // check if key from key_value api and get datamask
-      if (nativeFilterKeyValue) {
+      if (permalinkKey) {
+        const permalinkValue = await getPermalinkValue(permalinkKey);
+        if (permalinkValue) {
+          dataMaskFromUrl = permalinkValue.state.filterState;
+        }
+      } else if (nativeFilterKeyValue) {
         dataMaskFromUrl = await getFilterValue(id, nativeFilterKeyValue);
       }
       if (isOldRison) {
diff --git a/superset-frontend/src/dashboard/types.ts b/superset-frontend/src/dashboard/types.ts
index fbdf362eea709..dffbd9fbe0be8 100644
--- a/superset-frontend/src/dashboard/types.ts
+++ b/superset-frontend/src/dashboard/types.ts
@@ -144,3 +144,11 @@ type ActiveFilter = {
 export type ActiveFilters = {
   [key: string]: ActiveFilter;
 };
+
+export type DashboardPermalinkValue = {
+  dashboardId: string;
+  state: {
+    filterState: DataMaskStateWithId;
+    hash: string;
+  };
+};
diff --git a/superset-frontend/src/explore/components/EmbedCodeButton.jsx b/superset-frontend/src/explore/components/EmbedCodeButton.jsx
index 57e6d30de4532..71f77a4621fa2 100644
--- a/superset-frontend/src/explore/components/EmbedCodeButton.jsx
+++ b/superset-frontend/src/explore/components/EmbedCodeButton.jsx
@@ -25,6 +25,7 @@ import Icons from 'src/components/Icons';
 import { Tooltip } from 'src/components/Tooltip';
 import CopyToClipboard from 'src/components/CopyToClipboard';
 import { URL_PARAMS } from 'src/constants';
+import { getChartPermalink } from 'src/utils/urlUtils';
 
 export default class EmbedCodeButton extends React.Component {
   constructor(props) {
@@ -32,8 +33,11 @@ export default class EmbedCodeButton extends React.Component {
     this.state = {
       height: '400',
       width: '600',
+      url: '',
+      errorMessage: '',
     };
     this.handleInputChange = this.handleInputChange.bind(this);
+    this.updateUrl = this.updateUrl.bind(this);
   }
 
   handleInputChange(e) {
@@ -43,8 +47,21 @@ export default class EmbedCodeButton extends React.Component {
     this.setState(data);
   }
 
+  updateUrl() {
+    this.setState({ url: '' });
+    getChartPermalink(this.props.formData)
+      .then(url => this.setState({ errorMessage: '', url }))
+      .catch(() => {
+        this.setState({ errorMessage: t('Error') });
+        this.props.addDangerToast(
+          t('Sorry, something went wrong. Try again later.'),
+        );
+      });
+  }
+
   generateEmbedHTML() {
-    const srcLink = `${window.location.href}&${URL_PARAMS.standalone.name}=1&height=${this.state.height}`;
+    if (!this.state.url) return '';
+    const srcLink = `${this.state.url}?${URL_PARAMS.standalone.name}=1&height=${this.state.height}`;
     return (
       '<iframe\n' +
       `  width="${this.state.width}"\n` +
@@ -60,6 +77,8 @@ export default class EmbedCodeButton extends React.Component {
 
   renderPopoverContent() {
     const html = this.generateEmbedHTML();
+    const text =
+      this.state.errorMessage || html || t('Generating link, please wait..');
     return (
       <div id="embed-code-popover" data-test="embed-code-popover">
         <div className="row">
@@ -67,7 +86,8 @@ export default class EmbedCodeButton extends React.Component {
             <textarea
               data-test="embed-code-textarea"
               name="embedCode"
-              value={html}
+              disabled={!html}
+              value={text}
               rows="4"
               readOnly
               className="form-control input-sm"
@@ -125,6 +145,7 @@ export default class EmbedCodeButton extends React.Component {
       <Popover
         trigger="click"
         placement="left"
+        onClick={this.updateUrl}
         content={this.renderPopoverContent()}
       >
         <Tooltip
diff --git a/superset-frontend/src/explore/components/EmbedCodeButton.test.jsx b/superset-frontend/src/explore/components/EmbedCodeButton.test.jsx
index de8b2fbba01f1..87af313880ca6 100644
--- a/superset-frontend/src/explore/components/EmbedCodeButton.test.jsx
+++ b/superset-frontend/src/explore/components/EmbedCodeButton.test.jsx
@@ -34,12 +34,14 @@ describe('EmbedCodeButton', () => {
   });
 
   it('returns correct embed code', () => {
-    const href = 'http://localhost/explore?form_data_key=xxxxxxxxx';
-    Object.defineProperty(window, 'location', { value: { href } });
-    const wrapper = mount(<EmbedCodeButton />);
+    const wrapper = mount(
+      <EmbedCodeButton formData={{}} addDangerToast={() => {}} />,
+    );
+    const url = 'http://localhost/explore/p/100';
     wrapper.find(EmbedCodeButton).setState({
       height: '1000',
       width: '2000',
+      url,
     });
     const embedHTML =
       `${
@@ -49,7 +51,7 @@ describe('EmbedCodeButton', () => {
         '  seamless\n' +
         '  frameBorder="0"\n' +
         '  scrolling="no"\n' +
-        `  src="${href}&standalone=`
+        `  src="${url}?standalone=`
       }${DashboardStandaloneMode.HIDE_NAV}&height=1000"\n` +
       `>\n` +
       `</iframe>`;
diff --git a/superset-frontend/src/explore/components/ExploreActionButtons.tsx b/superset-frontend/src/explore/components/ExploreActionButtons.tsx
index 95d3c1470fd87..adb85e11d5d29 100644
--- a/superset-frontend/src/explore/components/ExploreActionButtons.tsx
+++ b/superset-frontend/src/explore/components/ExploreActionButtons.tsx
@@ -21,7 +21,9 @@ import cx from 'classnames';
 import { QueryFormData, t } from '@superset-ui/core';
 import Icons from 'src/components/Icons';
 import { Tooltip } from 'src/components/Tooltip';
+import { Slice } from 'src/types/Chart';
 import copyTextToClipboard from 'src/utils/copy';
+import { getChartPermalink } from 'src/utils/urlUtils';
 import withToasts from 'src/components/MessageToasts/withToasts';
 import EmbedCodeButton from './EmbedCodeButton';
 import { exportChart } from '../exploreUtils';
@@ -45,7 +47,7 @@ type ExploreActionButtonsProps = {
   chartStatus: string;
   latestQueryFormData: QueryFormData;
   queriesResponse: {};
-  slice: { slice_name: string };
+  slice: Slice;
   addDangerToast: Function;
   addSuccessToast: Function;
 };
@@ -101,26 +103,26 @@ const ExploreActionButtons = (props: ExploreActionButtonsProps) => {
     addSuccessToast,
   } = props;
 
-  const copyTooltipText = t('Copy chart URL to clipboard');
+  const copyTooltipText = t('Copy permalink to clipboard');
   const [copyTooltip, setCopyTooltip] = useState(copyTooltipText);
 
   const doCopyLink = async () => {
     try {
       setCopyTooltip(t('Loading...'));
-      const url = window.location.href;
+      const url = await getChartPermalink(latestQueryFormData);
       await copyTextToClipboard(url);
       setCopyTooltip(t('Copied to clipboard!'));
       addSuccessToast(t('Copied to clipboard!'));
     } catch (error) {
-      setCopyTooltip(t('Sorry, your browser does not support copying.'));
-      addDangerToast(t('Sorry, your browser does not support copying.'));
+      setCopyTooltip(t('Copying permalink failed.'));
+      addDangerToast(t('Sorry, something went wrong. Try again later.'));
     }
   };
 
   const doShareEmail = async () => {
     try {
       const subject = t('Superset Chart');
-      const url = window.location.href;
+      const url = await getChartPermalink(latestQueryFormData);
       const body = encodeURIComponent(t('%s%s', 'Check out this chart: ', url));
       window.location.href = `mailto:?Subject=${subject}%20&Body=${body}`;
     } catch (error) {
@@ -173,10 +175,13 @@ const ExploreActionButtons = (props: ExploreActionButtonsProps) => {
           />
           <ActionButton
             prefixIcon={<Icons.Email iconSize="l" />}
-            tooltip={t('Share chart by email')}
+            tooltip={t('Share permalink by email')}
             onClick={doShareEmail}
           />
-          <EmbedCodeButton />
+          <EmbedCodeButton
+            formData={latestQueryFormData}
+            addDangerToast={addDangerToast}
+          />
           <ActionButton
             prefixIcon={<Icons.FileTextOutlined iconSize="m" />}
             text=".JSON"
diff --git a/superset-frontend/src/explore/components/ExploreViewContainer/index.jsx b/superset-frontend/src/explore/components/ExploreViewContainer/index.jsx
index b33f0caa1ef02..eba2fc8ebdeac 100644
--- a/superset-frontend/src/explore/components/ExploreViewContainer/index.jsx
+++ b/superset-frontend/src/explore/components/ExploreViewContainer/index.jsx
@@ -36,7 +36,7 @@ import {
   setItem,
   LocalStorageKeys,
 } from 'src/utils/localStorageHelpers';
-import { URL_PARAMS } from 'src/constants';
+import { RESERVED_CHART_URL_PARAMS, URL_PARAMS } from 'src/constants';
 import { getUrlParam } from 'src/utils/urlUtils';
 import cx from 'classnames';
 import * as chartActions from 'src/components/Chart/chartAction';
@@ -177,13 +177,7 @@ const updateHistory = debounce(
 
     const urlParams = payload?.url_params || {};
     Object.entries(urlParams).forEach(([key, value]) => {
-      if (
-        ![
-          URL_PARAMS.sliceId.name,
-          URL_PARAMS.formDataKey.name,
-          URL_PARAMS.datasetId.name,
-        ].includes(key)
-      ) {
+      if (!RESERVED_CHART_URL_PARAMS.includes(key)) {
         additionalParam[key] = value;
       }
     });
diff --git a/superset-frontend/src/hooks/useUrlShortener.ts b/superset-frontend/src/hooks/useUrlShortener.ts
deleted file mode 100644
index 33cb636b4527c..0000000000000
--- a/superset-frontend/src/hooks/useUrlShortener.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License.  You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-import { useState, useEffect } from 'react';
-import { getShortUrl as getShortUrlUtil } from 'src/utils/urlUtils';
-
-export function useUrlShortener(url: string): Function {
-  const [update, setUpdate] = useState(false);
-  const [shortUrl, setShortUrl] = useState('');
-
-  async function getShortUrl(urlOverride?: string) {
-    if (update) {
-      const newShortUrl = await getShortUrlUtil(urlOverride || url);
-      setShortUrl(newShortUrl);
-      setUpdate(false);
-      return newShortUrl;
-    }
-    return shortUrl;
-  }
-
-  useEffect(() => setUpdate(true), [url]);
-
-  return getShortUrl;
-}
diff --git a/superset-frontend/src/utils/urlUtils.ts b/superset-frontend/src/utils/urlUtils.ts
index 00633b0843b9c..ffaf5621f2c08 100644
--- a/superset-frontend/src/utils/urlUtils.ts
+++ b/superset-frontend/src/utils/urlUtils.ts
@@ -16,10 +16,17 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { SupersetClient } from '@superset-ui/core';
+import { JsonObject, QueryFormData, SupersetClient } from '@superset-ui/core';
 import rison from 'rison';
+import { isEmpty } from 'lodash';
 import { getClientErrorObject } from './getClientErrorObject';
-import { URL_PARAMS } from '../constants';
+import {
+  RESERVED_CHART_URL_PARAMS,
+  RESERVED_DASHBOARD_URL_PARAMS,
+  URL_PARAMS,
+} from '../constants';
+import { getActiveFilters } from '../dashboard/util/activeDashboardFilters';
+import serializeActiveFilterValues from '../dashboard/util/serializeActiveFilterValues';
 
 export type UrlParamType = 'string' | 'number' | 'boolean' | 'object' | 'rison';
 export type UrlParam = typeof URL_PARAMS[keyof typeof URL_PARAMS];
@@ -72,14 +79,55 @@ export function getUrlParam({ name, type }: UrlParam): unknown {
   }
 }
 
-export function getShortUrl(longUrl: string) {
+function getUrlParams(excludedParams: string[]): URLSearchParams {
+  const urlParams = new URLSearchParams();
+  const currentParams = new URLSearchParams(window.location.search);
+  currentParams.forEach((value, key) => {
+    if (!excludedParams.includes(key)) urlParams.append(key, value);
+  });
+  return urlParams;
+}
+
+type UrlParamEntries = [string, string][];
+
+function getUrlParamEntries(urlParams: URLSearchParams): UrlParamEntries {
+  const urlEntries: [string, string][] = [];
+  urlParams.forEach((value, key) => urlEntries.push([key, value]));
+  return urlEntries;
+}
+
+function getChartUrlParams(excludedUrlParams?: string[]): UrlParamEntries {
+  const excludedParams = excludedUrlParams || RESERVED_CHART_URL_PARAMS;
+  const urlParams = getUrlParams(excludedParams);
+  const filterBoxFilters = getActiveFilters();
+  if (
+    !isEmpty(filterBoxFilters) &&
+    !excludedParams.includes(URL_PARAMS.preselectFilters.name)
+  )
+    urlParams.append(
+      URL_PARAMS.preselectFilters.name,
+      JSON.stringify(serializeActiveFilterValues(getActiveFilters())),
+    );
+  return getUrlParamEntries(urlParams);
+}
+
+function getDashboardUrlParams(): UrlParamEntries {
+  const urlParams = getUrlParams(RESERVED_DASHBOARD_URL_PARAMS);
+  const filterBoxFilters = getActiveFilters();
+  if (!isEmpty(filterBoxFilters))
+    urlParams.append(
+      URL_PARAMS.preselectFilters.name,
+      JSON.stringify(serializeActiveFilterValues(getActiveFilters())),
+    );
+  return getUrlParamEntries(urlParams);
+}
+
+function getPermalink(endpoint: string, jsonPayload: JsonObject) {
   return SupersetClient.post({
-    endpoint: '/r/shortner/',
-    postPayload: { data: `/${longUrl}` }, // note: url should contain 2x '/' to redirect properly
-    parseMethod: 'text',
-    stringify: false, // the url saves with an extra set of string quotes without this
+    endpoint,
+    jsonPayload,
   })
-    .then(({ text }) => text)
+    .then(result => result.json.url as string)
     .catch(response =>
       // @ts-ignore
       getClientErrorObject(response).then(({ error, statusText }) =>
@@ -87,3 +135,26 @@ export function getShortUrl(longUrl: string) {
       ),
     );
 }
+
+export function getChartPermalink(
+  formData: Pick<QueryFormData, 'datasource'>,
+  excludedUrlParams?: string[],
+) {
+  return getPermalink('/api/v1/explore/permalink', {
+    formData,
+    urlParams: getChartUrlParams(excludedUrlParams),
+  });
+}
+
+export function getDashboardPermalink(
+  dashboardId: string,
+  filterState: JsonObject,
+  hash?: string,
+) {
+  // only encode filter box state if non-empty
+  return getPermalink(`/api/v1/dashboard/${dashboardId}/permalink`, {
+    filterState,
+    urlParams: getDashboardUrlParams(),
+    hash,
+  });
+}
diff --git a/superset/config.py b/superset/config.py
index 6579719ea81cc..7aa0b42694f27 100644
--- a/superset/config.py
+++ b/superset/config.py
@@ -44,6 +44,7 @@
 
 from superset.constants import CHANGE_ME_SECRET_KEY
 from superset.jinja_context import BaseTemplateProcessor
+from superset.key_value.types import KeyType
 from superset.stats_logger import DummyStatsLogger
 from superset.typing import CacheConfig
 from superset.utils.core import is_test, parse_boolean_string
@@ -611,6 +612,8 @@ def _try_json_readsha(filepath: str, length: int) -> Optional[str]:
 # store cache keys by datasource UID (via CacheKey) for custom processing/invalidation
 STORE_CACHE_KEYS_IN_METADATA_DB = False
 
+PERMALINK_KEY_TYPE: KeyType = "uuid"
+
 # CORS Options
 ENABLE_CORS = False
 CORS_OPTIONS: Dict[Any, Any] = {}
diff --git a/superset/dashboards/filter_state/api.py b/superset/dashboards/filter_state/api.py
index 6add94558fc6a..efe6e69178301 100644
--- a/superset/dashboards/filter_state/api.py
+++ b/superset/dashboards/filter_state/api.py
@@ -25,12 +25,12 @@
 from superset.dashboards.filter_state.commands.get import GetFilterStateCommand
 from superset.dashboards.filter_state.commands.update import UpdateFilterStateCommand
 from superset.extensions import event_logger
-from superset.key_value.api import KeyValueRestApi
+from superset.temporary_cache.api import TemporaryCacheRestApi
 
 logger = logging.getLogger(__name__)
 
 
-class DashboardFilterStateRestApi(KeyValueRestApi):
+class DashboardFilterStateRestApi(TemporaryCacheRestApi):
     class_permission_name = "DashboardFilterStateRestApi"
     resource_name = "dashboard"
     openapi_spec_tag = "Dashboard Filter State"
@@ -74,7 +74,7 @@ def post(self, pk: int) -> Response:
             content:
               application/json:
                 schema:
-                  $ref: '#/components/schemas/KeyValuePostSchema'
+                  $ref: '#/components/schemas/TemporaryCachePostSchema'
           responses:
             201:
               description: The value was stored successfully.
@@ -128,7 +128,7 @@ def put(self, pk: int, key: str) -> Response:
             content:
               application/json:
                 schema:
-                  $ref: '#/components/schemas/KeyValuePutSchema'
+                  $ref: '#/components/schemas/TemporaryCachePutSchema'
           responses:
             200:
               description: The value was stored successfully.
diff --git a/superset/dashboards/filter_state/commands/create.py b/superset/dashboards/filter_state/commands/create.py
index f1abe8a5f0e92..a37ee072fa75e 100644
--- a/superset/dashboards/filter_state/commands/create.py
+++ b/superset/dashboards/filter_state/commands/create.py
@@ -18,13 +18,13 @@
 
 from superset.dashboards.dao import DashboardDAO
 from superset.extensions import cache_manager
-from superset.key_value.commands.create import CreateKeyValueCommand
-from superset.key_value.commands.entry import Entry
-from superset.key_value.commands.parameters import CommandParameters
-from superset.key_value.utils import cache_key, random_key
+from superset.temporary_cache.commands.create import CreateTemporaryCacheCommand
+from superset.temporary_cache.commands.entry import Entry
+from superset.temporary_cache.commands.parameters import CommandParameters
+from superset.temporary_cache.utils import cache_key, random_key
 
 
-class CreateFilterStateCommand(CreateKeyValueCommand):
+class CreateFilterStateCommand(CreateTemporaryCacheCommand):
     def create(self, cmd_params: CommandParameters) -> str:
         resource_id = cmd_params.resource_id
         actor = cmd_params.actor
diff --git a/superset/dashboards/filter_state/commands/delete.py b/superset/dashboards/filter_state/commands/delete.py
index 1ad3f5e547367..155c63f1084c6 100644
--- a/superset/dashboards/filter_state/commands/delete.py
+++ b/superset/dashboards/filter_state/commands/delete.py
@@ -18,14 +18,14 @@
 
 from superset.dashboards.dao import DashboardDAO
 from superset.extensions import cache_manager
-from superset.key_value.commands.delete import DeleteKeyValueCommand
-from superset.key_value.commands.entry import Entry
-from superset.key_value.commands.exceptions import KeyValueAccessDeniedError
-from superset.key_value.commands.parameters import CommandParameters
-from superset.key_value.utils import cache_key
+from superset.temporary_cache.commands.delete import DeleteTemporaryCacheCommand
+from superset.temporary_cache.commands.entry import Entry
+from superset.temporary_cache.commands.exceptions import TemporaryCacheAccessDeniedError
+from superset.temporary_cache.commands.parameters import CommandParameters
+from superset.temporary_cache.utils import cache_key
 
 
-class DeleteFilterStateCommand(DeleteKeyValueCommand):
+class DeleteFilterStateCommand(DeleteTemporaryCacheCommand):
     def delete(self, cmd_params: CommandParameters) -> bool:
         resource_id = cmd_params.resource_id
         actor = cmd_params.actor
@@ -35,7 +35,7 @@ def delete(self, cmd_params: CommandParameters) -> bool:
             entry: Entry = cache_manager.filter_state_cache.get(key)
             if entry:
                 if entry["owner"] != actor.get_user_id():
-                    raise KeyValueAccessDeniedError()
+                    raise TemporaryCacheAccessDeniedError()
                 tab_id = cmd_params.tab_id
                 contextual_key = cache_key(session.get("_id"), tab_id, resource_id)
                 cache_manager.filter_state_cache.delete(contextual_key)
diff --git a/superset/dashboards/filter_state/commands/get.py b/superset/dashboards/filter_state/commands/get.py
index 509960fdb3829..9cdd5bcddcb48 100644
--- a/superset/dashboards/filter_state/commands/get.py
+++ b/superset/dashboards/filter_state/commands/get.py
@@ -20,12 +20,12 @@
 
 from superset.dashboards.dao import DashboardDAO
 from superset.extensions import cache_manager
-from superset.key_value.commands.get import GetKeyValueCommand
-from superset.key_value.commands.parameters import CommandParameters
-from superset.key_value.utils import cache_key
+from superset.temporary_cache.commands.get import GetTemporaryCacheCommand
+from superset.temporary_cache.commands.parameters import CommandParameters
+from superset.temporary_cache.utils import cache_key
 
 
-class GetFilterStateCommand(GetKeyValueCommand):
+class GetFilterStateCommand(GetTemporaryCacheCommand):
     def __init__(self, cmd_params: CommandParameters) -> None:
         super().__init__(cmd_params)
         config = app.config["FILTER_STATE_CACHE_CONFIG"]
diff --git a/superset/dashboards/filter_state/commands/update.py b/superset/dashboards/filter_state/commands/update.py
index 5d8d9151dd8cd..6a9cd3931c9c8 100644
--- a/superset/dashboards/filter_state/commands/update.py
+++ b/superset/dashboards/filter_state/commands/update.py
@@ -20,14 +20,14 @@
 
 from superset.dashboards.dao import DashboardDAO
 from superset.extensions import cache_manager
-from superset.key_value.commands.entry import Entry
-from superset.key_value.commands.exceptions import KeyValueAccessDeniedError
-from superset.key_value.commands.parameters import CommandParameters
-from superset.key_value.commands.update import UpdateKeyValueCommand
-from superset.key_value.utils import cache_key, random_key
+from superset.temporary_cache.commands.entry import Entry
+from superset.temporary_cache.commands.exceptions import TemporaryCacheAccessDeniedError
+from superset.temporary_cache.commands.parameters import CommandParameters
+from superset.temporary_cache.commands.update import UpdateTemporaryCacheCommand
+from superset.temporary_cache.utils import cache_key, random_key
 
 
-class UpdateFilterStateCommand(UpdateKeyValueCommand):
+class UpdateFilterStateCommand(UpdateTemporaryCacheCommand):
     def update(self, cmd_params: CommandParameters) -> Optional[str]:
         resource_id = cmd_params.resource_id
         actor = cmd_params.actor
@@ -41,7 +41,7 @@ def update(self, cmd_params: CommandParameters) -> Optional[str]:
             if entry:
                 user_id = actor.get_user_id()
                 if entry["owner"] != user_id:
-                    raise KeyValueAccessDeniedError()
+                    raise TemporaryCacheAccessDeniedError()
 
                 # Generate a new key if tab_id changes or equals 0
                 contextual_key = cache_key(
diff --git a/superset/key_value/commands/__init__.py b/superset/dashboards/permalink/__init__.py
similarity index 100%
rename from superset/key_value/commands/__init__.py
rename to superset/dashboards/permalink/__init__.py
diff --git a/superset/dashboards/permalink/api.py b/superset/dashboards/permalink/api.py
new file mode 100644
index 0000000000000..2236c4de2a1af
--- /dev/null
+++ b/superset/dashboards/permalink/api.py
@@ -0,0 +1,171 @@
+# Licensed to the Apache Software Foundation (ASF) under one
+# or more contributor license agreements.  See the NOTICE file
+# distributed with this work for additional information
+# regarding copyright ownership.  The ASF licenses this file
+# to you under the Apache License, Version 2.0 (the
+# "License"); you may not use this file except in compliance
+# with the License.  You may obtain a copy of the License at
+#
+#   http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing,
+# software distributed under the License is distributed on an
+# "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+# KIND, either express or implied.  See the License for the
+# specific language governing permissions and limitations
+# under the License.
+import logging
+
+from flask import current_app, g, request, Response
+from flask_appbuilder.api import BaseApi, expose, protect, safe
+from marshmallow import ValidationError
+
+from superset.constants import MODEL_API_RW_METHOD_PERMISSION_MAP, RouteMethod
+from superset.dashboards.commands.exceptions import (
+    DashboardAccessDeniedError,
+    DashboardNotFoundError,
+)
+from superset.dashboards.permalink.commands.create import (
+    CreateDashboardPermalinkCommand,
+)
+from superset.dashboards.permalink.commands.get import GetDashboardPermalinkCommand
+from superset.dashboards.permalink.exceptions import DashboardPermalinkInvalidStateError
+from superset.dashboards.permalink.schemas import DashboardPermalinkPostSchema
+from superset.extensions import event_logger
+from superset.key_value.exceptions import KeyValueAccessDeniedError
+from superset.views.base_api import requires_json
+
+logger = logging.getLogger(__name__)
+
+
+class DashboardPermalinkRestApi(BaseApi):
+    add_model_schema = DashboardPermalinkPostSchema()
+    method_permission_name = MODEL_API_RW_METHOD_PERMISSION_MAP
+    include_route_methods = {
+        RouteMethod.POST,
+        RouteMethod.PUT,
+        RouteMethod.GET,
+        RouteMethod.DELETE,
+    }
+    allow_browser_login = True
+    class_permission_name = "DashboardPermalinkRestApi"
+    resource_name = "dashboard"
+    openapi_spec_tag = "Dashboard Permanent Link"
+    openapi_spec_component_schemas = (DashboardPermalinkPostSchema,)
+
+    @expose("/<pk>/permalink", methods=["POST"])
+    @protect()
+    @safe
+    @event_logger.log_this_with_context(
+        action=lambda self, *args, **kwargs: f"{self.__class__.__name__}.post",
+        log_to_statsd=False,
+    )
+    @requires_json
+    def post(self, pk: str) -> Response:
+        """Stores a new permanent link.
+        ---
+        post:
+          description: >-
+            Stores a new permanent link.
+          parameters:
+          - in: path
+            schema:
+              type: string
+            name: pk
+          requestBody:
+            required: true
+            content:
+              application/json:
+                schema:
+                  $ref: '#/components/schemas/DashboardPermalinkPostSchema'
+          responses:
+            201:
+              description: The permanent link was stored successfully.
+              content:
+                application/json:
+                  schema:
+                    type: object
+                    properties:
+                      key:
+                        type: string
+                        description: The key to retrieve the permanent link data.
+                      url:
+                        type: string
+                        description: permanent link.
+            400:
+              $ref: '#/components/responses/400'
+            401:
+              $ref: '#/components/responses/401'
+            422:
+              $ref: '#/components/responses/422'
+            500:
+              $ref: '#/components/responses/500'
+        """
+        key_type = current_app.config["PERMALINK_KEY_TYPE"]
+        try:
+            state = self.add_model_schema.load(request.json)
+            key = CreateDashboardPermalinkCommand(
+                actor=g.user, dashboard_id=pk, state=state, key_type=key_type,
+            ).run()
+            http_origin = request.headers.environ.get("HTTP_ORIGIN")
+            url = f"{http_origin}/superset/dashboard/p/{key}/"
+            return self.response(201, key=key, url=url)
+        except (ValidationError, DashboardPermalinkInvalidStateError) as ex:
+            return self.response(400, message=str(ex))
+        except (DashboardAccessDeniedError, KeyValueAccessDeniedError,) as ex:
+            return self.response(403, message=str(ex))
+        except DashboardNotFoundError as ex:
+            return self.response(404, message=str(ex))
+
+    @expose("/permalink/<string:key>", methods=["GET"])
+    @protect()
+    @safe
+    @event_logger.log_this_with_context(
+        action=lambda self, *args, **kwargs: f"{self.__class__.__name__}.get",
+        log_to_statsd=False,
+    )
+    def get(self, key: str) -> Response:
+        """Retrives permanent link state for dashboard.
+        ---
+        get:
+          description: >-
+            Retrives dashboard state associated with a permanent link.
+          parameters:
+          - in: path
+            schema:
+              type: string
+            name: key
+          responses:
+            200:
+              description: Returns the stored state.
+              content:
+                application/json:
+                  schema:
+                    type: object
+                    properties:
+                      state:
+                        type: object
+                        description: The stored state
+            400:
+              $ref: '#/components/responses/400'
+            401:
+              $ref: '#/components/responses/401'
+            404:
+              $ref: '#/components/responses/404'
+            422:
+              $ref: '#/components/responses/422'
+            500:
+              $ref: '#/components/responses/500'
+        """
+        try:
+            key_type = current_app.config["PERMALINK_KEY_TYPE"]
+            value = GetDashboardPermalinkCommand(
+                actor=g.user, key=key, key_type=key_type
+            ).run()
+            if not value:
+                return self.response_404()
+            return self.response(200, **value)
+        except DashboardAccessDeniedError as ex:
+            return self.response(403, message=str(ex))
+        except DashboardNotFoundError as ex:
+            return self.response(404, message=str(ex))
diff --git a/tests/unit_tests/explore/form_data/__init__.py b/superset/dashboards/permalink/commands/__init__.py
similarity index 100%
rename from tests/unit_tests/explore/form_data/__init__.py
rename to superset/dashboards/permalink/commands/__init__.py
diff --git a/superset/dashboards/permalink/commands/base.py b/superset/dashboards/permalink/commands/base.py
new file mode 100644
index 0000000000000..2c0343810e024
--- /dev/null
+++ b/superset/dashboards/permalink/commands/base.py
@@ -0,0 +1,23 @@
+# Licensed to the Apache Software Foundation (ASF) under one
+# or more contributor license agreements.  See the NOTICE file
+# distributed with this work for additional information
+# regarding copyright ownership.  The ASF licenses this file
+# to you under the Apache License, Version 2.0 (the
+# "License"); you may not use this file except in compliance
+# with the License.  You may obtain a copy of the License at
+#
+#   http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing,
+# software distributed under the License is distributed on an
+# "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+# KIND, either express or implied.  See the License for the
+# specific language governing permissions and limitations
+# under the License.
+from abc import ABC
+
+from superset.commands.base import BaseCommand
+
+
+class BaseDashboardPermalinkCommand(BaseCommand, ABC):
+    resource = "dashboard_permalink"
diff --git a/superset/dashboards/permalink/commands/create.py b/superset/dashboards/permalink/commands/create.py
new file mode 100644
index 0000000000000..954c08a7b123f
--- /dev/null
+++ b/superset/dashboards/permalink/commands/create.py
@@ -0,0 +1,61 @@
+# Licensed to the Apache Software Foundation (ASF) under one
+# or more contributor license agreements.  See the NOTICE file
+# distributed with this work for additional information
+# regarding copyright ownership.  The ASF licenses this file
+# to you under the Apache License, Version 2.0 (the
+# "License"); you may not use this file except in compliance
+# with the License.  You may obtain a copy of the License at
+#
+#   http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing,
+# software distributed under the License is distributed on an
+# "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+# KIND, either express or implied.  See the License for the
+# specific language governing permissions and limitations
+# under the License.
+import logging
+
+from flask_appbuilder.security.sqla.models import User
+from sqlalchemy.exc import SQLAlchemyError
+
+from superset.dashboards.dao import DashboardDAO
+from superset.dashboards.permalink.commands.base import BaseDashboardPermalinkCommand
+from superset.dashboards.permalink.exceptions import DashboardPermalinkCreateFailedError
+from superset.dashboards.permalink.types import DashboardPermalinkState
+from superset.key_value.commands.create import CreateKeyValueCommand
+from superset.key_value.types import KeyType
+
+logger = logging.getLogger(__name__)
+
+
+class CreateDashboardPermalinkCommand(BaseDashboardPermalinkCommand):
+    def __init__(
+        self,
+        actor: User,
+        dashboard_id: str,
+        state: DashboardPermalinkState,
+        key_type: KeyType,
+    ):
+        self.actor = actor
+        self.dashboard_id = dashboard_id
+        self.state = state
+        self.key_type = key_type
+
+    def run(self) -> str:
+        self.validate()
+        try:
+            DashboardDAO.get_by_id_or_slug(self.dashboard_id)
+            value = {
+                "dashboardId": self.dashboard_id,
+                "state": self.state,
+            }
+            return CreateKeyValueCommand(
+                self.actor, self.resource, value, self.key_type
+            ).run()
+        except SQLAlchemyError as ex:
+            logger.exception("Error running create command")
+            raise DashboardPermalinkCreateFailedError() from ex
+
+    def validate(self) -> None:
+        pass
diff --git a/superset/dashboards/permalink/commands/get.py b/superset/dashboards/permalink/commands/get.py
new file mode 100644
index 0000000000000..c82ade64d1a46
--- /dev/null
+++ b/superset/dashboards/permalink/commands/get.py
@@ -0,0 +1,65 @@
+# Licensed to the Apache Software Foundation (ASF) under one
+# or more contributor license agreements.  See the NOTICE file
+# distributed with this work for additional information
+# regarding copyright ownership.  The ASF licenses this file
+# to you under the Apache License, Version 2.0 (the
+# "License"); you may not use this file except in compliance
+# with the License.  You may obtain a copy of the License at
+#
+#   http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing,
+# software distributed under the License is distributed on an
+# "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+# KIND, either express or implied.  See the License for the
+# specific language governing permissions and limitations
+# under the License.
+import logging
+from typing import Optional
+
+from flask_appbuilder.security.sqla.models import User
+from sqlalchemy.exc import SQLAlchemyError
+
+from superset.dashboards.commands.exceptions import DashboardNotFoundError
+from superset.dashboards.dao import DashboardDAO
+from superset.dashboards.permalink.commands.base import BaseDashboardPermalinkCommand
+from superset.dashboards.permalink.exceptions import DashboardPermalinkGetFailedError
+from superset.dashboards.permalink.types import DashboardPermalinkValue
+from superset.key_value.commands.get import GetKeyValueCommand
+from superset.key_value.exceptions import KeyValueGetFailedError, KeyValueParseKeyError
+from superset.key_value.types import KeyType
+
+logger = logging.getLogger(__name__)
+
+
+class GetDashboardPermalinkCommand(BaseDashboardPermalinkCommand):
+    def __init__(
+        self, actor: User, key: str, key_type: KeyType,
+    ):
+        self.actor = actor
+        self.key = key
+        self.key_type = key_type
+
+    def run(self) -> Optional[DashboardPermalinkValue]:
+        self.validate()
+        try:
+            command = GetKeyValueCommand(
+                self.resource, self.key, key_type=self.key_type
+            )
+            value: Optional[DashboardPermalinkValue] = command.run()
+            if value:
+                DashboardDAO.get_by_id_or_slug(value["dashboardId"])
+                return value
+            return None
+        except (
+            DashboardNotFoundError,
+            KeyValueGetFailedError,
+            KeyValueParseKeyError,
+        ) as ex:
+            raise DashboardPermalinkGetFailedError(message=ex.message) from ex
+        except SQLAlchemyError as ex:
+            logger.exception("Error running get command")
+            raise DashboardPermalinkGetFailedError() from ex
+
+    def validate(self) -> None:
+        pass
diff --git a/superset/dashboards/permalink/exceptions.py b/superset/dashboards/permalink/exceptions.py
new file mode 100644
index 0000000000000..c234d614f1a27
--- /dev/null
+++ b/superset/dashboards/permalink/exceptions.py
@@ -0,0 +1,31 @@
+# Licensed to the Apache Software Foundation (ASF) under one
+# or more contributor license agreements.  See the NOTICE file
+# distributed with this work for additional information
+# regarding copyright ownership.  The ASF licenses this file
+# to you under the Apache License, Version 2.0 (the
+# "License"); you may not use this file except in compliance
+# with the License.  You may obtain a copy of the License at
+#
+#   http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing,
+# software distributed under the License is distributed on an
+# "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+# KIND, either express or implied.  See the License for the
+# specific language governing permissions and limitations
+# under the License.
+from flask_babel import lazy_gettext as _
+
+from superset.commands.exceptions import CommandException, CreateFailedError
+
+
+class DashboardPermalinkInvalidStateError(CommandException):
+    message = _("Invalid state.")
+
+
+class DashboardPermalinkCreateFailedError(CreateFailedError):
+    message = _("An error occurred while creating the value.")
+
+
+class DashboardPermalinkGetFailedError(CommandException):
+    message = _("An error occurred while accessing the value.")
diff --git a/superset/dashboards/permalink/schemas.py b/superset/dashboards/permalink/schemas.py
new file mode 100644
index 0000000000000..91d60b02c23b7
--- /dev/null
+++ b/superset/dashboards/permalink/schemas.py
@@ -0,0 +1,40 @@
+# Licensed to the Apache Software Foundation (ASF) under one
+# or more contributor license agreements.  See the NOTICE file
+# distributed with this work for additional information
+# regarding copyright ownership.  The ASF licenses this file
+# to you under the Apache License, Version 2.0 (the
+# "License"); you may not use this file except in compliance
+# with the License.  You may obtain a copy of the License at
+#
+#   http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing,
+# software distributed under the License is distributed on an
+# "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+# KIND, either express or implied.  See the License for the
+# specific language governing permissions and limitations
+# under the License.
+from marshmallow import fields, Schema
+
+
+class DashboardPermalinkPostSchema(Schema):
+    filterState = fields.Dict(
+        required=True, allow_none=False, description="Native filter state",
+    )
+    urlParams = fields.List(
+        fields.Tuple(
+            (
+                fields.String(required=True, allow_none=True, description="Key"),
+                fields.String(required=True, allow_none=True, description="Value"),
+            ),
+            required=False,
+            allow_none=True,
+            description="URL Parameter key-value pair",
+        ),
+        required=False,
+        allow_none=True,
+        description="URL Parameters",
+    )
+    hash = fields.String(
+        required=False, allow_none=True, description="Optional anchor link"
+    )
diff --git a/superset/key_value/schemas.py b/superset/dashboards/permalink/types.py
similarity index 69%
rename from superset/key_value/schemas.py
rename to superset/dashboards/permalink/types.py
index 3583a0cb769b6..815c5bfe91d47 100644
--- a/superset/key_value/schemas.py
+++ b/superset/dashboards/permalink/types.py
@@ -14,16 +14,15 @@
 # KIND, either express or implied.  See the License for the
 # specific language governing permissions and limitations
 # under the License.
-from marshmallow import fields, Schema
+from typing import Any, Dict, List, Optional, Tuple, TypedDict
 
 
-class KeyValuePostSchema(Schema):
-    value = fields.String(
-        required=True, allow_none=False, description="Any type of JSON supported text."
-    )
+class DashboardPermalinkState(TypedDict):
+    filterState: Dict[str, Any]
+    hash: Optional[str]
+    urlParams: Optional[List[Tuple[str, str]]]
 
 
-class KeyValuePutSchema(Schema):
-    value = fields.String(
-        required=True, allow_none=False, description="Any type of JSON supported text."
-    )
+class DashboardPermalinkValue(TypedDict):
+    dashboardId: str
+    state: DashboardPermalinkState
diff --git a/superset/explore/form_data/api.py b/superset/explore/form_data/api.py
index 7cbb22715c700..dc6ee7ea94cc3 100644
--- a/superset/explore/form_data/api.py
+++ b/superset/explore/form_data/api.py
@@ -37,7 +37,7 @@
 from superset.explore.form_data.commands.update import UpdateFormDataCommand
 from superset.explore.form_data.schemas import FormDataPostSchema, FormDataPutSchema
 from superset.extensions import event_logger
-from superset.key_value.commands.exceptions import KeyValueAccessDeniedError
+from superset.temporary_cache.commands.exceptions import TemporaryCacheAccessDeniedError
 from superset.views.base_api import requires_json
 
 logger = logging.getLogger(__name__)
@@ -121,7 +121,7 @@ def post(self) -> Response:
         except (
             ChartAccessDeniedError,
             DatasetAccessDeniedError,
-            KeyValueAccessDeniedError,
+            TemporaryCacheAccessDeniedError,
         ) as ex:
             return self.response(403, message=str(ex))
         except (ChartNotFoundError, DatasetNotFoundError) as ex:
@@ -198,7 +198,7 @@ def put(self, key: str) -> Response:
         except (
             ChartAccessDeniedError,
             DatasetAccessDeniedError,
-            KeyValueAccessDeniedError,
+            TemporaryCacheAccessDeniedError,
         ) as ex:
             return self.response(403, message=str(ex))
         except (ChartNotFoundError, DatasetNotFoundError) as ex:
@@ -253,7 +253,7 @@ def get(self, key: str) -> Response:
         except (
             ChartAccessDeniedError,
             DatasetAccessDeniedError,
-            KeyValueAccessDeniedError,
+            TemporaryCacheAccessDeniedError,
         ) as ex:
             return self.response(403, message=str(ex))
         except (ChartNotFoundError, DatasetNotFoundError) as ex:
@@ -309,7 +309,7 @@ def delete(self, key: str) -> Response:
         except (
             ChartAccessDeniedError,
             DatasetAccessDeniedError,
-            KeyValueAccessDeniedError,
+            TemporaryCacheAccessDeniedError,
         ) as ex:
             return self.response(403, message=str(ex))
         except (ChartNotFoundError, DatasetNotFoundError) as ex:
diff --git a/superset/explore/form_data/commands/create.py b/superset/explore/form_data/commands/create.py
index c1fa61e14a31b..a325241c6641d 100644
--- a/superset/explore/form_data/commands/create.py
+++ b/superset/explore/form_data/commands/create.py
@@ -22,10 +22,11 @@
 from superset.commands.base import BaseCommand
 from superset.explore.form_data.commands.parameters import CommandParameters
 from superset.explore.form_data.commands.state import TemporaryExploreState
-from superset.explore.form_data.utils import check_access
+from superset.explore.utils import check_access
 from superset.extensions import cache_manager
-from superset.key_value.commands.exceptions import KeyValueCreateFailedError
-from superset.key_value.utils import cache_key, random_key
+from superset.temporary_cache.commands.exceptions import TemporaryCacheCreateFailedError
+from superset.temporary_cache.utils import cache_key, random_key
+from superset.utils.schema import validate_json
 
 logger = logging.getLogger(__name__)
 
@@ -35,6 +36,7 @@ def __init__(self, cmd_params: CommandParameters):
         self._cmd_params = cmd_params
 
     def run(self) -> str:
+        self.validate()
         try:
             dataset_id = self._cmd_params.dataset_id
             chart_id = self._cmd_params.chart_id
@@ -58,7 +60,8 @@ def run(self) -> str:
             return key
         except SQLAlchemyError as ex:
             logger.exception("Error running create command")
-            raise KeyValueCreateFailedError() from ex
+            raise TemporaryCacheCreateFailedError() from ex
 
     def validate(self) -> None:
-        pass
+        if self._cmd_params.form_data:
+            validate_json(self._cmd_params.form_data)
diff --git a/superset/explore/form_data/commands/delete.py b/superset/explore/form_data/commands/delete.py
index 80193186ea311..ec537313d2ba0 100644
--- a/superset/explore/form_data/commands/delete.py
+++ b/superset/explore/form_data/commands/delete.py
@@ -23,13 +23,13 @@
 from superset.commands.base import BaseCommand
 from superset.explore.form_data.commands.parameters import CommandParameters
 from superset.explore.form_data.commands.state import TemporaryExploreState
-from superset.explore.form_data.utils import check_access
+from superset.explore.utils import check_access
 from superset.extensions import cache_manager
-from superset.key_value.commands.exceptions import (
-    KeyValueAccessDeniedError,
-    KeyValueDeleteFailedError,
+from superset.temporary_cache.commands.exceptions import (
+    TemporaryCacheAccessDeniedError,
+    TemporaryCacheDeleteFailedError,
 )
-from superset.key_value.utils import cache_key
+from superset.temporary_cache.utils import cache_key
 
 logger = logging.getLogger(__name__)
 
@@ -50,7 +50,7 @@ def run(self) -> bool:
                 chart_id = state["chart_id"]
                 check_access(dataset_id, chart_id, actor)
                 if state["owner"] != actor.get_user_id():
-                    raise KeyValueAccessDeniedError()
+                    raise TemporaryCacheAccessDeniedError()
                 tab_id = self._cmd_params.tab_id
                 contextual_key = cache_key(
                     session.get("_id"), tab_id, dataset_id, chart_id
@@ -60,7 +60,7 @@ def run(self) -> bool:
             return False
         except SQLAlchemyError as ex:
             logger.exception("Error running delete command")
-            raise KeyValueDeleteFailedError() from ex
+            raise TemporaryCacheDeleteFailedError() from ex
 
     def validate(self) -> None:
         pass
diff --git a/superset/explore/form_data/commands/get.py b/superset/explore/form_data/commands/get.py
index 2252387b34084..5b582008218cc 100644
--- a/superset/explore/form_data/commands/get.py
+++ b/superset/explore/form_data/commands/get.py
@@ -24,9 +24,9 @@
 from superset.commands.base import BaseCommand
 from superset.explore.form_data.commands.parameters import CommandParameters
 from superset.explore.form_data.commands.state import TemporaryExploreState
-from superset.explore.form_data.utils import check_access
+from superset.explore.utils import check_access
 from superset.extensions import cache_manager
-from superset.key_value.commands.exceptions import KeyValueGetFailedError
+from superset.temporary_cache.commands.exceptions import TemporaryCacheGetFailedError
 
 logger = logging.getLogger(__name__)
 
@@ -52,7 +52,7 @@ def run(self) -> Optional[str]:
             return None
         except SQLAlchemyError as ex:
             logger.exception("Error running get command")
-            raise KeyValueGetFailedError() from ex
+            raise TemporaryCacheGetFailedError() from ex
 
     def validate(self) -> None:
         pass
diff --git a/superset/explore/form_data/commands/update.py b/superset/explore/form_data/commands/update.py
index 8c8b6a500bcbc..0c986ee102cb0 100644
--- a/superset/explore/form_data/commands/update.py
+++ b/superset/explore/form_data/commands/update.py
@@ -24,13 +24,14 @@
 from superset.commands.base import BaseCommand
 from superset.explore.form_data.commands.parameters import CommandParameters
 from superset.explore.form_data.commands.state import TemporaryExploreState
-from superset.explore.form_data.utils import check_access
+from superset.explore.utils import check_access
 from superset.extensions import cache_manager
-from superset.key_value.commands.exceptions import (
-    KeyValueAccessDeniedError,
-    KeyValueUpdateFailedError,
+from superset.temporary_cache.commands.exceptions import (
+    TemporaryCacheAccessDeniedError,
+    TemporaryCacheUpdateFailedError,
 )
-from superset.key_value.utils import cache_key, random_key
+from superset.temporary_cache.utils import cache_key, random_key
+from superset.utils.schema import validate_json
 
 logger = logging.getLogger(__name__)
 
@@ -42,6 +43,7 @@ def __init__(
         self._cmd_params = cmd_params
 
     def run(self) -> Optional[str]:
+        self.validate()
         try:
             dataset_id = self._cmd_params.dataset_id
             chart_id = self._cmd_params.chart_id
@@ -55,7 +57,7 @@ def run(self) -> Optional[str]:
             if state and form_data:
                 user_id = actor.get_user_id()
                 if state["owner"] != user_id:
-                    raise KeyValueAccessDeniedError()
+                    raise TemporaryCacheAccessDeniedError()
 
                 # Generate a new key if tab_id changes or equals 0
                 tab_id = self._cmd_params.tab_id
@@ -77,7 +79,8 @@ def run(self) -> Optional[str]:
             return key
         except SQLAlchemyError as ex:
             logger.exception("Error running update command")
-            raise KeyValueUpdateFailedError() from ex
+            raise TemporaryCacheUpdateFailedError() from ex
 
     def validate(self) -> None:
-        pass
+        if self._cmd_params.form_data:
+            validate_json(self._cmd_params.form_data)
diff --git a/superset/explore/permalink/__init__.py b/superset/explore/permalink/__init__.py
new file mode 100644
index 0000000000000..13a83393a9124
--- /dev/null
+++ b/superset/explore/permalink/__init__.py
@@ -0,0 +1,16 @@
+# Licensed to the Apache Software Foundation (ASF) under one
+# or more contributor license agreements.  See the NOTICE file
+# distributed with this work for additional information
+# regarding copyright ownership.  The ASF licenses this file
+# to you under the Apache License, Version 2.0 (the
+# "License"); you may not use this file except in compliance
+# with the License.  You may obtain a copy of the License at
+#
+#   http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing,
+# software distributed under the License is distributed on an
+# "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+# KIND, either express or implied.  See the License for the
+# specific language governing permissions and limitations
+# under the License.
diff --git a/superset/explore/permalink/api.py b/superset/explore/permalink/api.py
new file mode 100644
index 0000000000000..025b1a45481c8
--- /dev/null
+++ b/superset/explore/permalink/api.py
@@ -0,0 +1,174 @@
+# Licensed to the Apache Software Foundation (ASF) under one
+# or more contributor license agreements.  See the NOTICE file
+# distributed with this work for additional information
+# regarding copyright ownership.  The ASF licenses this file
+# to you under the Apache License, Version 2.0 (the
+# "License"); you may not use this file except in compliance
+# with the License.  You may obtain a copy of the License at
+#
+#   http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing,
+# software distributed under the License is distributed on an
+# "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+# KIND, either express or implied.  See the License for the
+# specific language governing permissions and limitations
+# under the License.
+import logging
+
+from flask import current_app, g, request, Response
+from flask_appbuilder.api import BaseApi, expose, protect, safe
+from marshmallow import ValidationError
+
+from superset.charts.commands.exceptions import (
+    ChartAccessDeniedError,
+    ChartNotFoundError,
+)
+from superset.constants import MODEL_API_RW_METHOD_PERMISSION_MAP, RouteMethod
+from superset.datasets.commands.exceptions import (
+    DatasetAccessDeniedError,
+    DatasetNotFoundError,
+)
+from superset.explore.permalink.commands.create import CreateExplorePermalinkCommand
+from superset.explore.permalink.commands.get import GetExplorePermalinkCommand
+from superset.explore.permalink.exceptions import ExplorePermalinkInvalidStateError
+from superset.explore.permalink.schemas import ExplorePermalinkPostSchema
+from superset.extensions import event_logger
+from superset.key_value.exceptions import KeyValueAccessDeniedError
+from superset.views.base_api import requires_json
+
+logger = logging.getLogger(__name__)
+
+
+class ExplorePermalinkRestApi(BaseApi):
+    add_model_schema = ExplorePermalinkPostSchema()
+    method_permission_name = MODEL_API_RW_METHOD_PERMISSION_MAP
+    include_route_methods = {
+        RouteMethod.POST,
+        RouteMethod.PUT,
+        RouteMethod.GET,
+        RouteMethod.DELETE,
+    }
+    allow_browser_login = True
+    class_permission_name = "ExplorePermalinkRestApi"
+    resource_name = "explore"
+    openapi_spec_tag = "Explore Permanent Link"
+    openapi_spec_component_schemas = (ExplorePermalinkPostSchema,)
+
+    @expose("/permalink", methods=["POST"])
+    @protect()
+    @safe
+    @event_logger.log_this_with_context(
+        action=lambda self, *args, **kwargs: f"{self.__class__.__name__}.post",
+        log_to_statsd=False,
+    )
+    @requires_json
+    def post(self) -> Response:
+        """Stores a new permanent link.
+        ---
+        post:
+          description: >-
+            Stores a new permanent link.
+          requestBody:
+            required: true
+            content:
+              application/json:
+                schema:
+                  $ref: '#/components/schemas/ExplorePermalinkPostSchema'
+          responses:
+            201:
+              description: The permanent link was stored successfully.
+              content:
+                application/json:
+                  schema:
+                    type: object
+                    properties:
+                      key:
+                        type: string
+                        description: The key to retrieve the permanent link data.
+                      url:
+                        type: string
+                        description: pemanent link.
+            400:
+              $ref: '#/components/responses/400'
+            401:
+              $ref: '#/components/responses/401'
+            422:
+              $ref: '#/components/responses/422'
+            500:
+              $ref: '#/components/responses/500'
+        """
+        key_type = current_app.config["PERMALINK_KEY_TYPE"]
+        try:
+            state = self.add_model_schema.load(request.json)
+            key = CreateExplorePermalinkCommand(
+                actor=g.user, state=state, key_type=key_type,
+            ).run()
+            http_origin = request.headers.environ.get("HTTP_ORIGIN")
+            url = f"{http_origin}/superset/explore/p/{key}/"
+            return self.response(201, key=key, url=url)
+        except ValidationError as ex:
+            return self.response(400, message=ex.messages)
+        except (
+            ChartAccessDeniedError,
+            DatasetAccessDeniedError,
+            KeyValueAccessDeniedError,
+        ) as ex:
+            return self.response(403, message=str(ex))
+        except (ChartNotFoundError, DatasetNotFoundError) as ex:
+            return self.response(404, message=str(ex))
+
+    @expose("/permalink/<string:key>", methods=["GET"])
+    @protect()
+    @safe
+    @event_logger.log_this_with_context(
+        action=lambda self, *args, **kwargs: f"{self.__class__.__name__}.get",
+        log_to_statsd=False,
+    )
+    def get(self, key: str) -> Response:
+        """Retrives permanent link state for chart.
+        ---
+        get:
+          description: >-
+            Retrives chart state associated with a permanent link.
+          parameters:
+          - in: path
+            schema:
+              type: string
+            name: key
+          responses:
+            200:
+              description: Returns the stored form_data.
+              content:
+                application/json:
+                  schema:
+                    type: object
+                    properties:
+                      state:
+                        type: object
+                        description: The stored state
+            400:
+              $ref: '#/components/responses/400'
+            401:
+              $ref: '#/components/responses/401'
+            404:
+              $ref: '#/components/responses/404'
+            422:
+              $ref: '#/components/responses/422'
+            500:
+              $ref: '#/components/responses/500'
+        """
+        try:
+            key_type = current_app.config["PERMALINK_KEY_TYPE"]
+            value = GetExplorePermalinkCommand(
+                actor=g.user, key=key, key_type=key_type
+            ).run()
+            if not value:
+                return self.response_404()
+            return self.response(200, **value)
+        except ExplorePermalinkInvalidStateError as ex:
+            return self.response(400, message=str(ex))
+        except (ChartAccessDeniedError, DatasetAccessDeniedError,) as ex:
+            return self.response(403, message=str(ex))
+        except (ChartNotFoundError, DatasetNotFoundError) as ex:
+            return self.response(404, message=str(ex))
diff --git a/superset/explore/permalink/commands/__init__.py b/superset/explore/permalink/commands/__init__.py
new file mode 100644
index 0000000000000..13a83393a9124
--- /dev/null
+++ b/superset/explore/permalink/commands/__init__.py
@@ -0,0 +1,16 @@
+# Licensed to the Apache Software Foundation (ASF) under one
+# or more contributor license agreements.  See the NOTICE file
+# distributed with this work for additional information
+# regarding copyright ownership.  The ASF licenses this file
+# to you under the Apache License, Version 2.0 (the
+# "License"); you may not use this file except in compliance
+# with the License.  You may obtain a copy of the License at
+#
+#   http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing,
+# software distributed under the License is distributed on an
+# "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+# KIND, either express or implied.  See the License for the
+# specific language governing permissions and limitations
+# under the License.
diff --git a/superset/explore/permalink/commands/base.py b/superset/explore/permalink/commands/base.py
new file mode 100644
index 0000000000000..01a96405da026
--- /dev/null
+++ b/superset/explore/permalink/commands/base.py
@@ -0,0 +1,23 @@
+# Licensed to the Apache Software Foundation (ASF) under one
+# or more contributor license agreements.  See the NOTICE file
+# distributed with this work for additional information
+# regarding copyright ownership.  The ASF licenses this file
+# to you under the Apache License, Version 2.0 (the
+# "License"); you may not use this file except in compliance
+# with the License.  You may obtain a copy of the License at
+#
+#   http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing,
+# software distributed under the License is distributed on an
+# "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+# KIND, either express or implied.  See the License for the
+# specific language governing permissions and limitations
+# under the License.
+from abc import ABC
+
+from superset.commands.base import BaseCommand
+
+
+class BaseExplorePermalinkCommand(BaseCommand, ABC):
+    resource = "explore_permalink"
diff --git a/superset/explore/permalink/commands/create.py b/superset/explore/permalink/commands/create.py
new file mode 100644
index 0000000000000..177aa7ae1f091
--- /dev/null
+++ b/superset/explore/permalink/commands/create.py
@@ -0,0 +1,60 @@
+# Licensed to the Apache Software Foundation (ASF) under one
+# or more contributor license agreements.  See the NOTICE file
+# distributed with this work for additional information
+# regarding copyright ownership.  The ASF licenses this file
+# to you under the Apache License, Version 2.0 (the
+# "License"); you may not use this file except in compliance
+# with the License.  You may obtain a copy of the License at
+#
+#   http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing,
+# software distributed under the License is distributed on an
+# "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+# KIND, either express or implied.  See the License for the
+# specific language governing permissions and limitations
+# under the License.
+import logging
+from typing import Any, Dict, Optional
+
+from flask_appbuilder.security.sqla.models import User
+from sqlalchemy.exc import SQLAlchemyError
+
+from superset.explore.permalink.commands.base import BaseExplorePermalinkCommand
+from superset.explore.permalink.exceptions import ExplorePermalinkCreateFailedError
+from superset.explore.utils import check_access
+from superset.key_value.commands.create import CreateKeyValueCommand
+from superset.key_value.types import KeyType
+
+logger = logging.getLogger(__name__)
+
+
+class CreateExplorePermalinkCommand(BaseExplorePermalinkCommand):
+    def __init__(self, actor: User, state: Dict[str, Any], key_type: KeyType):
+        self.actor = actor
+        self.chart_id: Optional[int] = state["formData"].get("slice_id")
+        self.datasource: str = state["formData"]["datasource"]
+        self.state = state
+        self.key_type = key_type
+
+    def run(self) -> str:
+        self.validate()
+        try:
+            dataset_id = int(self.datasource.split("__")[0])
+            check_access(dataset_id, self.chart_id, self.actor)
+            value = {
+                "chartId": self.chart_id,
+                "datasetId": dataset_id,
+                "datasource": self.datasource,
+                "state": self.state,
+            }
+            command = CreateKeyValueCommand(
+                self.actor, self.resource, value, self.key_type
+            )
+            return command.run()
+        except SQLAlchemyError as ex:
+            logger.exception("Error running create command")
+            raise ExplorePermalinkCreateFailedError() from ex
+
+    def validate(self) -> None:
+        pass
diff --git a/superset/explore/permalink/commands/get.py b/superset/explore/permalink/commands/get.py
new file mode 100644
index 0000000000000..0db9da164bc6b
--- /dev/null
+++ b/superset/explore/permalink/commands/get.py
@@ -0,0 +1,66 @@
+# Licensed to the Apache Software Foundation (ASF) under one
+# or more contributor license agreements.  See the NOTICE file
+# distributed with this work for additional information
+# regarding copyright ownership.  The ASF licenses this file
+# to you under the Apache License, Version 2.0 (the
+# "License"); you may not use this file except in compliance
+# with the License.  You may obtain a copy of the License at
+#
+#   http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing,
+# software distributed under the License is distributed on an
+# "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+# KIND, either express or implied.  See the License for the
+# specific language governing permissions and limitations
+# under the License.
+import logging
+from typing import Optional
+
+from flask_appbuilder.security.sqla.models import User
+from sqlalchemy.exc import SQLAlchemyError
+
+from superset.datasets.commands.exceptions import DatasetNotFoundError
+from superset.explore.permalink.commands.base import BaseExplorePermalinkCommand
+from superset.explore.permalink.exceptions import ExplorePermalinkGetFailedError
+from superset.explore.permalink.types import ExplorePermalinkValue
+from superset.explore.utils import check_access
+from superset.key_value.commands.get import GetKeyValueCommand
+from superset.key_value.exceptions import KeyValueGetFailedError, KeyValueParseKeyError
+from superset.key_value.types import KeyType
+
+logger = logging.getLogger(__name__)
+
+
+class GetExplorePermalinkCommand(BaseExplorePermalinkCommand):
+    def __init__(
+        self, actor: User, key: str, key_type: KeyType,
+    ):
+        self.actor = actor
+        self.key = key
+        self.key_type = key_type
+
+    def run(self) -> Optional[ExplorePermalinkValue]:
+        self.validate()
+        try:
+            value: Optional[ExplorePermalinkValue] = GetKeyValueCommand(
+                self.resource, self.key, key_type=self.key_type
+            ).run()
+            if value:
+                chart_id: Optional[int] = value.get("chartId")
+                dataset_id = value["datasetId"]
+                check_access(dataset_id, chart_id, self.actor)
+                return value
+            return None
+        except (
+            DatasetNotFoundError,
+            KeyValueGetFailedError,
+            KeyValueParseKeyError,
+        ) as ex:
+            raise ExplorePermalinkGetFailedError(message=ex.message) from ex
+        except SQLAlchemyError as ex:
+            logger.exception("Error running get command")
+            raise ExplorePermalinkGetFailedError() from ex
+
+    def validate(self) -> None:
+        pass
diff --git a/superset/explore/permalink/exceptions.py b/superset/explore/permalink/exceptions.py
new file mode 100644
index 0000000000000..7ea607ab08c8a
--- /dev/null
+++ b/superset/explore/permalink/exceptions.py
@@ -0,0 +1,31 @@
+# Licensed to the Apache Software Foundation (ASF) under one
+# or more contributor license agreements.  See the NOTICE file
+# distributed with this work for additional information
+# regarding copyright ownership.  The ASF licenses this file
+# to you under the Apache License, Version 2.0 (the
+# "License"); you may not use this file except in compliance
+# with the License.  You may obtain a copy of the License at
+#
+#   http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing,
+# software distributed under the License is distributed on an
+# "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+# KIND, either express or implied.  See the License for the
+# specific language governing permissions and limitations
+# under the License.
+from flask_babel import lazy_gettext as _
+
+from superset.commands.exceptions import CommandException, CreateFailedError
+
+
+class ExplorePermalinkInvalidStateError(CreateFailedError):
+    message = _("Invalid state.")
+
+
+class ExplorePermalinkCreateFailedError(CreateFailedError):
+    message = _("An error occurred while creating the value.")
+
+
+class ExplorePermalinkGetFailedError(CommandException):
+    message = _("An error occurred while accessing the value.")
diff --git a/superset/explore/permalink/schemas.py b/superset/explore/permalink/schemas.py
new file mode 100644
index 0000000000000..7392c2deda250
--- /dev/null
+++ b/superset/explore/permalink/schemas.py
@@ -0,0 +1,37 @@
+# Licensed to the Apache Software Foundation (ASF) under one
+# or more contributor license agreements.  See the NOTICE file
+# distributed with this work for additional information
+# regarding copyright ownership.  The ASF licenses this file
+# to you under the Apache License, Version 2.0 (the
+# "License"); you may not use this file except in compliance
+# with the License.  You may obtain a copy of the License at
+#
+#   http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing,
+# software distributed under the License is distributed on an
+# "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+# KIND, either express or implied.  See the License for the
+# specific language governing permissions and limitations
+# under the License.
+from marshmallow import fields, Schema
+
+
+class ExplorePermalinkPostSchema(Schema):
+    formData = fields.Dict(
+        required=True, allow_none=False, description="Chart form data",
+    )
+    urlParams = fields.List(
+        fields.Tuple(
+            (
+                fields.String(required=True, allow_none=True, description="Key"),
+                fields.String(required=True, allow_none=True, description="Value"),
+            ),
+            required=False,
+            allow_none=True,
+            description="URL Parameter key-value pair",
+        ),
+        required=False,
+        allow_none=True,
+        description="URL Parameters",
+    )
diff --git a/superset/explore/permalink/types.py b/superset/explore/permalink/types.py
new file mode 100644
index 0000000000000..b396e335104b0
--- /dev/null
+++ b/superset/explore/permalink/types.py
@@ -0,0 +1,29 @@
+# Licensed to the Apache Software Foundation (ASF) under one
+# or more contributor license agreements.  See the NOTICE file
+# distributed with this work for additional information
+# regarding copyright ownership.  The ASF licenses this file
+# to you under the Apache License, Version 2.0 (the
+# "License"); you may not use this file except in compliance
+# with the License.  You may obtain a copy of the License at
+#
+#   http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing,
+# software distributed under the License is distributed on an
+# "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+# KIND, either express or implied.  See the License for the
+# specific language governing permissions and limitations
+# under the License.
+from typing import Any, Dict, List, Optional, Tuple, TypedDict
+
+
+class ExplorePermalinkState(TypedDict, total=False):
+    formData: Dict[str, Any]
+    urlParams: Optional[List[Tuple[str, str]]]
+
+
+class ExplorePermalinkValue(TypedDict):
+    chartId: Optional[int]
+    datasetId: int
+    datasource: str
+    state: ExplorePermalinkState
diff --git a/superset/explore/form_data/utils.py b/superset/explore/utils.py
similarity index 100%
rename from superset/explore/form_data/utils.py
rename to superset/explore/utils.py
diff --git a/superset/initialization/__init__.py b/superset/initialization/__init__.py
index 59e204d6d65e8..ee4c3621abf0e 100644
--- a/superset/initialization/__init__.py
+++ b/superset/initialization/__init__.py
@@ -136,11 +136,13 @@ def init_views(self) -> None:
         from superset.dashboards.api import DashboardRestApi
         from superset.dashboards.filter_sets.api import FilterSetRestApi
         from superset.dashboards.filter_state.api import DashboardFilterStateRestApi
+        from superset.dashboards.permalink.api import DashboardPermalinkRestApi
         from superset.databases.api import DatabaseRestApi
         from superset.datasets.api import DatasetRestApi
         from superset.datasets.columns.api import DatasetColumnsRestApi
         from superset.datasets.metrics.api import DatasetMetricRestApi
         from superset.explore.form_data.api import ExploreFormDataRestApi
+        from superset.explore.permalink.api import ExplorePermalinkRestApi
         from superset.queries.api import QueryRestApi
         from superset.queries.saved_queries.api import SavedQueryRestApi
         from superset.reports.api import ReportScheduleRestApi
@@ -208,12 +210,14 @@ def init_views(self) -> None:
         appbuilder.add_api(CssTemplateRestApi)
         appbuilder.add_api(CurrentUserRestApi)
         appbuilder.add_api(DashboardFilterStateRestApi)
+        appbuilder.add_api(DashboardPermalinkRestApi)
         appbuilder.add_api(DashboardRestApi)
         appbuilder.add_api(DatabaseRestApi)
         appbuilder.add_api(DatasetRestApi)
         appbuilder.add_api(DatasetColumnsRestApi)
         appbuilder.add_api(DatasetMetricRestApi)
         appbuilder.add_api(ExploreFormDataRestApi)
+        appbuilder.add_api(ExplorePermalinkRestApi)
         appbuilder.add_api(FilterSetRestApi)
         appbuilder.add_api(QueryRestApi)
         appbuilder.add_api(ReportScheduleRestApi)
diff --git a/superset/key_value/commands/create.py b/superset/key_value/commands/create.py
index 987c02bee6cb2..5f5bf67318958 100644
--- a/superset/key_value/commands/create.py
+++ b/superset/key_value/commands/create.py
@@ -15,24 +15,56 @@
 # specific language governing permissions and limitations
 # under the License.
 import logging
-from abc import ABC, abstractmethod
+import pickle
+from datetime import datetime
+from typing import Any, Optional
 
+from flask_appbuilder.security.sqla.models import User
 from sqlalchemy.exc import SQLAlchemyError
 
+from superset import db
 from superset.commands.base import BaseCommand
-from superset.key_value.commands.exceptions import KeyValueCreateFailedError
-from superset.key_value.commands.parameters import CommandParameters
+from superset.key_value.exceptions import KeyValueCreateFailedError
+from superset.key_value.models import KeyValueEntry
+from superset.key_value.types import KeyType
+from superset.key_value.utils import extract_key
 
 logger = logging.getLogger(__name__)
 
 
-class CreateKeyValueCommand(BaseCommand, ABC):
-    def __init__(self, cmd_params: CommandParameters):
-        self._cmd_params = cmd_params
+class CreateKeyValueCommand(BaseCommand):
+    actor: User
+    resource: str
+    value: Any
+    key_type: KeyType
+    expires_on: Optional[datetime]
+
+    def __init__(
+        self,
+        actor: User,
+        resource: str,
+        value: Any,
+        key_type: KeyType,
+        expires_on: Optional[datetime] = None,
+    ):
+        """
+        Create a new key-value pair
+
+        :param resource: the resource (dashboard, chart etc)
+        :param value: the value to persist in the key-value store
+        :param key_type: the type of the key to return
+        :param expires_on: entry expiration time
+        :return: the key associated with the persisted value
+        """
+        self.resource = resource
+        self.actor = actor
+        self.value = value
+        self.key_type = key_type
+        self.expires_on = expires_on
 
     def run(self) -> str:
         try:
-            return self.create(self._cmd_params)
+            return self.create()
         except SQLAlchemyError as ex:
             logger.exception("Error running create command")
             raise KeyValueCreateFailedError() from ex
@@ -40,6 +72,14 @@ def run(self) -> str:
     def validate(self) -> None:
         pass
 
-    @abstractmethod
-    def create(self, cmd_params: CommandParameters) -> str:
-        ...
+    def create(self) -> str:
+        entry = KeyValueEntry(
+            resource=self.resource,
+            value=pickle.dumps(self.value),
+            created_on=datetime.now(),
+            created_by_fk=None if self.actor.is_anonymous else self.actor.id,
+            expires_on=self.expires_on,
+        )
+        db.session.add(entry)
+        db.session.commit()
+        return extract_key(entry, self.key_type)
diff --git a/superset/key_value/commands/delete.py b/superset/key_value/commands/delete.py
index 6d2983c063784..6eb340e87fd91 100644
--- a/superset/key_value/commands/delete.py
+++ b/superset/key_value/commands/delete.py
@@ -15,24 +15,45 @@
 # specific language governing permissions and limitations
 # under the License.
 import logging
-from abc import ABC, abstractmethod
 
+from flask_appbuilder.security.sqla.models import User
 from sqlalchemy.exc import SQLAlchemyError
 
+from superset import db
 from superset.commands.base import BaseCommand
-from superset.key_value.commands.exceptions import KeyValueDeleteFailedError
-from superset.key_value.commands.parameters import CommandParameters
+from superset.key_value.exceptions import KeyValueDeleteFailedError
+from superset.key_value.models import KeyValueEntry
+from superset.key_value.types import KeyType
+from superset.key_value.utils import get_filter
 
 logger = logging.getLogger(__name__)
 
 
-class DeleteKeyValueCommand(BaseCommand, ABC):
-    def __init__(self, cmd_params: CommandParameters):
-        self._cmd_params = cmd_params
+class DeleteKeyValueCommand(BaseCommand):
+    actor: User
+    key: str
+    key_type: KeyType
+    resource: str
+
+    def __init__(
+        self, actor: User, resource: str, key: str, key_type: KeyType = "uuid"
+    ):
+        """
+        Delete a key-value pair
+
+        :param resource: the resource (dashboard, chart etc)
+        :param key: the key to delete
+        :param key_type: the type of key
+        :return: was the entry deleted or not
+        """
+        self.resource = resource
+        self.actor = actor
+        self.key = key
+        self.key_type = key_type
 
     def run(self) -> bool:
         try:
-            return self.delete(self._cmd_params)
+            return self.delete()
         except SQLAlchemyError as ex:
             logger.exception("Error running delete command")
             raise KeyValueDeleteFailedError() from ex
@@ -40,6 +61,16 @@ def run(self) -> bool:
     def validate(self) -> None:
         pass
 
-    @abstractmethod
-    def delete(self, cmd_params: CommandParameters) -> bool:
-        ...
+    def delete(self) -> bool:
+        filter_ = get_filter(self.resource, self.key, self.key_type)
+        entry = (
+            db.session.query(KeyValueEntry)
+            .filter_by(**filter_)
+            .autoflush(False)
+            .first()
+        )
+        if entry:
+            db.session.delete(entry)
+            db.session.commit()
+            return True
+        return False
diff --git a/superset/key_value/commands/get.py b/superset/key_value/commands/get.py
index a697c808c01df..b0530b976ba7c 100644
--- a/superset/key_value/commands/get.py
+++ b/superset/key_value/commands/get.py
@@ -14,26 +14,45 @@
 # KIND, either express or implied.  See the License for the
 # specific language governing permissions and limitations
 # under the License.
+
 import logging
-from abc import ABC, abstractmethod
-from typing import Optional
+import pickle
+from datetime import datetime
+from typing import Any, Optional
 
 from sqlalchemy.exc import SQLAlchemyError
 
+from superset import db
 from superset.commands.base import BaseCommand
-from superset.key_value.commands.exceptions import KeyValueGetFailedError
-from superset.key_value.commands.parameters import CommandParameters
+from superset.key_value.exceptions import KeyValueGetFailedError
+from superset.key_value.models import KeyValueEntry
+from superset.key_value.types import KeyType
+from superset.key_value.utils import get_filter
 
 logger = logging.getLogger(__name__)
 
 
-class GetKeyValueCommand(BaseCommand, ABC):
-    def __init__(self, cmd_params: CommandParameters):
-        self._cmd_params = cmd_params
+class GetKeyValueCommand(BaseCommand):
+    key: str
+    key_type: KeyType
+    resource: str
+
+    def __init__(self, resource: str, key: str, key_type: KeyType = "uuid"):
+        """
+        Retrieve a key value entry
+
+        :param resource: the resource (dashboard, chart etc)
+        :param key: the key to retrieve
+        :param key_type: the type of the key to retrieve
+        :return: the value associated with the key if present
+        """
+        self.resource = resource
+        self.key = key
+        self.key_type = key_type
 
-    def run(self) -> Optional[str]:
+    def run(self) -> Any:
         try:
-            return self.get(self._cmd_params)
+            return self.get()
         except SQLAlchemyError as ex:
             logger.exception("Error running get command")
             raise KeyValueGetFailedError() from ex
@@ -41,6 +60,14 @@ def run(self) -> Optional[str]:
     def validate(self) -> None:
         pass
 
-    @abstractmethod
-    def get(self, cmd_params: CommandParameters) -> Optional[str]:
-        ...
+    def get(self) -> Optional[Any]:
+        filter_ = get_filter(self.resource, self.key, self.key_type)
+        entry = (
+            db.session.query(KeyValueEntry)
+            .filter_by(**filter_)
+            .autoflush(False)
+            .first()
+        )
+        if entry and (entry.expires_on is None or entry.expires_on > datetime.now()):
+            return pickle.loads(entry.value)
+        return None
diff --git a/superset/key_value/commands/update.py b/superset/key_value/commands/update.py
index b0949193064ac..aed4c292e68ca 100644
--- a/superset/key_value/commands/update.py
+++ b/superset/key_value/commands/update.py
@@ -14,28 +14,62 @@
 # KIND, either express or implied.  See the License for the
 # specific language governing permissions and limitations
 # under the License.
+
 import logging
-from abc import ABC, abstractmethod
-from typing import Optional
+import pickle
+from datetime import datetime
+from typing import Any, Optional
 
+from flask_appbuilder.security.sqla.models import User
 from sqlalchemy.exc import SQLAlchemyError
 
+from superset import db
 from superset.commands.base import BaseCommand
-from superset.key_value.commands.exceptions import KeyValueUpdateFailedError
-from superset.key_value.commands.parameters import CommandParameters
+from superset.key_value.exceptions import KeyValueUpdateFailedError
+from superset.key_value.models import KeyValueEntry
+from superset.key_value.types import KeyType
+from superset.key_value.utils import extract_key, get_filter
 
 logger = logging.getLogger(__name__)
 
 
-class UpdateKeyValueCommand(BaseCommand, ABC):
+class UpdateKeyValueCommand(BaseCommand):
+    actor: User
+    resource: str
+    value: Any
+    key: str
+    key_type: KeyType
+    expires_on: Optional[datetime]
+
     def __init__(
-        self, cmd_params: CommandParameters,
+        self,
+        actor: User,
+        resource: str,
+        key: str,
+        value: Any,
+        key_type: KeyType = "uuid",
+        expires_on: Optional[datetime] = None,
     ):
-        self._parameters = cmd_params
+        """
+        Update a key value entry
+
+        :param resource: the resource (dashboard, chart etc)
+        :param key: the key to update
+        :param value: the value to persist in the key-value store
+        :param key_type: the type of the key to update
+        :param expires_on: entry expiration time
+        :return: the key associated with the updated value
+        """
+        self.actor = actor
+        self.resource = resource
+        self.key = key
+        self.value = value
+        self.key_type = key_type
+        self.expires_on = expires_on
 
     def run(self) -> Optional[str]:
         try:
-            return self.update(self._parameters)
+            return self.update()
         except SQLAlchemyError as ex:
             logger.exception("Error running update command")
             raise KeyValueUpdateFailedError() from ex
@@ -43,6 +77,20 @@ def run(self) -> Optional[str]:
     def validate(self) -> None:
         pass
 
-    @abstractmethod
-    def update(self, cmd_params: CommandParameters) -> Optional[str]:
-        ...
+    def update(self) -> Optional[str]:
+        filter_ = get_filter(self.resource, self.key, self.key_type)
+        entry: KeyValueEntry = (
+            db.session.query(KeyValueEntry)
+            .filter_by(**filter_)
+            .autoflush(False)
+            .first()
+        )
+        if entry:
+            entry.value = pickle.dumps(self.value)
+            entry.expires_on = self.expires_on
+            entry.changed_on = datetime.now()
+            entry.changed_by_fk = None if self.actor.is_anonymous else self.actor.id
+            db.session.merge(entry)
+            db.session.commit()
+            return extract_key(entry, self.key_type)
+        return None
diff --git a/superset/key_value/commands/exceptions.py b/superset/key_value/exceptions.py
similarity index 90%
rename from superset/key_value/commands/exceptions.py
rename to superset/key_value/exceptions.py
index 780f705e8ad56..fc66d24c2f323 100644
--- a/superset/key_value/commands/exceptions.py
+++ b/superset/key_value/exceptions.py
@@ -23,6 +23,11 @@
     ForbiddenError,
     UpdateFailedError,
 )
+from superset.exceptions import SupersetException
+
+
+class KeyValueParseKeyError(SupersetException):
+    message = _("An error occurred while parsing the key.")
 
 
 class KeyValueCreateFailedError(CreateFailedError):
diff --git a/superset/key_value/models.py b/superset/key_value/models.py
new file mode 100644
index 0000000000000..33e749ca364e1
--- /dev/null
+++ b/superset/key_value/models.py
@@ -0,0 +1,38 @@
+# Licensed to the Apache Software Foundation (ASF) under one
+# or more contributor license agreements.  See the NOTICE file
+# distributed with this work for additional information
+# regarding copyright ownership.  The ASF licenses this file
+# to you under the Apache License, Version 2.0 (the
+# "License"); you may not use this file except in compliance
+# with the License.  You may obtain a copy of the License at
+#
+#   http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing,
+# software distributed under the License is distributed on an
+# "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+# KIND, either express or implied.  See the License for the
+# specific language governing permissions and limitations
+# under the License.
+from flask_appbuilder import Model
+from sqlalchemy import Column, DateTime, ForeignKey, Integer, LargeBinary, String
+from sqlalchemy.orm import relationship
+
+from superset import security_manager
+from superset.models.helpers import AuditMixinNullable, ImportExportMixin
+
+
+class KeyValueEntry(Model, AuditMixinNullable, ImportExportMixin):
+    """Key value store entity"""
+
+    __tablename__ = "key_value"
+    id = Column(Integer, primary_key=True)
+    resource = Column(String(32), nullable=False)
+    value = Column(LargeBinary(), nullable=False)
+    created_on = Column(DateTime, nullable=True)
+    created_by_fk = Column(Integer, ForeignKey("ab_user.id"), nullable=True)
+    changed_on = Column(DateTime, nullable=True)
+    expires_on = Column(DateTime, nullable=True)
+    changed_by_fk = Column(Integer, ForeignKey("ab_user.id"), nullable=True)
+    created_by = relationship(security_manager.user_model, foreign_keys=[created_by_fk])
+    changed_by = relationship(security_manager.user_model, foreign_keys=[changed_by_fk])
diff --git a/superset/key_value/types.py b/superset/key_value/types.py
new file mode 100644
index 0000000000000..d36520ddbfb75
--- /dev/null
+++ b/superset/key_value/types.py
@@ -0,0 +1,34 @@
+# Licensed to the Apache Software Foundation (ASF) under one
+# or more contributor license agreements.  See the NOTICE file
+# distributed with this work for additional information
+# regarding copyright ownership.  The ASF licenses this file
+# to you under the Apache License, Version 2.0 (the
+# "License"); you may not use this file except in compliance
+# with the License.  You may obtain a copy of the License at
+#
+#   http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing,
+# software distributed under the License is distributed on an
+# "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+# KIND, either express or implied.  See the License for the
+# specific language governing permissions and limitations
+# under the License.
+from dataclasses import dataclass
+from typing import Literal, Optional, TypedDict
+from uuid import UUID
+
+
+@dataclass
+class Key:
+    id: Optional[int]
+    uuid: Optional[UUID]
+
+
+KeyType = Literal["id", "uuid"]
+
+
+class KeyValueFilter(TypedDict, total=False):
+    resource: str
+    id: Optional[int]
+    uuid: Optional[UUID]
diff --git a/superset/key_value/utils.py b/superset/key_value/utils.py
index 2f2f71f957e08..50aa34918e434 100644
--- a/superset/key_value/utils.py
+++ b/superset/key_value/utils.py
@@ -14,15 +14,44 @@
 # KIND, either express or implied.  See the License for the
 # specific language governing permissions and limitations
 # under the License.
-from secrets import token_urlsafe
-from typing import Any
+from typing import Literal
+from uuid import UUID
 
-SEPARATOR = ";"
+from flask import current_app
 
+from superset.key_value.exceptions import KeyValueParseKeyError
+from superset.key_value.models import KeyValueEntry
+from superset.key_value.types import Key, KeyType, KeyValueFilter
 
-def cache_key(*args: Any) -> str:
-    return SEPARATOR.join(str(arg) for arg in args)
 
+def parse_permalink_key(key: str) -> Key:
+    key_type: Literal["id", "uuid"] = current_app.config["PERMALINK_KEY_TYPE"]
+    if key_type == "id":
+        return Key(id=int(key), uuid=None)
+    return Key(id=None, uuid=UUID(key))
 
-def random_key() -> str:
-    return token_urlsafe(48)
+
+def format_permalink_key(key: Key) -> str:
+    """
+    return the string representation of the key
+
+    :param key: a key object with either a numerical or uuid key
+    :return: a formatted string
+    """
+    return str(key.id if key.id is not None else key.uuid)
+
+
+def extract_key(entry: KeyValueEntry, key_type: KeyType) -> str:
+    return str(entry.id if key_type == "id" else entry.uuid)
+
+
+def get_filter(resource: str, key: str, key_type: KeyType) -> KeyValueFilter:
+    try:
+        filter_: KeyValueFilter = {"resource": resource}
+        if key_type == "uuid":
+            filter_["uuid"] = UUID(key)
+        else:
+            filter_["id"] = int(key)
+        return filter_
+    except ValueError as ex:
+        raise KeyValueParseKeyError() from ex
diff --git a/superset/migrations/versions/6766938c6065_add_key_value_store.py b/superset/migrations/versions/6766938c6065_add_key_value_store.py
new file mode 100644
index 0000000000000..0a756386aee98
--- /dev/null
+++ b/superset/migrations/versions/6766938c6065_add_key_value_store.py
@@ -0,0 +1,61 @@
+# Licensed to the Apache Software Foundation (ASF) under one
+# or more contributor license agreements.  See the NOTICE file
+# distributed with this work for additional information
+# regarding copyright ownership.  The ASF licenses this file
+# to you under the Apache License, Version 2.0 (the
+# "License"); you may not use this file except in compliance
+# with the License.  You may obtain a copy of the License at
+#
+#   http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing,
+# software distributed under the License is distributed on an
+# "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+# KIND, either express or implied.  See the License for the
+# specific language governing permissions and limitations
+# under the License.
+"""add key-value store
+
+Revision ID: 6766938c6065
+Revises: 7293b0ca7944
+Create Date: 2022-03-04 09:59:26.922329
+
+"""
+
+# revision identifiers, used by Alembic.
+revision = "6766938c6065"
+down_revision = "7293b0ca7944"
+
+from uuid import uuid4
+
+import sqlalchemy as sa
+from alembic import op
+from sqlalchemy_utils import UUIDType
+
+
+def upgrade():
+    op.create_table(
+        "key_value",
+        sa.Column("id", sa.Integer(), nullable=False),
+        sa.Column("resource", sa.String(32), nullable=False),
+        sa.Column("value", sa.LargeBinary(), nullable=False),
+        sa.Column("uuid", UUIDType(binary=True), default=uuid4),
+        sa.Column("created_on", sa.DateTime(), nullable=True),
+        sa.Column("created_by_fk", sa.Integer(), nullable=True),
+        sa.Column("changed_on", sa.DateTime(), nullable=True),
+        sa.Column("changed_by_fk", sa.Integer(), nullable=True),
+        sa.Column("expires_on", sa.DateTime(), nullable=True),
+        sa.ForeignKeyConstraint(["created_by_fk"], ["ab_user.id"]),
+        sa.ForeignKeyConstraint(["changed_by_fk"], ["ab_user.id"]),
+        sa.PrimaryKeyConstraint("id"),
+    )
+    op.create_index(op.f("ix_key_value_uuid"), "key_value", ["uuid"], unique=True)
+    op.create_index(
+        op.f("ix_key_value_expires_on"), "key_value", ["expires_on"], unique=False
+    )
+
+
+def downgrade():
+    op.drop_index(op.f("ix_key_value_expires_on"), table_name="key_value")
+    op.drop_index(op.f("ix_key_value_uuid"), table_name="key_value")
+    op.drop_table("key_value")
diff --git a/superset/temporary_cache/__init__.py b/superset/temporary_cache/__init__.py
new file mode 100644
index 0000000000000..13a83393a9124
--- /dev/null
+++ b/superset/temporary_cache/__init__.py
@@ -0,0 +1,16 @@
+# Licensed to the Apache Software Foundation (ASF) under one
+# or more contributor license agreements.  See the NOTICE file
+# distributed with this work for additional information
+# regarding copyright ownership.  The ASF licenses this file
+# to you under the Apache License, Version 2.0 (the
+# "License"); you may not use this file except in compliance
+# with the License.  You may obtain a copy of the License at
+#
+#   http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing,
+# software distributed under the License is distributed on an
+# "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+# KIND, either express or implied.  See the License for the
+# specific language governing permissions and limitations
+# under the License.
diff --git a/superset/key_value/api.py b/superset/temporary_cache/api.py
similarity index 87%
rename from superset/key_value/api.py
rename to superset/temporary_cache/api.py
index f01cb363e2e6d..b1c5999630b68 100644
--- a/superset/key_value/api.py
+++ b/superset/temporary_cache/api.py
@@ -37,17 +37,20 @@
     DatasetAccessDeniedError,
     DatasetNotFoundError,
 )
-from superset.key_value.commands.exceptions import KeyValueAccessDeniedError
-from superset.key_value.commands.parameters import CommandParameters
-from superset.key_value.schemas import KeyValuePostSchema, KeyValuePutSchema
+from superset.temporary_cache.commands.exceptions import TemporaryCacheAccessDeniedError
+from superset.temporary_cache.commands.parameters import CommandParameters
+from superset.temporary_cache.schemas import (
+    TemporaryCachePostSchema,
+    TemporaryCachePutSchema,
+)
 from superset.views.base_api import requires_json
 
 logger = logging.getLogger(__name__)
 
 
-class KeyValueRestApi(BaseApi, ABC):
-    add_model_schema = KeyValuePostSchema()
-    edit_model_schema = KeyValuePutSchema()
+class TemporaryCacheRestApi(BaseApi, ABC):
+    add_model_schema = TemporaryCachePostSchema()
+    edit_model_schema = TemporaryCachePutSchema()
     method_permission_name = MODEL_API_RW_METHOD_PERMISSION_MAP
     include_route_methods = {
         RouteMethod.POST,
@@ -60,10 +63,10 @@ class KeyValueRestApi(BaseApi, ABC):
     def add_apispec_components(self, api_spec: APISpec) -> None:
         try:
             api_spec.components.schema(
-                KeyValuePostSchema.__name__, schema=KeyValuePostSchema,
+                TemporaryCachePostSchema.__name__, schema=TemporaryCachePostSchema,
             )
             api_spec.components.schema(
-                KeyValuePutSchema.__name__, schema=KeyValuePutSchema,
+                TemporaryCachePutSchema.__name__, schema=TemporaryCachePutSchema,
             )
         except DuplicateComponentNameError:
             pass
@@ -85,7 +88,7 @@ def post(self, pk: int) -> Response:
             ChartAccessDeniedError,
             DashboardAccessDeniedError,
             DatasetAccessDeniedError,
-            KeyValueAccessDeniedError,
+            TemporaryCacheAccessDeniedError,
         ) as ex:
             return self.response(403, message=str(ex))
         except (ChartNotFoundError, DashboardNotFoundError, DatasetNotFoundError) as ex:
@@ -111,7 +114,7 @@ def put(self, pk: int, key: str) -> Response:
             ChartAccessDeniedError,
             DashboardAccessDeniedError,
             DatasetAccessDeniedError,
-            KeyValueAccessDeniedError,
+            TemporaryCacheAccessDeniedError,
         ) as ex:
             return self.response(403, message=str(ex))
         except (ChartNotFoundError, DashboardNotFoundError, DatasetNotFoundError) as ex:
@@ -128,7 +131,7 @@ def get(self, pk: int, key: str) -> Response:
             ChartAccessDeniedError,
             DashboardAccessDeniedError,
             DatasetAccessDeniedError,
-            KeyValueAccessDeniedError,
+            TemporaryCacheAccessDeniedError,
         ) as ex:
             return self.response(403, message=str(ex))
         except (ChartNotFoundError, DashboardNotFoundError, DatasetNotFoundError) as ex:
@@ -145,7 +148,7 @@ def delete(self, pk: int, key: str) -> Response:
             ChartAccessDeniedError,
             DashboardAccessDeniedError,
             DatasetAccessDeniedError,
-            KeyValueAccessDeniedError,
+            TemporaryCacheAccessDeniedError,
         ) as ex:
             return self.response(403, message=str(ex))
         except (ChartNotFoundError, DashboardNotFoundError, DatasetNotFoundError) as ex:
diff --git a/superset/temporary_cache/commands/__init__.py b/superset/temporary_cache/commands/__init__.py
new file mode 100644
index 0000000000000..13a83393a9124
--- /dev/null
+++ b/superset/temporary_cache/commands/__init__.py
@@ -0,0 +1,16 @@
+# Licensed to the Apache Software Foundation (ASF) under one
+# or more contributor license agreements.  See the NOTICE file
+# distributed with this work for additional information
+# regarding copyright ownership.  The ASF licenses this file
+# to you under the Apache License, Version 2.0 (the
+# "License"); you may not use this file except in compliance
+# with the License.  You may obtain a copy of the License at
+#
+#   http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing,
+# software distributed under the License is distributed on an
+# "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+# KIND, either express or implied.  See the License for the
+# specific language governing permissions and limitations
+# under the License.
diff --git a/superset/temporary_cache/commands/create.py b/superset/temporary_cache/commands/create.py
new file mode 100644
index 0000000000000..af3b5350f652f
--- /dev/null
+++ b/superset/temporary_cache/commands/create.py
@@ -0,0 +1,45 @@
+# Licensed to the Apache Software Foundation (ASF) under one
+# or more contributor license agreements.  See the NOTICE file
+# distributed with this work for additional information
+# regarding copyright ownership.  The ASF licenses this file
+# to you under the Apache License, Version 2.0 (the
+# "License"); you may not use this file except in compliance
+# with the License.  You may obtain a copy of the License at
+#
+#   http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing,
+# software distributed under the License is distributed on an
+# "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+# KIND, either express or implied.  See the License for the
+# specific language governing permissions and limitations
+# under the License.
+import logging
+from abc import ABC, abstractmethod
+
+from sqlalchemy.exc import SQLAlchemyError
+
+from superset.commands.base import BaseCommand
+from superset.temporary_cache.commands.exceptions import TemporaryCacheCreateFailedError
+from superset.temporary_cache.commands.parameters import CommandParameters
+
+logger = logging.getLogger(__name__)
+
+
+class CreateTemporaryCacheCommand(BaseCommand, ABC):
+    def __init__(self, cmd_params: CommandParameters):
+        self._cmd_params = cmd_params
+
+    def run(self) -> str:
+        try:
+            return self.create(self._cmd_params)
+        except SQLAlchemyError as ex:
+            logger.exception("Error running create command")
+            raise TemporaryCacheCreateFailedError() from ex
+
+    def validate(self) -> None:
+        pass
+
+    @abstractmethod
+    def create(self, cmd_params: CommandParameters) -> str:
+        ...
diff --git a/superset/temporary_cache/commands/delete.py b/superset/temporary_cache/commands/delete.py
new file mode 100644
index 0000000000000..1281c8debf1fe
--- /dev/null
+++ b/superset/temporary_cache/commands/delete.py
@@ -0,0 +1,45 @@
+# Licensed to the Apache Software Foundation (ASF) under one
+# or more contributor license agreements.  See the NOTICE file
+# distributed with this work for additional information
+# regarding copyright ownership.  The ASF licenses this file
+# to you under the Apache License, Version 2.0 (the
+# "License"); you may not use this file except in compliance
+# with the License.  You may obtain a copy of the License at
+#
+#   http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing,
+# software distributed under the License is distributed on an
+# "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+# KIND, either express or implied.  See the License for the
+# specific language governing permissions and limitations
+# under the License.
+import logging
+from abc import ABC, abstractmethod
+
+from sqlalchemy.exc import SQLAlchemyError
+
+from superset.commands.base import BaseCommand
+from superset.temporary_cache.commands.exceptions import TemporaryCacheDeleteFailedError
+from superset.temporary_cache.commands.parameters import CommandParameters
+
+logger = logging.getLogger(__name__)
+
+
+class DeleteTemporaryCacheCommand(BaseCommand, ABC):
+    def __init__(self, cmd_params: CommandParameters):
+        self._cmd_params = cmd_params
+
+    def run(self) -> bool:
+        try:
+            return self.delete(self._cmd_params)
+        except SQLAlchemyError as ex:
+            logger.exception("Error running delete command")
+            raise TemporaryCacheDeleteFailedError() from ex
+
+    def validate(self) -> None:
+        pass
+
+    @abstractmethod
+    def delete(self, cmd_params: CommandParameters) -> bool:
+        ...
diff --git a/superset/key_value/commands/entry.py b/superset/temporary_cache/commands/entry.py
similarity index 100%
rename from superset/key_value/commands/entry.py
rename to superset/temporary_cache/commands/entry.py
diff --git a/superset/temporary_cache/commands/exceptions.py b/superset/temporary_cache/commands/exceptions.py
new file mode 100644
index 0000000000000..0f8c44cb18fd9
--- /dev/null
+++ b/superset/temporary_cache/commands/exceptions.py
@@ -0,0 +1,45 @@
+# Licensed to the Apache Software Foundation (ASF) under one
+# or more contributor license agreements.  See the NOTICE file
+# distributed with this work for additional information
+# regarding copyright ownership.  The ASF licenses this file
+# to you under the Apache License, Version 2.0 (the
+# "License"); you may not use this file except in compliance
+# with the License.  You may obtain a copy of the License at
+#
+#   http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing,
+# software distributed under the License is distributed on an
+# "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+# KIND, either express or implied.  See the License for the
+# specific language governing permissions and limitations
+# under the License.
+from flask_babel import lazy_gettext as _
+
+from superset.commands.exceptions import (
+    CommandException,
+    CreateFailedError,
+    DeleteFailedError,
+    ForbiddenError,
+    UpdateFailedError,
+)
+
+
+class TemporaryCacheCreateFailedError(CreateFailedError):
+    message = _("An error occurred while creating the value.")
+
+
+class TemporaryCacheGetFailedError(CommandException):
+    message = _("An error occurred while accessing the value.")
+
+
+class TemporaryCacheDeleteFailedError(DeleteFailedError):
+    message = _("An error occurred while deleting the value.")
+
+
+class TemporaryCacheUpdateFailedError(UpdateFailedError):
+    message = _("An error occurred while updating the value.")
+
+
+class TemporaryCacheAccessDeniedError(ForbiddenError):
+    message = _("You don't have permission to modify the value.")
diff --git a/superset/temporary_cache/commands/get.py b/superset/temporary_cache/commands/get.py
new file mode 100644
index 0000000000000..8c220b9c04583
--- /dev/null
+++ b/superset/temporary_cache/commands/get.py
@@ -0,0 +1,46 @@
+# Licensed to the Apache Software Foundation (ASF) under one
+# or more contributor license agreements.  See the NOTICE file
+# distributed with this work for additional information
+# regarding copyright ownership.  The ASF licenses this file
+# to you under the Apache License, Version 2.0 (the
+# "License"); you may not use this file except in compliance
+# with the License.  You may obtain a copy of the License at
+#
+#   http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing,
+# software distributed under the License is distributed on an
+# "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+# KIND, either express or implied.  See the License for the
+# specific language governing permissions and limitations
+# under the License.
+import logging
+from abc import ABC, abstractmethod
+from typing import Optional
+
+from sqlalchemy.exc import SQLAlchemyError
+
+from superset.commands.base import BaseCommand
+from superset.temporary_cache.commands.exceptions import TemporaryCacheGetFailedError
+from superset.temporary_cache.commands.parameters import CommandParameters
+
+logger = logging.getLogger(__name__)
+
+
+class GetTemporaryCacheCommand(BaseCommand, ABC):
+    def __init__(self, cmd_params: CommandParameters):
+        self._cmd_params = cmd_params
+
+    def run(self) -> Optional[str]:
+        try:
+            return self.get(self._cmd_params)
+        except SQLAlchemyError as ex:
+            logger.exception("Error running get command")
+            raise TemporaryCacheGetFailedError() from ex
+
+    def validate(self) -> None:
+        pass
+
+    @abstractmethod
+    def get(self, cmd_params: CommandParameters) -> Optional[str]:
+        ...
diff --git a/superset/key_value/commands/parameters.py b/superset/temporary_cache/commands/parameters.py
similarity index 100%
rename from superset/key_value/commands/parameters.py
rename to superset/temporary_cache/commands/parameters.py
diff --git a/superset/temporary_cache/commands/update.py b/superset/temporary_cache/commands/update.py
new file mode 100644
index 0000000000000..584e16690b61f
--- /dev/null
+++ b/superset/temporary_cache/commands/update.py
@@ -0,0 +1,48 @@
+# Licensed to the Apache Software Foundation (ASF) under one
+# or more contributor license agreements.  See the NOTICE file
+# distributed with this work for additional information
+# regarding copyright ownership.  The ASF licenses this file
+# to you under the Apache License, Version 2.0 (the
+# "License"); you may not use this file except in compliance
+# with the License.  You may obtain a copy of the License at
+#
+#   http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing,
+# software distributed under the License is distributed on an
+# "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+# KIND, either express or implied.  See the License for the
+# specific language governing permissions and limitations
+# under the License.
+import logging
+from abc import ABC, abstractmethod
+from typing import Optional
+
+from sqlalchemy.exc import SQLAlchemyError
+
+from superset.commands.base import BaseCommand
+from superset.temporary_cache.commands.exceptions import TemporaryCacheUpdateFailedError
+from superset.temporary_cache.commands.parameters import CommandParameters
+
+logger = logging.getLogger(__name__)
+
+
+class UpdateTemporaryCacheCommand(BaseCommand, ABC):
+    def __init__(
+        self, cmd_params: CommandParameters,
+    ):
+        self._parameters = cmd_params
+
+    def run(self) -> Optional[str]:
+        try:
+            return self.update(self._parameters)
+        except SQLAlchemyError as ex:
+            logger.exception("Error running update command")
+            raise TemporaryCacheUpdateFailedError() from ex
+
+    def validate(self) -> None:
+        pass
+
+    @abstractmethod
+    def update(self, cmd_params: CommandParameters) -> Optional[str]:
+        ...
diff --git a/superset/temporary_cache/schemas.py b/superset/temporary_cache/schemas.py
new file mode 100644
index 0000000000000..474d88b5fcf70
--- /dev/null
+++ b/superset/temporary_cache/schemas.py
@@ -0,0 +1,37 @@
+# Licensed to the Apache Software Foundation (ASF) under one
+# or more contributor license agreements.  See the NOTICE file
+# distributed with this work for additional information
+# regarding copyright ownership.  The ASF licenses this file
+# to you under the Apache License, Version 2.0 (the
+# "License"); you may not use this file except in compliance
+# with the License.  You may obtain a copy of the License at
+#
+#   http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing,
+# software distributed under the License is distributed on an
+# "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+# KIND, either express or implied.  See the License for the
+# specific language governing permissions and limitations
+# under the License.
+from marshmallow import fields, Schema
+
+from superset.utils.schema import validate_json
+
+
+class TemporaryCachePostSchema(Schema):
+    value = fields.String(
+        required=True,
+        allow_none=False,
+        description="Any type of JSON supported text.",
+        validate=validate_json,
+    )
+
+
+class TemporaryCachePutSchema(Schema):
+    value = fields.String(
+        required=True,
+        allow_none=False,
+        description="Any type of JSON supported text.",
+        validate=validate_json,
+    )
diff --git a/superset/temporary_cache/utils.py b/superset/temporary_cache/utils.py
new file mode 100644
index 0000000000000..2f2f71f957e08
--- /dev/null
+++ b/superset/temporary_cache/utils.py
@@ -0,0 +1,28 @@
+# Licensed to the Apache Software Foundation (ASF) under one
+# or more contributor license agreements.  See the NOTICE file
+# distributed with this work for additional information
+# regarding copyright ownership.  The ASF licenses this file
+# to you under the Apache License, Version 2.0 (the
+# "License"); you may not use this file except in compliance
+# with the License.  You may obtain a copy of the License at
+#
+#   http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing,
+# software distributed under the License is distributed on an
+# "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+# KIND, either express or implied.  See the License for the
+# specific language governing permissions and limitations
+# under the License.
+from secrets import token_urlsafe
+from typing import Any
+
+SEPARATOR = ";"
+
+
+def cache_key(*args: Any) -> str:
+    return SEPARATOR.join(str(arg) for arg in args)
+
+
+def random_key() -> str:
+    return token_urlsafe(48)
diff --git a/superset/views/core.py b/superset/views/core.py
index f69ee77bef2f0..32844807b60c7 100755
--- a/superset/views/core.py
+++ b/superset/views/core.py
@@ -57,6 +57,7 @@
     sql_lab,
     viz,
 )
+from superset.charts.commands.exceptions import ChartNotFoundError
 from superset.charts.dao import ChartDAO
 from superset.common.chart_data import ChartDataResultFormat, ChartDataResultType
 from superset.common.db_query_status import QueryStatus
@@ -70,6 +71,8 @@
 )
 from superset.dashboards.commands.importers.v0 import ImportDashboardsCommand
 from superset.dashboards.dao import DashboardDAO
+from superset.dashboards.permalink.commands.get import GetDashboardPermalinkCommand
+from superset.dashboards.permalink.exceptions import DashboardPermalinkGetFailedError
 from superset.databases.dao import DatabaseDAO
 from superset.databases.filters import DatabaseFilter
 from superset.datasets.commands.exceptions import DatasetNotFoundError
@@ -88,6 +91,8 @@
 )
 from superset.explore.form_data.commands.get import GetFormDataCommand
 from superset.explore.form_data.commands.parameters import CommandParameters
+from superset.explore.permalink.commands.get import GetExplorePermalinkCommand
+from superset.explore.permalink.exceptions import ExplorePermalinkGetFailedError
 from superset.extensions import async_query_manager, cache_manager
 from superset.jinja_context import get_template_processor
 from superset.models.core import Database, FavStar, Log
@@ -733,14 +738,36 @@ def import_dashboards(self) -> FlaskResponse:
     @event_logger.log_this
     @expose("/explore/<datasource_type>/<int:datasource_id>/", methods=["GET", "POST"])
     @expose("/explore/", methods=["GET", "POST"])
+    @expose("/explore/p/<key>/", methods=["GET"])
     # pylint: disable=too-many-locals,too-many-branches,too-many-statements
     def explore(
-        self, datasource_type: Optional[str] = None, datasource_id: Optional[int] = None
+        self,
+        datasource_type: Optional[str] = None,
+        datasource_id: Optional[int] = None,
+        key: Optional[str] = None,
     ) -> FlaskResponse:
         initial_form_data = {}
 
         form_data_key = request.args.get("form_data_key")
-        if form_data_key:
+        if key is not None:
+            key_type = config["PERMALINK_KEY_TYPE"]
+            command = GetExplorePermalinkCommand(g.user, key, key_type)
+            try:
+                permalink_value = command.run()
+                if permalink_value:
+                    state = permalink_value["state"]
+                    initial_form_data = state["formData"]
+                    url_params = state.get("urlParams")
+                    if url_params:
+                        initial_form_data["url_params"] = dict(url_params)
+                else:
+                    return json_error_response(
+                        _("Error: permalink state not found"), status=404
+                    )
+            except (ChartNotFoundError, ExplorePermalinkGetFailedError) as ex:
+                flash(__("Error: %(msg)s", msg=ex.message), "danger")
+                return redirect("/chart/list/")
+        elif form_data_key:
             parameters = CommandParameters(actor=g.user, key=form_data_key)
             value = GetFormDataCommand(parameters).run()
             initial_form_data = json.loads(value) if value else {}
@@ -1978,6 +2005,30 @@ def dashboard(
             ),
         )
 
+    @has_access
+    @expose("/dashboard/p/<key>/", methods=["GET"])
+    def dashboard_permalink(  # pylint: disable=no-self-use
+        self, key: str,
+    ) -> FlaskResponse:
+        key_type = config["PERMALINK_KEY_TYPE"]
+        try:
+            value = GetDashboardPermalinkCommand(g.user, key, key_type).run()
+        except DashboardPermalinkGetFailedError as ex:
+            flash(__("Error: %(msg)s", msg=ex.message), "danger")
+            return redirect("/dashboard/list/")
+        if not value:
+            return json_error_response(_("permalink state not found"), status=404)
+        dashboard_id = value["dashboardId"]
+        url = f"/superset/dashboard/{dashboard_id}?permalink_key={key}"
+        url_params = value["state"].get("urlParams")
+        if url_params:
+            params = parse.urlencode(url_params)
+            url = f"{url}&{params}"
+        hash_ = value["state"].get("hash")
+        if hash_:
+            url = f"{url}#{hash_}"
+        return redirect(url)
+
     @api
     @has_access
     @event_logger.log_this
diff --git a/superset/views/redirects.py b/superset/views/redirects.py
index da9613f3a0bb8..805d917f7e162 100644
--- a/superset/views/redirects.py
+++ b/superset/views/redirects.py
@@ -17,9 +17,8 @@
 import logging
 from typing import Optional
 
-from flask import flash, request, Response
+from flask import flash
 from flask_appbuilder import expose
-from flask_appbuilder.security.decorators import has_access_api
 from werkzeug.utils import redirect
 
 from superset import db, event_logger
@@ -58,21 +57,3 @@ def index(self, url_id: int) -> FlaskResponse:
 
         flash("URL to nowhere...", "danger")
         return redirect("/")
-
-    @event_logger.log_this
-    @has_access_api
-    @expose("/shortner/", methods=["POST"])
-    def shortner(self) -> FlaskResponse:
-        url = request.form.get("data")
-        if not self._validate_url(url):
-            logger.warning("Invalid URL")
-            return Response("Invalid URL", 400)
-        obj = models.Url(url=url)
-        db.session.add(obj)
-        db.session.commit()
-        return Response(
-            "{scheme}://{request.headers[Host]}/r/{obj.id}".format(
-                scheme=request.scheme, request=request, obj=obj
-            ),
-            mimetype="text/plain",
-        )
diff --git a/tests/integration_tests/core_tests.py b/tests/integration_tests/core_tests.py
index dd8f3a910d764..337becbe48387 100644
--- a/tests/integration_tests/core_tests.py
+++ b/tests/integration_tests/core_tests.py
@@ -690,30 +690,6 @@ def test_cache_logging(self):
         assert ck.datasource_uid == f"{girls_slice.table.id}__table"
         app.config["STORE_CACHE_KEYS_IN_METADATA_DB"] = store_cache_keys
 
-    def test_shortner(self):
-        self.login(username="admin")
-        data = (
-            "//superset/explore/table/1/?viz_type=sankey&groupby=source&"
-            "groupby=target&metric=sum__value&row_limit=5000&where=&having=&"
-            "flt_col_0=source&flt_op_0=in&flt_eq_0=&slice_id=78&slice_name="
-            "Energy+Sankey&collapsed_fieldsets=&action=&datasource_name="
-            "energy_usage&datasource_id=1&datasource_type=table&"
-            "previous_viz_type=sankey"
-        )
-        resp = self.client.post("/r/shortner/", data=dict(data=data))
-        assert re.search(r"\/r\/[0-9]+", resp.data.decode("utf-8"))
-
-    def test_shortner_invalid(self):
-        self.login(username="admin")
-        invalid_urls = [
-            "hhttp://invalid.com",
-            "hhttps://invalid.com",
-            "www.invalid.com",
-        ]
-        for invalid_url in invalid_urls:
-            resp = self.client.post("/r/shortner/", data=dict(data=invalid_url))
-            assert resp.status_code == 400
-
     def test_redirect_invalid(self):
         model_url = models.Url(url="hhttp://invalid.com")
         db.session.add(model_url)
diff --git a/tests/integration_tests/dashboards/filter_state/api_tests.py b/tests/integration_tests/dashboards/filter_state/api_tests.py
index 3816f6ac87337..ea00f2e6714f5 100644
--- a/tests/integration_tests/dashboards/filter_state/api_tests.py
+++ b/tests/integration_tests/dashboards/filter_state/api_tests.py
@@ -23,25 +23,20 @@
 
 from superset.dashboards.commands.exceptions import DashboardAccessDeniedError
 from superset.extensions import cache_manager
-from superset.key_value.commands.entry import Entry
-from superset.key_value.utils import cache_key
 from superset.models.dashboard import Dashboard
+from superset.temporary_cache.commands.entry import Entry
+from superset.temporary_cache.utils import cache_key
 from tests.integration_tests.base_tests import login
+from tests.integration_tests.fixtures.client import client
 from tests.integration_tests.fixtures.world_bank_dashboard import (
     load_world_bank_dashboard_with_slices,
     load_world_bank_data,
 )
 from tests.integration_tests.test_app import app
 
-key = "test-key"
-value = "test"
-
-
-@pytest.fixture
-def client():
-    with app.test_client() as client:
-        with app.app_context():
-            yield client
+KEY = "test-key"
+INITIAL_VALUE = json.dumps({"test": "initial value"})
+UPDATED_VALUE = json.dumps({"test": "updated value"})
 
 
 @pytest.fixture
@@ -62,20 +57,20 @@ def admin_id() -> int:
 
 @pytest.fixture(autouse=True)
 def cache(dashboard_id, admin_id):
-    entry: Entry = {"owner": admin_id, "value": value}
-    cache_manager.filter_state_cache.set(cache_key(dashboard_id, key), entry)
+    entry: Entry = {"owner": admin_id, "value": INITIAL_VALUE}
+    cache_manager.filter_state_cache.set(cache_key(dashboard_id, KEY), entry)
 
 
 def test_post(client, dashboard_id: int):
     login(client, "admin")
     payload = {
-        "value": value,
+        "value": INITIAL_VALUE,
     }
     resp = client.post(f"api/v1/dashboard/{dashboard_id}/filter_state", json=payload)
     assert resp.status_code == 201
 
 
-def test_post_bad_request(client, dashboard_id: int):
+def test_post_bad_request_non_string(client, dashboard_id: int):
     login(client, "admin")
     payload = {
         "value": 1234,
@@ -84,12 +79,21 @@ def test_post_bad_request(client, dashboard_id: int):
     assert resp.status_code == 400
 
 
+def test_post_bad_request_non_json_string(client, dashboard_id: int):
+    login(client, "admin")
+    payload = {
+        "value": "foo",
+    }
+    resp = client.post(f"api/v1/dashboard/{dashboard_id}/filter_state", json=payload)
+    assert resp.status_code == 400
+
+
 @patch("superset.security.SupersetSecurityManager.raise_for_dashboard_access")
 def test_post_access_denied(mock_raise_for_dashboard_access, client, dashboard_id: int):
     login(client, "admin")
     mock_raise_for_dashboard_access.side_effect = DashboardAccessDeniedError()
     payload = {
-        "value": value,
+        "value": INITIAL_VALUE,
     }
     resp = client.post(f"api/v1/dashboard/{dashboard_id}/filter_state", json=payload)
     assert resp.status_code == 403
@@ -98,7 +102,7 @@ def test_post_access_denied(mock_raise_for_dashboard_access, client, dashboard_i
 def test_post_same_key_for_same_tab_id(client, dashboard_id: int):
     login(client, "admin")
     payload = {
-        "value": value,
+        "value": INITIAL_VALUE,
     }
     resp = client.post(
         f"api/v1/dashboard/{dashboard_id}/filter_state?tab_id=1", json=payload
@@ -116,7 +120,7 @@ def test_post_same_key_for_same_tab_id(client, dashboard_id: int):
 def test_post_different_key_for_different_tab_id(client, dashboard_id: int):
     login(client, "admin")
     payload = {
-        "value": value,
+        "value": INITIAL_VALUE,
     }
     resp = client.post(
         f"api/v1/dashboard/{dashboard_id}/filter_state?tab_id=1", json=payload
@@ -134,7 +138,7 @@ def test_post_different_key_for_different_tab_id(client, dashboard_id: int):
 def test_post_different_key_for_no_tab_id(client, dashboard_id: int):
     login(client, "admin")
     payload = {
-        "value": value,
+        "value": INITIAL_VALUE,
     }
     resp = client.post(f"api/v1/dashboard/{dashboard_id}/filter_state", json=payload)
     data = json.loads(resp.data.decode("utf-8"))
@@ -148,10 +152,10 @@ def test_post_different_key_for_no_tab_id(client, dashboard_id: int):
 def test_put(client, dashboard_id: int):
     login(client, "admin")
     payload = {
-        "value": "new value",
+        "value": UPDATED_VALUE,
     }
     resp = client.put(
-        f"api/v1/dashboard/{dashboard_id}/filter_state/{key}", json=payload
+        f"api/v1/dashboard/{dashboard_id}/filter_state/{KEY}", json=payload
     )
     assert resp.status_code == 200
 
@@ -159,15 +163,15 @@ def test_put(client, dashboard_id: int):
 def test_put_same_key_for_same_tab_id(client, dashboard_id: int):
     login(client, "admin")
     payload = {
-        "value": value,
+        "value": INITIAL_VALUE,
     }
     resp = client.put(
-        f"api/v1/dashboard/{dashboard_id}/filter_state/{key}?tab_id=1", json=payload
+        f"api/v1/dashboard/{dashboard_id}/filter_state/{KEY}?tab_id=1", json=payload
     )
     data = json.loads(resp.data.decode("utf-8"))
     first_key = data.get("key")
     resp = client.put(
-        f"api/v1/dashboard/{dashboard_id}/filter_state/{key}?tab_id=1", json=payload
+        f"api/v1/dashboard/{dashboard_id}/filter_state/{KEY}?tab_id=1", json=payload
     )
     data = json.loads(resp.data.decode("utf-8"))
     second_key = data.get("key")
@@ -177,15 +181,15 @@ def test_put_same_key_for_same_tab_id(client, dashboard_id: int):
 def test_put_different_key_for_different_tab_id(client, dashboard_id: int):
     login(client, "admin")
     payload = {
-        "value": value,
+        "value": INITIAL_VALUE,
     }
     resp = client.put(
-        f"api/v1/dashboard/{dashboard_id}/filter_state/{key}?tab_id=1", json=payload
+        f"api/v1/dashboard/{dashboard_id}/filter_state/{KEY}?tab_id=1", json=payload
     )
     data = json.loads(resp.data.decode("utf-8"))
     first_key = data.get("key")
     resp = client.put(
-        f"api/v1/dashboard/{dashboard_id}/filter_state/{key}?tab_id=2", json=payload
+        f"api/v1/dashboard/{dashboard_id}/filter_state/{KEY}?tab_id=2", json=payload
     )
     data = json.loads(resp.data.decode("utf-8"))
     second_key = data.get("key")
@@ -195,28 +199,39 @@ def test_put_different_key_for_different_tab_id(client, dashboard_id: int):
 def test_put_different_key_for_no_tab_id(client, dashboard_id: int):
     login(client, "admin")
     payload = {
-        "value": value,
+        "value": INITIAL_VALUE,
     }
     resp = client.put(
-        f"api/v1/dashboard/{dashboard_id}/filter_state/{key}", json=payload
+        f"api/v1/dashboard/{dashboard_id}/filter_state/{KEY}", json=payload
     )
     data = json.loads(resp.data.decode("utf-8"))
     first_key = data.get("key")
     resp = client.put(
-        f"api/v1/dashboard/{dashboard_id}/filter_state/{key}", json=payload
+        f"api/v1/dashboard/{dashboard_id}/filter_state/{KEY}", json=payload
     )
     data = json.loads(resp.data.decode("utf-8"))
     second_key = data.get("key")
     assert first_key != second_key
 
 
-def test_put_bad_request(client, dashboard_id: int):
+def test_put_bad_request_non_string(client, dashboard_id: int):
     login(client, "admin")
     payload = {
         "value": 1234,
     }
     resp = client.put(
-        f"api/v1/dashboard/{dashboard_id}/filter_state/{key}", json=payload
+        f"api/v1/dashboard/{dashboard_id}/filter_state/{KEY}", json=payload
+    )
+    assert resp.status_code == 400
+
+
+def test_put_bad_request_non_json_string(client, dashboard_id: int):
+    login(client, "admin")
+    payload = {
+        "value": "foo",
+    }
+    resp = client.put(
+        f"api/v1/dashboard/{dashboard_id}/filter_state/{KEY}", json=payload
     )
     assert resp.status_code == 400
 
@@ -226,10 +241,10 @@ def test_put_access_denied(mock_raise_for_dashboard_access, client, dashboard_id
     login(client, "admin")
     mock_raise_for_dashboard_access.side_effect = DashboardAccessDeniedError()
     payload = {
-        "value": "new value",
+        "value": UPDATED_VALUE,
     }
     resp = client.put(
-        f"api/v1/dashboard/{dashboard_id}/filter_state/{key}", json=payload
+        f"api/v1/dashboard/{dashboard_id}/filter_state/{KEY}", json=payload
     )
     assert resp.status_code == 403
 
@@ -237,10 +252,10 @@ def test_put_access_denied(mock_raise_for_dashboard_access, client, dashboard_id
 def test_put_not_owner(client, dashboard_id: int):
     login(client, "gamma")
     payload = {
-        "value": "new value",
+        "value": UPDATED_VALUE,
     }
     resp = client.put(
-        f"api/v1/dashboard/{dashboard_id}/filter_state/{key}", json=payload
+        f"api/v1/dashboard/{dashboard_id}/filter_state/{KEY}", json=payload
     )
     assert resp.status_code == 403
 
@@ -253,29 +268,29 @@ def test_get_key_not_found(client, dashboard_id: int):
 
 def test_get_dashboard_not_found(client):
     login(client, "admin")
-    resp = client.get(f"api/v1/dashboard/{-1}/filter_state/{key}")
+    resp = client.get(f"api/v1/dashboard/{-1}/filter_state/{KEY}")
     assert resp.status_code == 404
 
 
 def test_get(client, dashboard_id: int):
     login(client, "admin")
-    resp = client.get(f"api/v1/dashboard/{dashboard_id}/filter_state/{key}")
+    resp = client.get(f"api/v1/dashboard/{dashboard_id}/filter_state/{KEY}")
     assert resp.status_code == 200
     data = json.loads(resp.data.decode("utf-8"))
-    assert value == data.get("value")
+    assert INITIAL_VALUE == data.get("value")
 
 
 @patch("superset.security.SupersetSecurityManager.raise_for_dashboard_access")
 def test_get_access_denied(mock_raise_for_dashboard_access, client, dashboard_id):
     login(client, "admin")
     mock_raise_for_dashboard_access.side_effect = DashboardAccessDeniedError()
-    resp = client.get(f"api/v1/dashboard/{dashboard_id}/filter_state/{key}")
+    resp = client.get(f"api/v1/dashboard/{dashboard_id}/filter_state/{KEY}")
     assert resp.status_code == 403
 
 
 def test_delete(client, dashboard_id: int):
     login(client, "admin")
-    resp = client.delete(f"api/v1/dashboard/{dashboard_id}/filter_state/{key}")
+    resp = client.delete(f"api/v1/dashboard/{dashboard_id}/filter_state/{KEY}")
     assert resp.status_code == 200
 
 
@@ -285,11 +300,11 @@ def test_delete_access_denied(
 ):
     login(client, "admin")
     mock_raise_for_dashboard_access.side_effect = DashboardAccessDeniedError()
-    resp = client.delete(f"api/v1/dashboard/{dashboard_id}/filter_state/{key}")
+    resp = client.delete(f"api/v1/dashboard/{dashboard_id}/filter_state/{KEY}")
     assert resp.status_code == 403
 
 
 def test_delete_not_owner(client, dashboard_id: int):
     login(client, "gamma")
-    resp = client.delete(f"api/v1/dashboard/{dashboard_id}/filter_state/{key}")
+    resp = client.delete(f"api/v1/dashboard/{dashboard_id}/filter_state/{KEY}")
     assert resp.status_code == 403
diff --git a/tests/integration_tests/dashboards/permalink/__init__.py b/tests/integration_tests/dashboards/permalink/__init__.py
new file mode 100644
index 0000000000000..13a83393a9124
--- /dev/null
+++ b/tests/integration_tests/dashboards/permalink/__init__.py
@@ -0,0 +1,16 @@
+# Licensed to the Apache Software Foundation (ASF) under one
+# or more contributor license agreements.  See the NOTICE file
+# distributed with this work for additional information
+# regarding copyright ownership.  The ASF licenses this file
+# to you under the Apache License, Version 2.0 (the
+# "License"); you may not use this file except in compliance
+# with the License.  You may obtain a copy of the License at
+#
+#   http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing,
+# software distributed under the License is distributed on an
+# "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+# KIND, either express or implied.  See the License for the
+# specific language governing permissions and limitations
+# under the License.
diff --git a/tests/integration_tests/dashboards/permalink/api_tests.py b/tests/integration_tests/dashboards/permalink/api_tests.py
new file mode 100644
index 0000000000000..bd821165dc337
--- /dev/null
+++ b/tests/integration_tests/dashboards/permalink/api_tests.py
@@ -0,0 +1,90 @@
+# Licensed to the Apache Software Foundation (ASF) under one
+# or more contributor license agreements.  See the NOTICE file
+# distributed with this work for additional information
+# regarding copyright ownership.  The ASF licenses this file
+# to you under the Apache License, Version 2.0 (the
+# "License"); you may not use this file except in compliance
+# with the License.  You may obtain a copy of the License at
+#
+#   http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing,
+# software distributed under the License is distributed on an
+# "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+# KIND, either express or implied.  See the License for the
+# specific language governing permissions and limitations
+# under the License.
+import json
+from unittest.mock import patch
+
+import pytest
+from flask_appbuilder.security.sqla.models import User
+from sqlalchemy.orm import Session
+
+from superset import db
+from superset.dashboards.commands.exceptions import DashboardAccessDeniedError
+from superset.key_value.models import KeyValueEntry
+from superset.models.dashboard import Dashboard
+from superset.models.slice import Slice
+from tests.integration_tests.base_tests import login
+from tests.integration_tests.fixtures.client import client
+from tests.integration_tests.fixtures.world_bank_dashboard import (
+    load_world_bank_dashboard_with_slices,
+    load_world_bank_data,
+)
+from tests.integration_tests.test_app import app
+
+STATE = {
+    "filterState": {"FILTER_1": "foo",},
+    "hash": "my-anchor",
+}
+
+
+@pytest.fixture
+def dashboard_id(load_world_bank_dashboard_with_slices) -> int:
+    with app.app_context() as ctx:
+        session: Session = ctx.app.appbuilder.get_session
+        dashboard = session.query(Dashboard).filter_by(slug="world_health").one()
+        return dashboard.id
+
+
+def test_post(client, dashboard_id: int):
+    login(client, "admin")
+    resp = client.post(f"api/v1/dashboard/{dashboard_id}/permalink", json=STATE)
+    assert resp.status_code == 201
+    data = json.loads(resp.data.decode("utf-8"))
+    key = data["key"]
+    url = data["url"]
+    assert key in url
+    db.session.query(KeyValueEntry).filter_by(uuid=key).delete()
+    db.session.commit()
+
+
+@patch("superset.security.SupersetSecurityManager.raise_for_dashboard_access")
+def test_post_access_denied(mock_raise_for_dashboard_access, client, dashboard_id: int):
+    login(client, "admin")
+    mock_raise_for_dashboard_access.side_effect = DashboardAccessDeniedError()
+    resp = client.post(f"api/v1/dashboard/{dashboard_id}/permalink", json=STATE)
+    assert resp.status_code == 403
+
+
+def test_post_invalid_schema(client, dashboard_id: int):
+    login(client, "admin")
+    resp = client.post(
+        f"api/v1/dashboard/{dashboard_id}/permalink", json={"foo": "bar"}
+    )
+    assert resp.status_code == 400
+
+
+def test_get(client, dashboard_id: int):
+    login(client, "admin")
+    resp = client.post(f"api/v1/dashboard/{dashboard_id}/permalink", json=STATE)
+    data = json.loads(resp.data.decode("utf-8"))
+    key = data["key"]
+    resp = client.get(f"api/v1/dashboard/permalink/{key}")
+    assert resp.status_code == 200
+    result = json.loads(resp.data.decode("utf-8"))
+    assert result["dashboardId"] == str(dashboard_id)
+    assert result["state"] == STATE
+    db.session.query(KeyValueEntry).filter_by(uuid=key).delete()
+    db.session.commit()
diff --git a/tests/integration_tests/explore/form_data/api_tests.py b/tests/integration_tests/explore/form_data/api_tests.py
index 4b646a03586de..c05be00e96186 100644
--- a/tests/integration_tests/explore/form_data/api_tests.py
+++ b/tests/integration_tests/explore/form_data/api_tests.py
@@ -27,21 +27,16 @@
 from superset.extensions import cache_manager
 from superset.models.slice import Slice
 from tests.integration_tests.base_tests import login
+from tests.integration_tests.fixtures.client import client
 from tests.integration_tests.fixtures.world_bank_dashboard import (
     load_world_bank_dashboard_with_slices,
     load_world_bank_data,
 )
 from tests.integration_tests.test_app import app
 
-key = "test-key"
-form_data = "test"
-
-
-@pytest.fixture
-def client():
-    with app.test_client() as client:
-        with app.app_context():
-            yield client
+KEY = "test-key"
+INITIAL_FORM_DATA = json.dumps({"test": "initial value"})
+UPDATED_FORM_DATA = json.dumps({"test": "updated value"})
 
 
 @pytest.fixture
@@ -78,9 +73,9 @@ def cache(chart_id, admin_id, dataset_id):
         "owner": admin_id,
         "dataset_id": dataset_id,
         "chart_id": chart_id,
-        "form_data": form_data,
+        "form_data": INITIAL_FORM_DATA,
     }
-    cache_manager.explore_form_data_cache.set(key, entry)
+    cache_manager.explore_form_data_cache.set(KEY, entry)
 
 
 def test_post(client, chart_id: int, dataset_id: int):
@@ -88,13 +83,13 @@ def test_post(client, chart_id: int, dataset_id: int):
     payload = {
         "dataset_id": dataset_id,
         "chart_id": chart_id,
-        "form_data": form_data,
+        "form_data": INITIAL_FORM_DATA,
     }
     resp = client.post("api/v1/explore/form_data", json=payload)
     assert resp.status_code == 201
 
 
-def test_post_bad_request(client, chart_id: int, dataset_id: int):
+def test_post_bad_request_non_string(client, chart_id: int, dataset_id: int):
     login(client, "admin")
     payload = {
         "dataset_id": dataset_id,
@@ -105,12 +100,23 @@ def test_post_bad_request(client, chart_id: int, dataset_id: int):
     assert resp.status_code == 400
 
 
+def test_post_bad_request_non_json_string(client, chart_id: int, dataset_id: int):
+    login(client, "admin")
+    payload = {
+        "dataset_id": dataset_id,
+        "chart_id": chart_id,
+        "form_data": "foo",
+    }
+    resp = client.post("api/v1/explore/form_data", json=payload)
+    assert resp.status_code == 400
+
+
 def test_post_access_denied(client, chart_id: int, dataset_id: int):
     login(client, "gamma")
     payload = {
         "dataset_id": dataset_id,
         "chart_id": chart_id,
-        "form_data": form_data,
+        "form_data": INITIAL_FORM_DATA,
     }
     resp = client.post("api/v1/explore/form_data", json=payload)
     assert resp.status_code == 404
@@ -121,7 +127,7 @@ def test_post_same_key_for_same_context(client, chart_id: int, dataset_id: int):
     payload = {
         "dataset_id": dataset_id,
         "chart_id": chart_id,
-        "form_data": "new form_data",
+        "form_data": UPDATED_FORM_DATA,
     }
     resp = client.post("api/v1/explore/form_data?tab_id=1", json=payload)
     data = json.loads(resp.data.decode("utf-8"))
@@ -139,14 +145,14 @@ def test_post_different_key_for_different_context(
     payload = {
         "dataset_id": dataset_id,
         "chart_id": chart_id,
-        "form_data": "new form_data",
+        "form_data": UPDATED_FORM_DATA,
     }
     resp = client.post("api/v1/explore/form_data?tab_id=1", json=payload)
     data = json.loads(resp.data.decode("utf-8"))
     first_key = data.get("key")
     payload = {
         "dataset_id": dataset_id,
-        "form_data": "new form_data",
+        "form_data": json.dumps({"test": "initial value"}),
     }
     resp = client.post("api/v1/explore/form_data?tab_id=1", json=payload)
     data = json.loads(resp.data.decode("utf-8"))
@@ -159,7 +165,7 @@ def test_post_same_key_for_same_tab_id(client, chart_id: int, dataset_id: int):
     payload = {
         "dataset_id": dataset_id,
         "chart_id": chart_id,
-        "form_data": "new form_data",
+        "form_data": json.dumps({"test": "initial value"}),
     }
     resp = client.post("api/v1/explore/form_data?tab_id=1", json=payload)
     data = json.loads(resp.data.decode("utf-8"))
@@ -177,7 +183,7 @@ def test_post_different_key_for_different_tab_id(
     payload = {
         "dataset_id": dataset_id,
         "chart_id": chart_id,
-        "form_data": "new form_data",
+        "form_data": json.dumps({"test": "initial value"}),
     }
     resp = client.post("api/v1/explore/form_data?tab_id=1", json=payload)
     data = json.loads(resp.data.decode("utf-8"))
@@ -193,7 +199,7 @@ def test_post_different_key_for_no_tab_id(client, chart_id: int, dataset_id: int
     payload = {
         "dataset_id": dataset_id,
         "chart_id": chart_id,
-        "form_data": "new form_data",
+        "form_data": INITIAL_FORM_DATA,
     }
     resp = client.post("api/v1/explore/form_data", json=payload)
     data = json.loads(resp.data.decode("utf-8"))
@@ -209,9 +215,9 @@ def test_put(client, chart_id: int, dataset_id: int):
     payload = {
         "dataset_id": dataset_id,
         "chart_id": chart_id,
-        "form_data": "new form_data",
+        "form_data": UPDATED_FORM_DATA,
     }
-    resp = client.put(f"api/v1/explore/form_data/{key}", json=payload)
+    resp = client.put(f"api/v1/explore/form_data/{KEY}", json=payload)
     assert resp.status_code == 200
 
 
@@ -220,12 +226,12 @@ def test_put_same_key_for_same_tab_id(client, chart_id: int, dataset_id: int):
     payload = {
         "dataset_id": dataset_id,
         "chart_id": chart_id,
-        "form_data": "new form_data",
+        "form_data": UPDATED_FORM_DATA,
     }
-    resp = client.put(f"api/v1/explore/form_data/{key}?tab_id=1", json=payload)
+    resp = client.put(f"api/v1/explore/form_data/{KEY}?tab_id=1", json=payload)
     data = json.loads(resp.data.decode("utf-8"))
     first_key = data.get("key")
-    resp = client.put(f"api/v1/explore/form_data/{key}?tab_id=1", json=payload)
+    resp = client.put(f"api/v1/explore/form_data/{KEY}?tab_id=1", json=payload)
     data = json.loads(resp.data.decode("utf-8"))
     second_key = data.get("key")
     assert first_key == second_key
@@ -236,12 +242,12 @@ def test_put_different_key_for_different_tab_id(client, chart_id: int, dataset_i
     payload = {
         "dataset_id": dataset_id,
         "chart_id": chart_id,
-        "form_data": "new form_data",
+        "form_data": UPDATED_FORM_DATA,
     }
-    resp = client.put(f"api/v1/explore/form_data/{key}?tab_id=1", json=payload)
+    resp = client.put(f"api/v1/explore/form_data/{KEY}?tab_id=1", json=payload)
     data = json.loads(resp.data.decode("utf-8"))
     first_key = data.get("key")
-    resp = client.put(f"api/v1/explore/form_data/{key}?tab_id=2", json=payload)
+    resp = client.put(f"api/v1/explore/form_data/{KEY}?tab_id=2", json=payload)
     data = json.loads(resp.data.decode("utf-8"))
     second_key = data.get("key")
     assert first_key != second_key
@@ -252,12 +258,12 @@ def test_put_different_key_for_no_tab_id(client, chart_id: int, dataset_id: int)
     payload = {
         "dataset_id": dataset_id,
         "chart_id": chart_id,
-        "form_data": "new form_data",
+        "form_data": UPDATED_FORM_DATA,
     }
-    resp = client.put(f"api/v1/explore/form_data/{key}", json=payload)
+    resp = client.put(f"api/v1/explore/form_data/{KEY}", json=payload)
     data = json.loads(resp.data.decode("utf-8"))
     first_key = data.get("key")
-    resp = client.put(f"api/v1/explore/form_data/{key}", json=payload)
+    resp = client.put(f"api/v1/explore/form_data/{KEY}", json=payload)
     data = json.loads(resp.data.decode("utf-8"))
     second_key = data.get("key")
     assert first_key != second_key
@@ -270,7 +276,29 @@ def test_put_bad_request(client, chart_id: int, dataset_id: int):
         "chart_id": chart_id,
         "form_data": 1234,
     }
-    resp = client.put(f"api/v1/explore/form_data/{key}", json=payload)
+    resp = client.put(f"api/v1/explore/form_data/{KEY}", json=payload)
+    assert resp.status_code == 400
+
+
+def test_put_bad_request_non_string(client, chart_id: int, dataset_id: int):
+    login(client, "admin")
+    payload = {
+        "dataset_id": dataset_id,
+        "chart_id": chart_id,
+        "form_data": 1234,
+    }
+    resp = client.put(f"api/v1/explore/form_data/{KEY}", json=payload)
+    assert resp.status_code == 400
+
+
+def test_put_bad_request_non_json_string(client, chart_id: int, dataset_id: int):
+    login(client, "admin")
+    payload = {
+        "dataset_id": dataset_id,
+        "chart_id": chart_id,
+        "form_data": "foo",
+    }
+    resp = client.put(f"api/v1/explore/form_data/{KEY}", json=payload)
     assert resp.status_code == 400
 
 
@@ -279,9 +307,9 @@ def test_put_access_denied(client, chart_id: int, dataset_id: int):
     payload = {
         "dataset_id": dataset_id,
         "chart_id": chart_id,
-        "form_data": "new form_data",
+        "form_data": UPDATED_FORM_DATA,
     }
-    resp = client.put(f"api/v1/explore/form_data/{key}", json=payload)
+    resp = client.put(f"api/v1/explore/form_data/{KEY}", json=payload)
     assert resp.status_code == 404
 
 
@@ -290,9 +318,9 @@ def test_put_not_owner(client, chart_id: int, dataset_id: int):
     payload = {
         "dataset_id": dataset_id,
         "chart_id": chart_id,
-        "form_data": "new form_data",
+        "form_data": UPDATED_FORM_DATA,
     }
-    resp = client.put(f"api/v1/explore/form_data/{key}", json=payload)
+    resp = client.put(f"api/v1/explore/form_data/{KEY}", json=payload)
     assert resp.status_code == 404
 
 
@@ -304,15 +332,15 @@ def test_get_key_not_found(client):
 
 def test_get(client):
     login(client, "admin")
-    resp = client.get(f"api/v1/explore/form_data/{key}")
+    resp = client.get(f"api/v1/explore/form_data/{KEY}")
     assert resp.status_code == 200
     data = json.loads(resp.data.decode("utf-8"))
-    assert form_data == data.get("form_data")
+    assert INITIAL_FORM_DATA == data.get("form_data")
 
 
 def test_get_access_denied(client):
     login(client, "gamma")
-    resp = client.get(f"api/v1/explore/form_data/{key}")
+    resp = client.get(f"api/v1/explore/form_data/{KEY}")
     assert resp.status_code == 404
 
 
@@ -320,19 +348,19 @@ def test_get_access_denied(client):
 def test_get_dataset_access_denied(mock_can_access_datasource, client):
     mock_can_access_datasource.side_effect = DatasetAccessDeniedError()
     login(client, "admin")
-    resp = client.get(f"api/v1/explore/form_data/{key}")
+    resp = client.get(f"api/v1/explore/form_data/{KEY}")
     assert resp.status_code == 403
 
 
 def test_delete(client):
     login(client, "admin")
-    resp = client.delete(f"api/v1/explore/form_data/{key}")
+    resp = client.delete(f"api/v1/explore/form_data/{KEY}")
     assert resp.status_code == 200
 
 
 def test_delete_access_denied(client):
     login(client, "gamma")
-    resp = client.delete(f"api/v1/explore/form_data/{key}")
+    resp = client.delete(f"api/v1/explore/form_data/{KEY}")
     assert resp.status_code == 404
 
 
@@ -343,7 +371,7 @@ def test_delete_not_owner(client, chart_id: int, dataset_id: int, admin_id: int)
         "owner": another_owner,
         "dataset_id": dataset_id,
         "chart_id": chart_id,
-        "form_data": form_data,
+        "form_data": INITIAL_FORM_DATA,
     }
     cache_manager.explore_form_data_cache.set(another_key, entry)
     login(client, "admin")
diff --git a/tests/integration_tests/explore/permalink/__init__.py b/tests/integration_tests/explore/permalink/__init__.py
new file mode 100644
index 0000000000000..13a83393a9124
--- /dev/null
+++ b/tests/integration_tests/explore/permalink/__init__.py
@@ -0,0 +1,16 @@
+# Licensed to the Apache Software Foundation (ASF) under one
+# or more contributor license agreements.  See the NOTICE file
+# distributed with this work for additional information
+# regarding copyright ownership.  The ASF licenses this file
+# to you under the Apache License, Version 2.0 (the
+# "License"); you may not use this file except in compliance
+# with the License.  You may obtain a copy of the License at
+#
+#   http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing,
+# software distributed under the License is distributed on an
+# "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+# KIND, either express or implied.  See the License for the
+# specific language governing permissions and limitations
+# under the License.
diff --git a/tests/integration_tests/explore/permalink/api_tests.py b/tests/integration_tests/explore/permalink/api_tests.py
new file mode 100644
index 0000000000000..37b0d2455d80c
--- /dev/null
+++ b/tests/integration_tests/explore/permalink/api_tests.py
@@ -0,0 +1,117 @@
+# Licensed to the Apache Software Foundation (ASF) under one
+# or more contributor license agreements.  See the NOTICE file
+# distributed with this work for additional information
+# regarding copyright ownership.  The ASF licenses this file
+# to you under the Apache License, Version 2.0 (the
+# "License"); you may not use this file except in compliance
+# with the License.  You may obtain a copy of the License at
+#
+#   http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing,
+# software distributed under the License is distributed on an
+# "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+# KIND, either express or implied.  See the License for the
+# specific language governing permissions and limitations
+# under the License.
+import json
+import pickle
+from typing import Any, Dict
+from uuid import UUID
+
+import pytest
+from sqlalchemy.orm import Session
+
+from superset import db
+from superset.key_value.models import KeyValueEntry
+from superset.models.slice import Slice
+from tests.integration_tests.base_tests import login
+from tests.integration_tests.fixtures.client import client
+from tests.integration_tests.fixtures.world_bank_dashboard import (
+    load_world_bank_dashboard_with_slices,
+    load_world_bank_data,
+)
+from tests.integration_tests.test_app import app
+
+
+@pytest.fixture
+def chart(load_world_bank_dashboard_with_slices) -> Slice:
+    with app.app_context() as ctx:
+        session: Session = ctx.app.appbuilder.get_session
+        chart = session.query(Slice).filter_by(slice_name="World's Population").one()
+        return chart
+
+
+@pytest.fixture
+def form_data(chart) -> Dict[str, Any]:
+    datasource = f"{chart.datasource.id}__{chart.datasource.type}"
+    return {
+        "chart_id": chart.id,
+        "datasource": datasource,
+    }
+
+
+def test_post(client, form_data):
+    login(client, "admin")
+    resp = client.post(f"api/v1/explore/permalink", json={"formData": form_data})
+    assert resp.status_code == 201
+    data = json.loads(resp.data.decode("utf-8"))
+    key = data["key"]
+    url = data["url"]
+    assert key in url
+    db.session.query(KeyValueEntry).filter_by(uuid=key).delete()
+    db.session.commit()
+
+
+def test_post_access_denied(client, form_data):
+    login(client, "gamma")
+    resp = client.post(f"api/v1/explore/permalink", json={"formData": form_data})
+    assert resp.status_code == 404
+
+
+def test_get_missing_chart(client, chart):
+    from superset.key_value.models import KeyValueEntry
+
+    key = 1234
+    uuid_key = "e2ea9d19-7988-4862-aa69-c3a1a7628cb9"
+    entry = KeyValueEntry(
+        id=int(key),
+        uuid=UUID("e2ea9d19-7988-4862-aa69-c3a1a7628cb9"),
+        resource="explore_permalink",
+        value=pickle.dumps(
+            {
+                "chartId": key,
+                "datasetId": chart.datasource.id,
+                "formData": {
+                    "slice_id": key,
+                    "datasource": f"{chart.datasource.id}__{chart.datasource.type}",
+                },
+            }
+        ),
+    )
+    db.session.add(entry)
+    db.session.commit()
+    login(client, "admin")
+    resp = client.get(f"api/v1/explore/permalink/{uuid_key}")
+    assert resp.status_code == 404
+    db.session.delete(entry)
+    db.session.commit()
+
+
+def test_post_invalid_schema(client):
+    login(client, "admin")
+    resp = client.post(f"api/v1/explore/permalink", json={"abc": 123})
+    assert resp.status_code == 400
+
+
+def test_get(client, form_data):
+    login(client, "admin")
+    resp = client.post(f"api/v1/explore/permalink", json={"formData": form_data})
+    data = json.loads(resp.data.decode("utf-8"))
+    key = data["key"]
+    resp = client.get(f"api/v1/explore/permalink/{key}")
+    assert resp.status_code == 200
+    result = json.loads(resp.data.decode("utf-8"))
+    assert result["state"]["formData"] == form_data
+    db.session.query(KeyValueEntry).filter_by(uuid=key).delete()
+    db.session.commit()
diff --git a/tests/integration_tests/fixtures/client.py b/tests/integration_tests/fixtures/client.py
new file mode 100644
index 0000000000000..f532f438fda4f
--- /dev/null
+++ b/tests/integration_tests/fixtures/client.py
@@ -0,0 +1,26 @@
+# Licensed to the Apache Software Foundation (ASF) under one
+# or more contributor license agreements.  See the NOTICE file
+# distributed with this work for additional information
+# regarding copyright ownership.  The ASF licenses this file
+# to you under the Apache License, Version 2.0 (the
+# "License"); you may not use this file except in compliance
+# with the License.  You may obtain a copy of the License at
+#
+#   http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing,
+# software distributed under the License is distributed on an
+# "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+# KIND, either express or implied.  See the License for the
+# specific language governing permissions and limitations
+# under the License.
+import pytest
+
+from tests.integration_tests.test_app import app
+
+
+@pytest.fixture
+def client():
+    with app.test_client() as client:
+        with app.app_context():
+            yield client
diff --git a/tests/integration_tests/key_value/__init__.py b/tests/integration_tests/key_value/__init__.py
new file mode 100644
index 0000000000000..13a83393a9124
--- /dev/null
+++ b/tests/integration_tests/key_value/__init__.py
@@ -0,0 +1,16 @@
+# Licensed to the Apache Software Foundation (ASF) under one
+# or more contributor license agreements.  See the NOTICE file
+# distributed with this work for additional information
+# regarding copyright ownership.  The ASF licenses this file
+# to you under the Apache License, Version 2.0 (the
+# "License"); you may not use this file except in compliance
+# with the License.  You may obtain a copy of the License at
+#
+#   http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing,
+# software distributed under the License is distributed on an
+# "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+# KIND, either express or implied.  See the License for the
+# specific language governing permissions and limitations
+# under the License.
diff --git a/tests/integration_tests/key_value/commands/__init__.py b/tests/integration_tests/key_value/commands/__init__.py
new file mode 100644
index 0000000000000..13a83393a9124
--- /dev/null
+++ b/tests/integration_tests/key_value/commands/__init__.py
@@ -0,0 +1,16 @@
+# Licensed to the Apache Software Foundation (ASF) under one
+# or more contributor license agreements.  See the NOTICE file
+# distributed with this work for additional information
+# regarding copyright ownership.  The ASF licenses this file
+# to you under the Apache License, Version 2.0 (the
+# "License"); you may not use this file except in compliance
+# with the License.  You may obtain a copy of the License at
+#
+#   http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing,
+# software distributed under the License is distributed on an
+# "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+# KIND, either express or implied.  See the License for the
+# specific language governing permissions and limitations
+# under the License.
diff --git a/tests/integration_tests/key_value/commands/create_test.py b/tests/integration_tests/key_value/commands/create_test.py
new file mode 100644
index 0000000000000..22a1b517485c8
--- /dev/null
+++ b/tests/integration_tests/key_value/commands/create_test.py
@@ -0,0 +1,64 @@
+# Licensed to the Apache Software Foundation (ASF) under one
+# or more contributor license agreements.  See the NOTICE file
+# distributed with this work for additional information
+# regarding copyright ownership.  The ASF licenses this file
+# to you under the Apache License, Version 2.0 (the
+# "License"); you may not use this file except in compliance
+# with the License.  You may obtain a copy of the License at
+#
+#   http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing,
+# software distributed under the License is distributed on an
+# "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+# KIND, either express or implied.  See the License for the
+# specific language governing permissions and limitations
+# under the License.
+from __future__ import annotations
+
+import pickle
+from uuid import UUID
+
+from flask.ctx import AppContext
+from flask_appbuilder.security.sqla.models import User
+
+from superset.extensions import db
+from tests.integration_tests.key_value.commands.fixtures import (
+    admin,
+    ID_KEY,
+    RESOURCE,
+    UUID_KEY,
+    VALUE,
+)
+
+
+def test_create_id_entry(app_context: AppContext, admin: User) -> None:
+    from superset.key_value.commands.create import CreateKeyValueCommand
+    from superset.key_value.models import KeyValueEntry
+
+    key = CreateKeyValueCommand(
+        actor=admin, resource=RESOURCE, value=VALUE, key_type="id",
+    ).run()
+    entry = (
+        db.session.query(KeyValueEntry).filter_by(id=int(key)).autoflush(False).one()
+    )
+    assert pickle.loads(entry.value) == VALUE
+    assert entry.created_by_fk == admin.id
+    db.session.delete(entry)
+    db.session.commit()
+
+
+def test_create_uuid_entry(app_context: AppContext, admin: User) -> None:
+    from superset.key_value.commands.create import CreateKeyValueCommand
+    from superset.key_value.models import KeyValueEntry
+
+    key = CreateKeyValueCommand(
+        actor=admin, resource=RESOURCE, value=VALUE, key_type="uuid",
+    ).run()
+    entry = (
+        db.session.query(KeyValueEntry).filter_by(uuid=UUID(key)).autoflush(False).one()
+    )
+    assert pickle.loads(entry.value) == VALUE
+    assert entry.created_by_fk == admin.id
+    db.session.delete(entry)
+    db.session.commit()
diff --git a/tests/integration_tests/key_value/commands/delete_test.py b/tests/integration_tests/key_value/commands/delete_test.py
new file mode 100644
index 0000000000000..3a25cb7d0edc7
--- /dev/null
+++ b/tests/integration_tests/key_value/commands/delete_test.py
@@ -0,0 +1,91 @@
+# Licensed to the Apache Software Foundation (ASF) under one
+# or more contributor license agreements.  See the NOTICE file
+# distributed with this work for additional information
+# regarding copyright ownership.  The ASF licenses this file
+# to you under the Apache License, Version 2.0 (the
+# "License"); you may not use this file except in compliance
+# with the License.  You may obtain a copy of the License at
+#
+#   http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing,
+# software distributed under the License is distributed on an
+# "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+# KIND, either express or implied.  See the License for the
+# specific language governing permissions and limitations
+# under the License.
+from __future__ import annotations
+
+import pickle
+from typing import TYPE_CHECKING
+from uuid import UUID
+
+import pytest
+from flask.ctx import AppContext
+from flask_appbuilder.security.sqla.models import User
+
+from superset.extensions import db
+from tests.integration_tests.key_value.commands.fixtures import admin, RESOURCE, VALUE
+
+if TYPE_CHECKING:
+    from superset.key_value.models import KeyValueEntry
+
+ID_KEY = "234"
+UUID_KEY = "5aae143c-44f1-478e-9153-ae6154df333a"
+
+
+@pytest.fixture
+def key_value_entry() -> KeyValueEntry:
+    from superset.key_value.models import KeyValueEntry
+
+    entry = KeyValueEntry(
+        id=int(ID_KEY),
+        uuid=UUID(UUID_KEY),
+        resource=RESOURCE,
+        value=pickle.dumps(VALUE),
+    )
+    db.session.add(entry)
+    db.session.commit()
+    return entry
+
+
+def test_delete_id_entry(
+    app_context: AppContext, admin: User, key_value_entry: KeyValueEntry,
+) -> None:
+    from superset.key_value.commands.delete import DeleteKeyValueCommand
+    from superset.key_value.models import KeyValueEntry
+
+    assert (
+        DeleteKeyValueCommand(
+            actor=admin, resource=RESOURCE, key=ID_KEY, key_type="id",
+        ).run()
+        is True
+    )
+
+
+def test_delete_uuid_entry(
+    app_context: AppContext, admin: User, key_value_entry: KeyValueEntry,
+) -> None:
+    from superset.key_value.commands.delete import DeleteKeyValueCommand
+    from superset.key_value.models import KeyValueEntry
+
+    assert (
+        DeleteKeyValueCommand(
+            actor=admin, resource=RESOURCE, key=UUID_KEY, key_type="uuid",
+        ).run()
+        is True
+    )
+
+
+def test_delete_entry_missing(
+    app_context: AppContext, admin: User, key_value_entry: KeyValueEntry,
+) -> None:
+    from superset.key_value.commands.delete import DeleteKeyValueCommand
+    from superset.key_value.models import KeyValueEntry
+
+    assert (
+        DeleteKeyValueCommand(
+            actor=admin, resource=RESOURCE, key="456", key_type="id",
+        ).run()
+        is False
+    )
diff --git a/tests/integration_tests/key_value/commands/fixtures.py b/tests/integration_tests/key_value/commands/fixtures.py
new file mode 100644
index 0000000000000..44e12f7854cb2
--- /dev/null
+++ b/tests/integration_tests/key_value/commands/fixtures.py
@@ -0,0 +1,62 @@
+# Licensed to the Apache Software Foundation (ASF) under one
+# or more contributor license agreements.  See the NOTICE file
+# distributed with this work for additional information
+# regarding copyright ownership.  The ASF licenses this file
+# to you under the Apache License, Version 2.0 (the
+# "License"); you may not use this file except in compliance
+# with the License.  You may obtain a copy of the License at
+#
+#   http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing,
+# software distributed under the License is distributed on an
+# "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+# KIND, either express or implied.  See the License for the
+# specific language governing permissions and limitations
+# under the License.
+
+from __future__ import annotations
+
+import pickle
+from typing import Generator, TYPE_CHECKING
+from uuid import UUID
+
+import pytest
+from flask_appbuilder.security.sqla.models import User
+from sqlalchemy.orm import Session
+
+from superset.extensions import db
+from tests.integration_tests.test_app import app
+
+if TYPE_CHECKING:
+    from superset.key_value.models import KeyValueEntry
+
+ID_KEY = "123"
+UUID_KEY = "3e7a2ab8-bcaf-49b0-a5df-dfb432f291cc"
+RESOURCE = "my_resource"
+VALUE = {"foo": "bar"}
+
+
+@pytest.fixture
+def key_value_entry() -> Generator[KeyValueEntry, None, None]:
+    from superset.key_value.models import KeyValueEntry
+
+    entry = KeyValueEntry(
+        id=int(ID_KEY),
+        uuid=UUID(UUID_KEY),
+        resource=RESOURCE,
+        value=pickle.dumps(VALUE),
+    )
+    db.session.add(entry)
+    db.session.commit()
+    yield entry
+    db.session.delete(entry)
+    db.session.commit()
+
+
+@pytest.fixture
+def admin() -> User:
+    with app.app_context() as ctx:
+        session: Session = ctx.app.appbuilder.get_session
+        admin = session.query(User).filter_by(username="admin").one()
+        return admin
diff --git a/tests/integration_tests/key_value/commands/get_test.py b/tests/integration_tests/key_value/commands/get_test.py
new file mode 100644
index 0000000000000..20efa9dfbd4c5
--- /dev/null
+++ b/tests/integration_tests/key_value/commands/get_test.py
@@ -0,0 +1,100 @@
+# Licensed to the Apache Software Foundation (ASF) under one
+# or more contributor license agreements.  See the NOTICE file
+# distributed with this work for additional information
+# regarding copyright ownership.  The ASF licenses this file
+# to you under the Apache License, Version 2.0 (the
+# "License"); you may not use this file except in compliance
+# with the License.  You may obtain a copy of the License at
+#
+#   http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing,
+# software distributed under the License is distributed on an
+# "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+# KIND, either express or implied.  See the License for the
+# specific language governing permissions and limitations
+# under the License.
+from __future__ import annotations
+
+import pickle
+import uuid
+from datetime import datetime, timedelta
+from typing import TYPE_CHECKING
+
+from flask.ctx import AppContext
+
+from superset.extensions import db
+from tests.integration_tests.key_value.commands.fixtures import (
+    ID_KEY,
+    key_value_entry,
+    RESOURCE,
+    UUID_KEY,
+    VALUE,
+)
+
+if TYPE_CHECKING:
+    from superset.key_value.models import KeyValueEntry
+
+
+def test_get_id_entry(app_context: AppContext, key_value_entry: KeyValueEntry) -> None:
+    from superset.key_value.commands.get import GetKeyValueCommand
+
+    value = GetKeyValueCommand(resource=RESOURCE, key=ID_KEY, key_type="id").run()
+    assert value == VALUE
+
+
+def test_get_uuid_entry(
+    app_context: AppContext, key_value_entry: KeyValueEntry
+) -> None:
+    from superset.key_value.commands.get import GetKeyValueCommand
+
+    value = GetKeyValueCommand(resource=RESOURCE, key=UUID_KEY, key_type="uuid").run()
+    assert value == VALUE
+
+
+def test_get_id_entry_missing(
+    app_context: AppContext, key_value_entry: KeyValueEntry,
+) -> None:
+    from superset.key_value.commands.get import GetKeyValueCommand
+
+    value = GetKeyValueCommand(resource=RESOURCE, key="456", key_type="id").run()
+    assert value is None
+
+
+def test_get_expired_entry(app_context: AppContext) -> None:
+    from superset.key_value.commands.get import GetKeyValueCommand
+    from superset.key_value.models import KeyValueEntry
+
+    entry = KeyValueEntry(
+        id=678,
+        uuid=uuid.uuid4(),
+        resource=RESOURCE,
+        value=pickle.dumps(VALUE),
+        expires_on=datetime.now() - timedelta(days=1),
+    )
+    db.session.add(entry)
+    db.session.commit()
+    value = GetKeyValueCommand(resource=RESOURCE, key=ID_KEY, key_type="id").run()
+    assert value is None
+    db.session.delete(entry)
+    db.session.commit()
+
+
+def test_get_future_expiring_entry(app_context: AppContext) -> None:
+    from superset.key_value.commands.get import GetKeyValueCommand
+    from superset.key_value.models import KeyValueEntry
+
+    id_ = 789
+    entry = KeyValueEntry(
+        id=id_,
+        uuid=uuid.uuid4(),
+        resource=RESOURCE,
+        value=pickle.dumps(VALUE),
+        expires_on=datetime.now() + timedelta(days=1),
+    )
+    db.session.add(entry)
+    db.session.commit()
+    value = GetKeyValueCommand(resource=RESOURCE, key=str(id_), key_type="id").run()
+    assert value == VALUE
+    db.session.delete(entry)
+    db.session.commit()
diff --git a/tests/integration_tests/key_value/commands/update_test.py b/tests/integration_tests/key_value/commands/update_test.py
new file mode 100644
index 0000000000000..1fbc84d59e332
--- /dev/null
+++ b/tests/integration_tests/key_value/commands/update_test.py
@@ -0,0 +1,87 @@
+# Licensed to the Apache Software Foundation (ASF) under one
+# or more contributor license agreements.  See the NOTICE file
+# distributed with this work for additional information
+# regarding copyright ownership.  The ASF licenses this file
+# to you under the Apache License, Version 2.0 (the
+# "License"); you may not use this file except in compliance
+# with the License.  You may obtain a copy of the License at
+#
+#   http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing,
+# software distributed under the License is distributed on an
+# "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+# KIND, either express or implied.  See the License for the
+# specific language governing permissions and limitations
+# under the License.
+from __future__ import annotations
+
+import pickle
+from typing import TYPE_CHECKING
+from uuid import UUID
+
+from flask.ctx import AppContext
+from flask_appbuilder.security.sqla.models import User
+
+from superset.extensions import db
+from tests.integration_tests.key_value.commands.fixtures import (
+    admin,
+    ID_KEY,
+    key_value_entry,
+    RESOURCE,
+    UUID_KEY,
+)
+
+if TYPE_CHECKING:
+    from superset.key_value.models import KeyValueEntry
+
+
+NEW_VALUE = "new value"
+
+
+def test_update_id_entry(
+    app_context: AppContext, admin: User, key_value_entry: KeyValueEntry,
+) -> None:
+    from superset.key_value.commands.update import UpdateKeyValueCommand
+    from superset.key_value.models import KeyValueEntry
+
+    key = UpdateKeyValueCommand(
+        actor=admin, resource=RESOURCE, key=ID_KEY, value=NEW_VALUE, key_type="id",
+    ).run()
+    assert key == ID_KEY
+    entry = (
+        db.session.query(KeyValueEntry).filter_by(id=int(ID_KEY)).autoflush(False).one()
+    )
+    assert pickle.loads(entry.value) == NEW_VALUE
+    assert entry.changed_by_fk == admin.id
+
+
+def test_update_uuid_entry(
+    app_context: AppContext, admin: User, key_value_entry: KeyValueEntry,
+) -> None:
+    from superset.key_value.commands.update import UpdateKeyValueCommand
+    from superset.key_value.models import KeyValueEntry
+
+    key = UpdateKeyValueCommand(
+        actor=admin, resource=RESOURCE, key=UUID_KEY, value=NEW_VALUE, key_type="uuid",
+    ).run()
+    assert key == UUID_KEY
+    entry = (
+        db.session.query(KeyValueEntry)
+        .filter_by(uuid=UUID(UUID_KEY))
+        .autoflush(False)
+        .one()
+    )
+    assert pickle.loads(entry.value) == NEW_VALUE
+    assert entry.changed_by_fk == admin.id
+
+
+def test_update_missing_entry(
+    app_context: AppContext, admin: User, key_value_entry: KeyValueEntry,
+) -> None:
+    from superset.key_value.commands.update import UpdateKeyValueCommand
+
+    key = UpdateKeyValueCommand(
+        actor=admin, resource=RESOURCE, key="456", value=NEW_VALUE, key_type="id",
+    ).run()
+    assert key is None
diff --git a/tests/unit_tests/explore/form_data/utils_test.py b/tests/unit_tests/explore/utils_test.py
similarity index 88%
rename from tests/unit_tests/explore/form_data/utils_test.py
rename to tests/unit_tests/explore/utils_test.py
index 4025dc951e11c..3d12f5e911ee9 100644
--- a/tests/unit_tests/explore/form_data/utils_test.py
+++ b/tests/unit_tests/explore/utils_test.py
@@ -30,8 +30,8 @@
 
 dataset_find_by_id = "superset.datasets.dao.DatasetDAO.find_by_id"
 chart_find_by_id = "superset.charts.dao.ChartDAO.find_by_id"
-is_user_admin = "superset.explore.form_data.utils.is_user_admin"
-is_owner = "superset.explore.form_data.utils.is_owner"
+is_user_admin = "superset.explore.utils.is_user_admin"
+is_owner = "superset.explore.utils.is_owner"
 can_access_datasource = (
     "superset.security.SupersetSecurityManager.can_access_datasource"
 )
@@ -39,7 +39,7 @@
 
 
 def test_unsaved_chart_no_dataset_id(app_context: AppContext) -> None:
-    from superset.explore.form_data.utils import check_access
+    from superset.explore.utils import check_access
 
     with raises(DatasetNotFoundError):
         check_access(dataset_id=0, chart_id=0, actor=User())
@@ -48,7 +48,7 @@ def test_unsaved_chart_no_dataset_id(app_context: AppContext) -> None:
 def test_unsaved_chart_unknown_dataset_id(
     mocker: MockFixture, app_context: AppContext
 ) -> None:
-    from superset.explore.form_data.utils import check_access
+    from superset.explore.utils import check_access
 
     with raises(DatasetNotFoundError):
         mocker.patch(dataset_find_by_id, return_value=None)
@@ -59,7 +59,7 @@ def test_unsaved_chart_unauthorized_dataset(
     mocker: MockFixture, app_context: AppContext
 ) -> None:
     from superset.connectors.sqla.models import SqlaTable
-    from superset.explore.form_data import utils
+    from superset.explore import utils
 
     with raises(DatasetAccessDeniedError):
         mocker.patch(dataset_find_by_id, return_value=SqlaTable())
@@ -71,7 +71,7 @@ def test_unsaved_chart_authorized_dataset(
     mocker: MockFixture, app_context: AppContext
 ) -> None:
     from superset.connectors.sqla.models import SqlaTable
-    from superset.explore.form_data.utils import check_access
+    from superset.explore.utils import check_access
 
     mocker.patch(dataset_find_by_id, return_value=SqlaTable())
     mocker.patch(can_access_datasource, return_value=True)
@@ -82,7 +82,7 @@ def test_saved_chart_unknown_chart_id(
     mocker: MockFixture, app_context: AppContext
 ) -> None:
     from superset.connectors.sqla.models import SqlaTable
-    from superset.explore.form_data.utils import check_access
+    from superset.explore.utils import check_access
 
     with raises(ChartNotFoundError):
         mocker.patch(dataset_find_by_id, return_value=SqlaTable())
@@ -95,7 +95,7 @@ def test_saved_chart_unauthorized_dataset(
     mocker: MockFixture, app_context: AppContext
 ) -> None:
     from superset.connectors.sqla.models import SqlaTable
-    from superset.explore.form_data import utils
+    from superset.explore import utils
 
     with raises(DatasetAccessDeniedError):
         mocker.patch(dataset_find_by_id, return_value=SqlaTable())
@@ -105,19 +105,19 @@ def test_saved_chart_unauthorized_dataset(
 
 def test_saved_chart_is_admin(mocker: MockFixture, app_context: AppContext) -> None:
     from superset.connectors.sqla.models import SqlaTable
-    from superset.explore.form_data.utils import check_access
+    from superset.explore.utils import check_access
     from superset.models.slice import Slice
 
     mocker.patch(dataset_find_by_id, return_value=SqlaTable())
     mocker.patch(can_access_datasource, return_value=True)
     mocker.patch(is_user_admin, return_value=True)
     mocker.patch(chart_find_by_id, return_value=Slice())
-    assert check_access(dataset_id=1, chart_id=1, actor=User()) == True
+    assert check_access(dataset_id=1, chart_id=1, actor=User()) is True
 
 
 def test_saved_chart_is_owner(mocker: MockFixture, app_context: AppContext) -> None:
     from superset.connectors.sqla.models import SqlaTable
-    from superset.explore.form_data.utils import check_access
+    from superset.explore.utils import check_access
     from superset.models.slice import Slice
 
     mocker.patch(dataset_find_by_id, return_value=SqlaTable())
@@ -130,7 +130,7 @@ def test_saved_chart_is_owner(mocker: MockFixture, app_context: AppContext) -> N
 
 def test_saved_chart_has_access(mocker: MockFixture, app_context: AppContext) -> None:
     from superset.connectors.sqla.models import SqlaTable
-    from superset.explore.form_data.utils import check_access
+    from superset.explore.utils import check_access
     from superset.models.slice import Slice
 
     mocker.patch(dataset_find_by_id, return_value=SqlaTable())
@@ -144,7 +144,7 @@ def test_saved_chart_has_access(mocker: MockFixture, app_context: AppContext) ->
 
 def test_saved_chart_no_access(mocker: MockFixture, app_context: AppContext) -> None:
     from superset.connectors.sqla.models import SqlaTable
-    from superset.explore.form_data.utils import check_access
+    from superset.explore.utils import check_access
     from superset.models.slice import Slice
 
     with raises(ChartAccessDeniedError):
diff --git a/tests/unit_tests/key_value/__init__.py b/tests/unit_tests/key_value/__init__.py
new file mode 100644
index 0000000000000..13a83393a9124
--- /dev/null
+++ b/tests/unit_tests/key_value/__init__.py
@@ -0,0 +1,16 @@
+# Licensed to the Apache Software Foundation (ASF) under one
+# or more contributor license agreements.  See the NOTICE file
+# distributed with this work for additional information
+# regarding copyright ownership.  The ASF licenses this file
+# to you under the Apache License, Version 2.0 (the
+# "License"); you may not use this file except in compliance
+# with the License.  You may obtain a copy of the License at
+#
+#   http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing,
+# software distributed under the License is distributed on an
+# "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+# KIND, either express or implied.  See the License for the
+# specific language governing permissions and limitations
+# under the License.
diff --git a/tests/unit_tests/key_value/utils_test.py b/tests/unit_tests/key_value/utils_test.py
new file mode 100644
index 0000000000000..f5ad0958bc749
--- /dev/null
+++ b/tests/unit_tests/key_value/utils_test.py
@@ -0,0 +1,117 @@
+# Licensed to the Apache Software Foundation (ASF) under one
+# or more contributor license agreements.  See the NOTICE file
+# distributed with this work for additional information
+# regarding copyright ownership.  The ASF licenses this file
+# to you under the Apache License, Version 2.0 (the
+# "License"); you may not use this file except in compliance
+# with the License.  You may obtain a copy of the License at
+#
+#   http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing,
+# software distributed under the License is distributed on an
+# "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+# KIND, either express or implied.  See the License for the
+# specific language governing permissions and limitations
+# under the License.
+from __future__ import annotations
+
+import json
+from typing import TYPE_CHECKING
+from unittest.mock import patch
+from uuid import UUID
+
+if TYPE_CHECKING:
+    from superset.key_value.models import KeyValueEntry
+
+import pytest
+from flask.ctx import AppContext
+
+from superset.key_value.types import Key
+
+RESOURCE = "my-resource"
+UUID_KEY = "3e7a2ab8-bcaf-49b0-a5df-dfb432f291cc"
+ID_KEY = "123"
+
+
+@pytest.fixture
+def key_value_entry(app_context: AppContext):
+    from superset.key_value.models import KeyValueEntry
+
+    return KeyValueEntry(
+        id=int(ID_KEY), uuid=UUID(UUID_KEY), value=json.dumps({"foo": "bar"}),
+    )
+
+
+def test_parse_permalink_key_uuid_valid(app_context: AppContext) -> None:
+    from superset.key_value.utils import parse_permalink_key
+
+    assert parse_permalink_key(UUID_KEY) == Key(id=None, uuid=UUID(UUID_KEY))
+
+
+def test_parse_permalink_key_id_invalid(app_context: AppContext) -> None:
+    from superset.key_value.utils import parse_permalink_key
+
+    with pytest.raises(ValueError):
+        parse_permalink_key(ID_KEY)
+
+
+@patch("superset.key_value.utils.current_app.config", {"PERMALINK_KEY_TYPE": "id"})
+def test_parse_permalink_key_id_valid(app_context: AppContext) -> None:
+    from superset.key_value.utils import parse_permalink_key
+
+    assert parse_permalink_key(ID_KEY) == Key(id=int(ID_KEY), uuid=None)
+
+
+@patch("superset.key_value.utils.current_app.config", {"PERMALINK_KEY_TYPE": "id"})
+def test_parse_permalink_key_uuid_invalid(app_context: AppContext) -> None:
+    from superset.key_value.utils import parse_permalink_key
+
+    with pytest.raises(ValueError):
+        parse_permalink_key(UUID_KEY)
+
+
+def test_format_permalink_key_uuid(app_context: AppContext) -> None:
+    from superset.key_value.utils import format_permalink_key
+
+    assert format_permalink_key(Key(id=None, uuid=UUID(UUID_KEY))) == UUID_KEY
+
+
+def test_format_permalink_key_id(app_context: AppContext) -> None:
+    from superset.key_value.utils import format_permalink_key
+
+    assert format_permalink_key(Key(id=int(ID_KEY), uuid=None)) == ID_KEY
+
+
+def test_extract_key_uuid(
+    app_context: AppContext, key_value_entry: KeyValueEntry,
+) -> None:
+    from superset.key_value.utils import extract_key
+
+    assert extract_key(key_value_entry, "id") == ID_KEY
+
+
+def test_extract_key_id(
+    app_context: AppContext, key_value_entry: KeyValueEntry,
+) -> None:
+    from superset.key_value.utils import extract_key
+
+    assert extract_key(key_value_entry, "uuid") == UUID_KEY
+
+
+def test_get_filter_uuid(app_context: AppContext,) -> None:
+    from superset.key_value.utils import get_filter
+
+    assert get_filter(resource=RESOURCE, key=UUID_KEY, key_type="uuid",) == {
+        "resource": RESOURCE,
+        "uuid": UUID(UUID_KEY),
+    }
+
+
+def test_get_filter_id(app_context: AppContext,) -> None:
+    from superset.key_value.utils import get_filter
+
+    assert get_filter(resource=RESOURCE, key=ID_KEY, key_type="id",) == {
+        "resource": RESOURCE,
+        "id": int(ID_KEY),
+    }

From a4848a2f46fdcd86e4f66343bba80838e4de4c82 Mon Sep 17 00:00:00 2001
From: Beto Dealmeida <roberto@dealmeida.net>
Date: Wed, 16 Mar 2022 18:01:31 -0700
Subject: [PATCH 13/17] chore: refactor import command (#19216)

---
 superset/commands/importers/v1/__init__.py | 53 ++++----------------
 superset/commands/importers/v1/utils.py    | 56 +++++++++++++++++++++-
 2 files changed, 63 insertions(+), 46 deletions(-)

diff --git a/superset/commands/importers/v1/__init__.py b/superset/commands/importers/v1/__init__.py
index 89891f48e597a..c620ec9f2ac85 100644
--- a/superset/commands/importers/v1/__init__.py
+++ b/superset/commands/importers/v1/__init__.py
@@ -24,9 +24,11 @@
 from superset.commands.base import BaseCommand
 from superset.commands.exceptions import CommandException, CommandInvalidError
 from superset.commands.importers.v1.utils import (
+    load_configs,
     load_metadata,
     load_yaml,
     METADATA_FILE_NAME,
+    validate_metadata_type,
 )
 from superset.dao.base import BaseDAO
 from superset.models.core import Database
@@ -78,9 +80,13 @@ def validate(self) -> None:
         except ValidationError as exc:
             exceptions.append(exc)
             metadata = None
+        if self.dao.model_cls:
+            validate_metadata_type(metadata, self.dao.model_cls.__name__, exceptions)
 
-        self._validate_metadata_type(metadata, exceptions)
-        self._load__configs(exceptions)
+        # load the configs and make sure we have confirmation to overwrite existing models
+        self._configs = load_configs(
+            self.contents, self.schemas, self.passwords, exceptions
+        )
         self._prevent_overwrite_existing_model(exceptions)
 
         if exceptions:
@@ -88,49 +94,6 @@ def validate(self) -> None:
             exception.add_list(exceptions)
             raise exception
 
-    def _validate_metadata_type(
-        self, metadata: Optional[Dict[str, str]], exceptions: List[ValidationError]
-    ) -> None:
-        """Validate that the type declared in METADATA_FILE_NAME is correct"""
-        if metadata and "type" in metadata:
-            type_validator = validate.Equal(self.dao.model_cls.__name__)  # type: ignore
-            try:
-                type_validator(metadata["type"])
-            except ValidationError as exc:
-                exc.messages = {METADATA_FILE_NAME: {"type": exc.messages}}
-                exceptions.append(exc)
-
-    def _load__configs(self, exceptions: List[ValidationError]) -> None:
-        # load existing databases so we can apply the password validation
-        db_passwords: Dict[str, str] = {
-            str(uuid): password
-            for uuid, password in db.session.query(
-                Database.uuid, Database.password
-            ).all()
-        }
-        for file_name, content in self.contents.items():
-            # skip directories
-            if not content:
-                continue
-
-            prefix = file_name.split("/")[0]
-            schema = self.schemas.get(f"{prefix}/")
-            if schema:
-                try:
-                    config = load_yaml(file_name, content)
-
-                    # populate passwords from the request or from existing DBs
-                    if file_name in self.passwords:
-                        config["password"] = self.passwords[file_name]
-                    elif prefix == "databases" and config["uuid"] in db_passwords:
-                        config["password"] = db_passwords[config["uuid"]]
-
-                    schema.load(config)
-                    self._configs[file_name] = config
-                except ValidationError as exc:
-                    exc.messages = {file_name: exc.messages}
-                    exceptions.append(exc)
-
     def _prevent_overwrite_existing_model(  # pylint: disable=invalid-name
         self, exceptions: List[ValidationError]
     ) -> None:
diff --git a/superset/commands/importers/v1/utils.py b/superset/commands/importers/v1/utils.py
index 15bec8278ca75..de86e3f3cc6ab 100644
--- a/superset/commands/importers/v1/utils.py
+++ b/superset/commands/importers/v1/utils.py
@@ -15,14 +15,16 @@
 
 import logging
 from pathlib import Path
-from typing import Any, Dict
+from typing import Any, Dict, List, Optional
 from zipfile import ZipFile
 
 import yaml
 from marshmallow import fields, Schema, validate
 from marshmallow.exceptions import ValidationError
 
+from superset import db
 from superset.commands.importers.exceptions import IncorrectVersionError
+from superset.models.core import Database
 
 METADATA_FILE_NAME = "metadata.yaml"
 IMPORT_VERSION = "1.0.0"
@@ -76,6 +78,58 @@ def load_metadata(contents: Dict[str, str]) -> Dict[str, str]:
     return metadata
 
 
+def validate_metadata_type(
+    metadata: Optional[Dict[str, str]], type_: str, exceptions: List[ValidationError],
+) -> None:
+    """Validate that the type declared in METADATA_FILE_NAME is correct"""
+    if metadata and "type" in metadata:
+        type_validator = validate.Equal(type_)
+        try:
+            type_validator(metadata["type"])
+        except ValidationError as exc:
+            exc.messages = {METADATA_FILE_NAME: {"type": exc.messages}}
+            exceptions.append(exc)
+
+
+def load_configs(
+    contents: Dict[str, str],
+    schemas: Dict[str, Schema],
+    passwords: Dict[str, str],
+    exceptions: List[ValidationError],
+) -> Dict[str, Any]:
+    configs: Dict[str, Any] = {}
+
+    # load existing databases so we can apply the password validation
+    db_passwords: Dict[str, str] = {
+        str(uuid): password
+        for uuid, password in db.session.query(Database.uuid, Database.password).all()
+    }
+    for file_name, content in contents.items():
+        # skip directories
+        if not content:
+            continue
+
+        prefix = file_name.split("/")[0]
+        schema = schemas.get(f"{prefix}/")
+        if schema:
+            try:
+                config = load_yaml(file_name, content)
+
+                # populate passwords from the request or from existing DBs
+                if file_name in passwords:
+                    config["password"] = passwords[file_name]
+                elif prefix == "databases" and config["uuid"] in db_passwords:
+                    config["password"] = db_passwords[config["uuid"]]
+
+                schema.load(config)
+                configs[file_name] = config
+            except ValidationError as exc:
+                exc.messages = {file_name: exc.messages}
+                exceptions.append(exc)
+
+    return configs
+
+
 def is_valid_config(file_name: str) -> bool:
     path = Path(file_name)
 

From e4c9a0d8aea3c06abf75cea4ef259bbee804d304 Mon Sep 17 00:00:00 2001
From: Yongjie Zhao <yongjie.zhao@gmail.com>
Date: Thu, 17 Mar 2022 10:02:50 +0800
Subject: [PATCH 14/17] fix: time filter should be [start, end) (#19166)

---
 superset/connectors/sqla/models.py           |  2 +-
 tests/integration_tests/sqla_models_tests.py | 45 ++++++++++++++++++++
 2 files changed, 46 insertions(+), 1 deletion(-)

diff --git a/superset/connectors/sqla/models.py b/superset/connectors/sqla/models.py
index 9cc2f8a78136b..4a68e666bdac8 100644
--- a/superset/connectors/sqla/models.py
+++ b/superset/connectors/sqla/models.py
@@ -308,7 +308,7 @@ def get_time_filter(
         if start_dttm:
             l.append(col >= self.table.text(self.dttm_sql_literal(start_dttm)))
         if end_dttm:
-            l.append(col <= self.table.text(self.dttm_sql_literal(end_dttm)))
+            l.append(col < self.table.text(self.dttm_sql_literal(end_dttm)))
         return and_(*l)
 
     def get_timestamp_expression(
diff --git a/tests/integration_tests/sqla_models_tests.py b/tests/integration_tests/sqla_models_tests.py
index 14480f10bcc69..54779fcbbff9b 100644
--- a/tests/integration_tests/sqla_models_tests.py
+++ b/tests/integration_tests/sqla_models_tests.py
@@ -41,6 +41,7 @@
     FilterOperator,
     GenericDataType,
     TemporalType,
+    backend,
 )
 from superset.utils.database import get_example_database
 from tests.integration_tests.fixtures.birth_names_dashboard import (
@@ -605,6 +606,50 @@ def test_filter_on_text_column(text_column_table):
     assert result_object.df["count"][0] == 1
 
 
+def test_should_generate_closed_and_open_time_filter_range():
+    with app.app_context():
+        if backend() != "postgresql":
+            pytest.skip(f"{backend()} has different dialect for datetime column")
+
+        table = SqlaTable(
+            table_name="temporal_column_table",
+            sql=(
+                "SELECT '2021-12-31'::timestamp as datetime_col "
+                "UNION SELECT '2022-01-01'::timestamp "
+                "UNION SELECT '2022-03-10'::timestamp "
+                "UNION SELECT '2023-01-01'::timestamp "
+                "UNION SELECT '2023-03-10'::timestamp "
+            ),
+            database=get_example_database(),
+        )
+        TableColumn(
+            column_name="datetime_col", type="TIMESTAMP", table=table, is_dttm=True,
+        )
+        SqlMetric(metric_name="count", expression="count(*)", table=table)
+        result_object = table.query(
+            {
+                "metrics": ["count"],
+                "is_timeseries": False,
+                "filter": [],
+                "from_dttm": datetime(2022, 1, 1),
+                "to_dttm": datetime(2023, 1, 1),
+                "granularity": "datetime_col",
+            }
+        )
+        """ >>> result_object.query
+                SELECT count(*) AS count
+                FROM
+                  (SELECT '2021-12-31'::timestamp as datetime_col
+                   UNION SELECT '2022-01-01'::timestamp
+                   UNION SELECT '2022-03-10'::timestamp
+                   UNION SELECT '2023-01-01'::timestamp
+                   UNION SELECT '2023-03-10'::timestamp) AS virtual_table
+                WHERE datetime_col >= TO_TIMESTAMP('2022-01-01 00:00:00.000000', 'YYYY-MM-DD HH24:MI:SS.US')
+                  AND datetime_col < TO_TIMESTAMP('2023-01-01 00:00:00.000000', 'YYYY-MM-DD HH24:MI:SS.US')
+        """
+        assert result_object.df.iloc[0]["count"] == 2
+
+
 @pytest.mark.parametrize(
     "row,dimension,result",
     [

From 3b427b2029cbeb5c656d20f4201ea4eada069a25 Mon Sep 17 00:00:00 2001
From: Diego Medina <diegomedina24@gmail.com>
Date: Wed, 16 Mar 2022 22:46:06 -0400
Subject: [PATCH 15/17] fix: auto-complete of tables and names are not working
 in SQL lab (#19152)

---
 .../components/AceEditorWrapper/index.tsx     | 11 ++-
 .../components/SqlEditorLeftBar/index.tsx     | 38 +++++++--
 .../TableSelector/TableSelector.test.tsx      | 80 ++++++++++++++++---
 .../src/components/TableSelector/index.tsx    |  7 +-
 4 files changed, 108 insertions(+), 28 deletions(-)

diff --git a/superset-frontend/src/SqlLab/components/AceEditorWrapper/index.tsx b/superset-frontend/src/SqlLab/components/AceEditorWrapper/index.tsx
index ce201e89d904c..8807ccdacc7f4 100644
--- a/superset-frontend/src/SqlLab/components/AceEditorWrapper/index.tsx
+++ b/superset-frontend/src/SqlLab/components/AceEditorWrapper/index.tsx
@@ -171,17 +171,20 @@ class AceEditorWrapper extends React.PureComponent<Props, State> {
       meta: 'schema',
     }));
     const columns = {};
-    const tables = props.extendedTables || props.tables || [];
+
+    const tables = props.tables || [];
+    const extendedTables = props.extendedTables || [];
 
     const tableWords = tables.map(t => {
-      const tableName = t.name;
-      const cols = t.columns || [];
+      const tableName = t.value;
+      const extendedTable = extendedTables.find(et => et.name === tableName);
+      const cols = (extendedTable && extendedTable.columns) || [];
       cols.forEach(col => {
         columns[col.name] = null; // using an object as a unique set
       });
 
       return {
-        name: tableName,
+        name: t.label,
         value: tableName,
         score: TABLE_AUTOCOMPLETE_SCORE,
         meta: 'table',
diff --git a/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx b/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx
index 7bbdfcf6345ec..0988fd9680371 100644
--- a/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx
+++ b/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx
@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React from 'react';
+import React, { useEffect, useRef, useCallback } from 'react';
 import Button from 'src/components/Button';
 import { t, styled, css, SupersetTheme } from '@superset-ui/core';
 import Collapse from 'src/components/Collapse';
@@ -41,7 +41,10 @@ interface actionsTypes {
   addDangerToast: (msg: string) => void;
   queryEditorSetSchema: (queryEditor: QueryEditor, schema?: string) => void;
   queryEditorSetSchemaOptions: () => void;
-  queryEditorSetTableOptions: (options: Array<any>) => void;
+  queryEditorSetTableOptions: (
+    queryEditor: QueryEditor,
+    options: Array<any>,
+  ) => void;
   resetState: () => void;
 }
 
@@ -86,6 +89,13 @@ export default function SqlEditorLeftBar({
   tables = [],
   height = 500,
 }: SqlEditorLeftBarProps) {
+  // Ref needed to avoid infinite rerenders on handlers
+  // that require and modify the queryEditor
+  const queryEditorRef = useRef<QueryEditor>(queryEditor);
+  useEffect(() => {
+    queryEditorRef.current = queryEditor;
+  }, [queryEditor]);
+
   const onDbChange = ({ id: dbId }: { id: number }) => {
     actions.queryEditorSetDb(queryEditor, dbId);
     actions.queryEditorSetFunctionNames(queryEditor, dbId);
@@ -132,9 +142,23 @@ export default function SqlEditorLeftBar({
   const shouldShowReset = window.location.search === '?reset=1';
   const tableMetaDataHeight = height - 130; // 130 is the height of the selects above
 
-  const onSchemaChange = (schema: string) => {
-    actions.queryEditorSetSchema(queryEditor, schema);
-  };
+  const handleSchemaChange = useCallback(
+    (schema: string) => {
+      if (queryEditorRef.current) {
+        actions.queryEditorSetSchema(queryEditorRef.current, schema);
+      }
+    },
+    [actions],
+  );
+
+  const handleTablesLoad = React.useCallback(
+    (options: Array<any>) => {
+      if (queryEditorRef.current) {
+        actions.queryEditorSetTableOptions(queryEditorRef.current, options);
+      }
+    },
+    [actions],
+  );
 
   return (
     <div className="SqlEditorLeftBar">
@@ -143,10 +167,10 @@ export default function SqlEditorLeftBar({
         getDbList={actions.setDatabases}
         handleError={actions.addDangerToast}
         onDbChange={onDbChange}
-        onSchemaChange={onSchemaChange}
+        onSchemaChange={handleSchemaChange}
         onSchemasLoad={actions.queryEditorSetSchemaOptions}
         onTableChange={onTableChange}
-        onTablesLoad={actions.queryEditorSetTableOptions}
+        onTablesLoad={handleTablesLoad}
         schema={queryEditor.schema}
         sqlLabMode
       />
diff --git a/superset-frontend/src/components/TableSelector/TableSelector.test.tsx b/superset-frontend/src/components/TableSelector/TableSelector.test.tsx
index cd7b51d4b124d..013e937edeb41 100644
--- a/superset-frontend/src/components/TableSelector/TableSelector.test.tsx
+++ b/superset-frontend/src/components/TableSelector/TableSelector.test.tsx
@@ -20,12 +20,13 @@
 import React from 'react';
 import { render, screen, waitFor } from 'spec/helpers/testing-library';
 import { SupersetClient } from '@superset-ui/core';
+import { act } from 'react-dom/test-utils';
 import userEvent from '@testing-library/user-event';
 import TableSelector from '.';
 
 const SupersetClientGet = jest.spyOn(SupersetClient, 'get');
 
-const createProps = () => ({
+const createProps = (props = {}) => ({
   database: {
     id: 1,
     database_name: 'main',
@@ -34,23 +35,33 @@ const createProps = () => ({
   },
   schema: 'test_schema',
   handleError: jest.fn(),
+  ...props,
 });
 
-beforeAll(() => {
-  SupersetClientGet.mockImplementation(
-    async () =>
-      ({
-        json: {
-          options: [
-            { label: 'table_a', value: 'table_a' },
-            { label: 'table_b', value: 'table_b' },
-          ],
-        },
-      } as any),
-  );
+afterEach(() => {
+  jest.clearAllMocks();
 });
 
+const getSchemaMockFunction = async () =>
+  ({
+    json: {
+      result: ['schema_a', 'schema_b'],
+    },
+  } as any);
+
+const getTableMockFunction = async () =>
+  ({
+    json: {
+      options: [
+        { label: 'table_a', value: 'table_a' },
+        { label: 'table_b', value: 'table_b' },
+      ],
+    },
+  } as any);
+
 test('renders with default props', async () => {
+  SupersetClientGet.mockImplementation(getTableMockFunction);
+
   const props = createProps();
   render(<TableSelector {...props} />, { useRedux: true });
   const databaseSelect = screen.getByRole('combobox', {
@@ -70,6 +81,8 @@ test('renders with default props', async () => {
 });
 
 test('renders table options', async () => {
+  SupersetClientGet.mockImplementation(getTableMockFunction);
+
   const props = createProps();
   render(<TableSelector {...props} />, { useRedux: true });
   const tableSelect = screen.getByRole('combobox', {
@@ -85,6 +98,8 @@ test('renders table options', async () => {
 });
 
 test('renders disabled without schema', async () => {
+  SupersetClientGet.mockImplementation(getTableMockFunction);
+
   const props = createProps();
   render(<TableSelector {...props} schema={undefined} />, { useRedux: true });
   const tableSelect = screen.getByRole('combobox', {
@@ -94,3 +109,42 @@ test('renders disabled without schema', async () => {
     expect(tableSelect).toBeDisabled();
   });
 });
+
+test('table options are notified after schema selection', async () => {
+  SupersetClientGet.mockImplementation(getSchemaMockFunction);
+
+  const callback = jest.fn();
+  const props = createProps({
+    onTablesLoad: callback,
+    schema: undefined,
+  });
+  render(<TableSelector {...props} />, { useRedux: true });
+
+  const schemaSelect = screen.getByRole('combobox', {
+    name: 'Select schema or type schema name',
+  });
+  expect(schemaSelect).toBeInTheDocument();
+  expect(callback).not.toHaveBeenCalled();
+
+  userEvent.click(schemaSelect);
+
+  expect(
+    await screen.findByRole('option', { name: 'schema_a' }),
+  ).toBeInTheDocument();
+  expect(
+    await screen.findByRole('option', { name: 'schema_b' }),
+  ).toBeInTheDocument();
+
+  SupersetClientGet.mockImplementation(getTableMockFunction);
+
+  act(() => {
+    userEvent.click(screen.getAllByText('schema_a')[1]);
+  });
+
+  await waitFor(() => {
+    expect(callback).toHaveBeenCalledWith([
+      { label: 'table_a', value: 'table_a' },
+      { label: 'table_b', value: 'table_b' },
+    ]);
+  });
+});
diff --git a/superset-frontend/src/components/TableSelector/index.tsx b/superset-frontend/src/components/TableSelector/index.tsx
index 88ac9cefba47f..50804f7d920ce 100644
--- a/superset-frontend/src/components/TableSelector/index.tsx
+++ b/superset-frontend/src/components/TableSelector/index.tsx
@@ -208,15 +208,14 @@ const TableSelector: FunctionComponent<TableSelectorProps> = ({
               currentTable = option;
             }
           });
-          if (onTablesLoad) {
-            onTablesLoad(json.options);
-          }
+
+          onTablesLoad?.(json.options);
           setTableOptions(options);
           setCurrentTable(currentTable);
           setLoadingTables(false);
           if (forceRefresh) addSuccessToast('List updated');
         })
-        .catch(e => {
+        .catch(() => {
           setLoadingTables(false);
           handleError(t('There was an error loading the tables'));
         });

From 0277ebc225889006d9b07c2eedc2caeafdc4e8f8 Mon Sep 17 00:00:00 2001
From: Diego Medina <diegomedina24@gmail.com>
Date: Wed, 16 Mar 2022 22:46:52 -0400
Subject: [PATCH 16/17] fix: Popovers in Explore not attached to the fields
 they are triggered by (#19139)

* fix: Popovers in Explore not attached to the fields they are triggered by

* fix

* PR comment

* remove unused import
---
 .../src/components/Popover/index.tsx          |   3 +
 .../controls/AnnotationLayerControl/index.jsx |  12 +-
 .../ControlPopover/ControlPopover.test.tsx    | 126 ++++++++++++++++++
 .../ControlPopover/ControlPopover.tsx         | 118 ++++++++++++++++
 .../DateFilterControl/DateFilterLabel.tsx     |   4 +-
 .../ColumnSelectPopoverTrigger.tsx            |   7 +-
 .../FilterBoxItemControl.test.jsx             |   4 +-
 .../FilterBoxItemControl.test.tsx             |   4 +-
 .../controls/FilterBoxItemControl/index.jsx   |   7 +-
 .../AdhocFilterPopoverTrigger.test.tsx        |   3 +-
 .../AdhocFilterPopoverTrigger/index.tsx       |   7 +-
 .../MetricControl/AdhocMetricOption.test.jsx  |   4 +-
 .../AdhocMetricPopoverTrigger.tsx             |   6 +-
 .../TimeSeriesColumnControl/index.jsx         |   7 +-
 14 files changed, 277 insertions(+), 35 deletions(-)
 create mode 100644 superset-frontend/src/explore/components/controls/ControlPopover/ControlPopover.test.tsx
 create mode 100644 superset-frontend/src/explore/components/controls/ControlPopover/ControlPopover.tsx

diff --git a/superset-frontend/src/components/Popover/index.tsx b/superset-frontend/src/components/Popover/index.tsx
index 880e457913a2e..bccc31c35c4bb 100644
--- a/superset-frontend/src/components/Popover/index.tsx
+++ b/superset-frontend/src/components/Popover/index.tsx
@@ -18,6 +18,9 @@
  */
 import { Popover } from 'antd';
 
+export { PopoverProps } from 'antd/lib/popover';
+export { TooltipPlacement } from 'antd/lib/tooltip';
+
 // Eventually Popover can be wrapped and customized in this file
 // for now we're just redirecting
 export default Popover;
diff --git a/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.jsx b/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.jsx
index aa3255374fe24..06fb582b5da66 100644
--- a/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.jsx
+++ b/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.jsx
@@ -22,11 +22,11 @@ import { List } from 'src/components';
 import { connect } from 'react-redux';
 import { t, withTheme } from '@superset-ui/core';
 import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls';
-import Popover from 'src/components/Popover';
 import AsyncEsmComponent from 'src/components/AsyncEsmComponent';
 import { getChartKey } from 'src/explore/exploreUtils';
 import { runAnnotationQuery } from 'src/components/Chart/chartAction';
 import CustomListItem from 'src/explore/components/controls/CustomListItem';
+import ControlPopover from '../ControlPopover/ControlPopover';
 
 const AnnotationLayer = AsyncEsmComponent(
   () => import('./AnnotationLayer'),
@@ -167,10 +167,9 @@ class AnnotationLayerControl extends React.PureComponent {
     const addedAnnotation = this.props.value[addedAnnotationIndex];
 
     const annotations = this.props.value.map((anno, i) => (
-      <Popover
+      <ControlPopover
         key={i}
         trigger="click"
-        placement="right"
         title={t('Edit annotation layer')}
         css={theme => ({
           '&:hover': {
@@ -190,7 +189,7 @@ class AnnotationLayerControl extends React.PureComponent {
           <span>{anno.name}</span>
           <span style={{ float: 'right' }}>{this.renderInfo(anno)}</span>
         </CustomListItem>
-      </Popover>
+      </ControlPopover>
     ));
 
     const addLayerPopoverKey = 'add';
@@ -198,9 +197,8 @@ class AnnotationLayerControl extends React.PureComponent {
       <div>
         <List bordered css={theme => ({ borderRadius: theme.gridUnit })}>
           {annotations}
-          <Popover
+          <ControlPopover
             trigger="click"
-            placement="right"
             content={this.renderPopover(addLayerPopoverKey, addedAnnotation)}
             title={t('Add annotation layer')}
             visible={this.state.popoverVisible[addLayerPopoverKey]}
@@ -216,7 +214,7 @@ class AnnotationLayerControl extends React.PureComponent {
               />{' '}
               &nbsp; {t('Add annotation layer')}
             </CustomListItem>
-          </Popover>
+          </ControlPopover>
         </List>
       </div>
     );
diff --git a/superset-frontend/src/explore/components/controls/ControlPopover/ControlPopover.test.tsx b/superset-frontend/src/explore/components/controls/ControlPopover/ControlPopover.test.tsx
new file mode 100644
index 0000000000000..de14f78f75308
--- /dev/null
+++ b/superset-frontend/src/explore/components/controls/ControlPopover/ControlPopover.test.tsx
@@ -0,0 +1,126 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+import { render, screen } from 'spec/helpers/testing-library';
+import userEvent from '@testing-library/user-event';
+import { waitFor } from '@testing-library/react';
+
+import ControlPopover, { PopoverProps } from './ControlPopover';
+
+const createProps = (): Partial<PopoverProps> => ({
+  trigger: 'click',
+  title: 'Control Popover Test',
+  content: <span data-test="control-popover-content">Information</span>,
+});
+
+const setupTest = (props: Partial<PopoverProps> = createProps()) => {
+  const setStateMock = jest.fn();
+  jest
+    .spyOn(React, 'useState')
+    .mockImplementation(((state: any) => [
+      state,
+      state === 'right' ? setStateMock : jest.fn(),
+    ]) as any);
+
+  const { container } = render(
+    <div data-test="outer-container">
+      <div id="controlSections">
+        <ControlPopover {...props}>
+          <span data-test="control-popover">Click me</span>
+        </ControlPopover>
+      </div>
+    </div>,
+  );
+
+  return {
+    props,
+    container,
+    setStateMock,
+  };
+};
+
+afterEach(() => {
+  jest.restoreAllMocks();
+});
+
+test('Should render', () => {
+  setupTest();
+  expect(screen.getByTestId('control-popover')).toBeInTheDocument();
+  userEvent.click(screen.getByTestId('control-popover'));
+  expect(screen.getByText('Control Popover Test')).toBeInTheDocument();
+  expect(screen.getByTestId('control-popover-content')).toBeInTheDocument();
+});
+
+test('Should lock the vertical scroll when the popup is visible', () => {
+  setupTest();
+  expect(screen.getByTestId('control-popover')).toBeInTheDocument();
+  expect(screen.getByTestId('outer-container')).not.toHaveStyle(
+    'overflowY: hidden',
+  );
+  userEvent.click(screen.getByTestId('control-popover'));
+  expect(screen.getByTestId('outer-container')).toHaveStyle(
+    'overflowY: hidden',
+  );
+  userEvent.click(document.body);
+  expect(screen.getByTestId('outer-container')).not.toHaveStyle(
+    'overflowY: hidden',
+  );
+});
+
+test('Should place popup at the top', async () => {
+  const { setStateMock } = setupTest({
+    ...createProps(),
+    getVisibilityRatio: () => 0.2,
+  });
+
+  expect(screen.getByTestId('control-popover')).toBeInTheDocument();
+  userEvent.click(screen.getByTestId('control-popover'));
+
+  await waitFor(() => {
+    expect(setStateMock).toHaveBeenCalledWith('rightTop');
+  });
+});
+
+test('Should place popup at the center', async () => {
+  const { setStateMock } = setupTest({
+    ...createProps(),
+    getVisibilityRatio: () => 0.5,
+  });
+
+  expect(screen.getByTestId('control-popover')).toBeInTheDocument();
+  userEvent.click(screen.getByTestId('control-popover'));
+
+  await waitFor(() => {
+    expect(setStateMock).toHaveBeenCalledWith('right');
+  });
+});
+
+test('Should place popup at the bottom', async () => {
+  const { setStateMock } = setupTest({
+    ...createProps(),
+    getVisibilityRatio: () => 0.7,
+  });
+
+  expect(screen.getByTestId('control-popover')).toBeInTheDocument();
+  userEvent.click(screen.getByTestId('control-popover'));
+
+  await waitFor(() => {
+    expect(setStateMock).toHaveBeenCalledWith('rightBottom');
+  });
+});
diff --git a/superset-frontend/src/explore/components/controls/ControlPopover/ControlPopover.tsx b/superset-frontend/src/explore/components/controls/ControlPopover/ControlPopover.tsx
new file mode 100644
index 0000000000000..70ade69f279eb
--- /dev/null
+++ b/superset-frontend/src/explore/components/controls/ControlPopover/ControlPopover.tsx
@@ -0,0 +1,118 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React, { useCallback, useRef, useEffect } from 'react';
+
+import Popover, {
+  PopoverProps as BasePopoverProps,
+  TooltipPlacement,
+} from 'src/components/Popover';
+
+const sectionContainerId = 'controlSections';
+const getSectionContainerElement = () =>
+  document.getElementById(sectionContainerId)?.parentElement;
+
+const getElementYVisibilityRatioOnContainer = (node: HTMLElement) => {
+  const containerHeight = window?.innerHeight;
+  const nodePositionInViewport = node.getBoundingClientRect()?.top;
+  if (!containerHeight || !nodePositionInViewport) {
+    return 0;
+  }
+
+  return nodePositionInViewport / containerHeight;
+};
+
+export type PopoverProps = BasePopoverProps & {
+  getVisibilityRatio?: typeof getElementYVisibilityRatioOnContainer;
+};
+
+const ControlPopover: React.FC<PopoverProps> = ({
+  getPopupContainer,
+  getVisibilityRatio = getElementYVisibilityRatioOnContainer,
+  ...props
+}) => {
+  const triggerElementRef = useRef<HTMLElement>();
+  const [placement, setPlacement] = React.useState<TooltipPlacement>('right');
+
+  const calculatePlacement = useCallback(() => {
+    const visibilityRatio = getVisibilityRatio(triggerElementRef.current!);
+
+    if (visibilityRatio < 0.35) {
+      setPlacement('rightTop');
+    } else if (visibilityRatio > 0.65) {
+      setPlacement('rightBottom');
+    } else {
+      setPlacement('right');
+    }
+  }, [getVisibilityRatio]);
+
+  const changeContainerScrollStatus = useCallback(
+    visible => {
+      if (triggerElementRef.current && visible) {
+        calculatePlacement();
+      }
+
+      const element = getSectionContainerElement();
+      if (element) {
+        element.style.overflowY = visible ? 'hidden' : 'auto';
+      }
+    },
+    [calculatePlacement],
+  );
+
+  const handleGetPopupContainer = useCallback(
+    (triggerNode: HTMLElement) => {
+      triggerElementRef.current = triggerNode;
+      setTimeout(() => {
+        calculatePlacement();
+      }, 0);
+
+      return getPopupContainer?.(triggerNode) || document.body;
+    },
+    [calculatePlacement, getPopupContainer],
+  );
+
+  const handleOnVisibleChange = useCallback(
+    (visible: boolean) => {
+      if (props.visible === undefined) {
+        changeContainerScrollStatus(visible);
+      }
+
+      props.onVisibleChange?.(visible);
+    },
+    [props, changeContainerScrollStatus],
+  );
+
+  useEffect(() => {
+    if (props.visible !== undefined) {
+      changeContainerScrollStatus(props.visible);
+    }
+  }, [props.visible, changeContainerScrollStatus]);
+
+  return (
+    <Popover
+      {...props}
+      arrowPointAtCenter
+      placement={placement}
+      onVisibleChange={handleOnVisibleChange}
+      getPopupContainer={handleGetPopupContainer}
+    />
+  );
+};
+
+export default ControlPopover;
diff --git a/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx b/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx
index 24ee1f870b21e..682a961ec9a61 100644
--- a/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx
+++ b/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx
@@ -31,7 +31,6 @@ import { getClientErrorObject } from 'src/utils/getClientErrorObject';
 import Button from 'src/components/Button';
 import ControlHeader from 'src/explore/components/ControlHeader';
 import Label, { Type } from 'src/components/Label';
-import Popover from 'src/components/Popover';
 import { Divider } from 'src/components';
 import Icons from 'src/components/Icons';
 import Select from 'src/components/Select/Select';
@@ -42,6 +41,7 @@ import { SLOW_DEBOUNCE } from 'src/constants';
 import { testWithId } from 'src/utils/testUtils';
 import { noOp } from 'src/utils/common';
 import { FrameType } from './types';
+import ControlPopover from '../ControlPopover/ControlPopover';
 
 import {
   CommonFrame,
@@ -86,7 +86,7 @@ const fetchTimeRange = async (timeRange: string) => {
   }
 };
 
-const StyledPopover = styled(Popover)``;
+const StyledPopover = styled(ControlPopover)``;
 const StyledRangeType = styled(Select)`
   width: 272px;
 `;
diff --git a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/ColumnSelectPopoverTrigger.tsx b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/ColumnSelectPopoverTrigger.tsx
index 42251464dfdbb..62107753e8289 100644
--- a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/ColumnSelectPopoverTrigger.tsx
+++ b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/ColumnSelectPopoverTrigger.tsx
@@ -23,10 +23,10 @@ import {
   isAdhocColumn,
   isColumnMeta,
 } from '@superset-ui/chart-controls';
-import Popover from 'src/components/Popover';
 import { ExplorePopoverContent } from 'src/explore/components/ExploreContentPopover';
 import ColumnSelectPopover from './ColumnSelectPopover';
 import { DndColumnSelectPopoverTitle } from './DndColumnSelectPopoverTitle';
+import ControlPopover from '../ControlPopover/ControlPopover';
 
 interface ColumnSelectPopoverTriggerProps {
   columns: ColumnMeta[];
@@ -137,8 +137,7 @@ const ColumnSelectPopoverTrigger = ({
   );
 
   return (
-    <Popover
-      placement="right"
+    <ControlPopover
       trigger="click"
       content={overlayContent}
       defaultVisible={visible}
@@ -148,7 +147,7 @@ const ColumnSelectPopoverTrigger = ({
       destroyTooltipOnHide
     >
       {children}
-    </Popover>
+    </ControlPopover>
   );
 };
 
diff --git a/superset-frontend/src/explore/components/controls/FilterBoxItemControl/FilterBoxItemControl.test.jsx b/superset-frontend/src/explore/components/controls/FilterBoxItemControl/FilterBoxItemControl.test.jsx
index 597c4446e3e03..4cf88645d7520 100644
--- a/superset-frontend/src/explore/components/controls/FilterBoxItemControl/FilterBoxItemControl.test.jsx
+++ b/superset-frontend/src/explore/components/controls/FilterBoxItemControl/FilterBoxItemControl.test.jsx
@@ -21,10 +21,10 @@ import React from 'react';
 import sinon from 'sinon';
 import { shallow } from 'enzyme';
 
-import Popover from 'src/components/Popover';
 import FilterBoxItemControl from 'src/explore/components/controls/FilterBoxItemControl';
 import FormRow from 'src/components/FormRow';
 import datasources from 'spec/fixtures/mockDatasource';
+import ControlPopover from '../ControlPopover/ControlPopover';
 
 const defaultProps = {
   label: 'some label',
@@ -46,7 +46,7 @@ describe('FilterBoxItemControl', () => {
   });
 
   it('renders a Popover', () => {
-    expect(wrapper.find(Popover)).toExist();
+    expect(wrapper.find(ControlPopover)).toExist();
   });
 
   it('renderForms does the job', () => {
diff --git a/superset-frontend/src/explore/components/controls/FilterBoxItemControl/FilterBoxItemControl.test.tsx b/superset-frontend/src/explore/components/controls/FilterBoxItemControl/FilterBoxItemControl.test.tsx
index 9bac8d253157e..4ad09e958cb76 100644
--- a/superset-frontend/src/explore/components/controls/FilterBoxItemControl/FilterBoxItemControl.test.tsx
+++ b/superset-frontend/src/explore/components/controls/FilterBoxItemControl/FilterBoxItemControl.test.tsx
@@ -38,14 +38,14 @@ const createProps = () => ({
   onChange: jest.fn(),
 });
 
-test('Shoud render', () => {
+test('Should render', () => {
   const props = createProps();
   render(<FilterBoxItemControl {...props} />);
   expect(screen.getByTestId('FilterBoxItemControl')).toBeInTheDocument();
   expect(screen.getByRole('button')).toBeInTheDocument();
 });
 
-test('Shoud open modal', () => {
+test('Should open modal', () => {
   const props = createProps();
   render(<FilterBoxItemControl {...props} />);
   userEvent.click(screen.getByRole('button'));
diff --git a/superset-frontend/src/explore/components/controls/FilterBoxItemControl/index.jsx b/superset-frontend/src/explore/components/controls/FilterBoxItemControl/index.jsx
index 25aa79f447f47..4c8a367e3520b 100644
--- a/superset-frontend/src/explore/components/controls/FilterBoxItemControl/index.jsx
+++ b/superset-frontend/src/explore/components/controls/FilterBoxItemControl/index.jsx
@@ -21,12 +21,12 @@ import PropTypes from 'prop-types';
 import { t } from '@superset-ui/core';
 import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls';
 
-import Popover from 'src/components/Popover';
 import FormRow from 'src/components/FormRow';
 import { Select } from 'src/components';
 import CheckboxControl from 'src/explore/components/controls/CheckboxControl';
 import TextControl from 'src/explore/components/controls/TextControl';
 import { FILTER_CONFIG_ATTRIBUTES } from 'src/explore/constants';
+import ControlPopover from '../ControlPopover/ControlPopover';
 
 const INTEGRAL_TYPES = new Set([
   'TINYINT',
@@ -275,9 +275,8 @@ export default class FilterBoxItemControl extends React.Component {
     return (
       <span data-test="FilterBoxItemControl">
         {this.textSummary()}{' '}
-        <Popover
+        <ControlPopover
           trigger="click"
-          placement="right"
           content={this.renderPopover()}
           title={t('Filter configuration')}
         >
@@ -286,7 +285,7 @@ export default class FilterBoxItemControl extends React.Component {
             className="text-primary"
             label="edit-ts-column"
           />
-        </Popover>
+        </ControlPopover>
       </span>
     );
   }
diff --git a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterPopoverTrigger/AdhocFilterPopoverTrigger.test.tsx b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterPopoverTrigger/AdhocFilterPopoverTrigger.test.tsx
index 92d0ca801a143..36c711ebf048b 100644
--- a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterPopoverTrigger/AdhocFilterPopoverTrigger.test.tsx
+++ b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterPopoverTrigger/AdhocFilterPopoverTrigger.test.tsx
@@ -73,7 +73,8 @@ test('should be visible when controlled', async () => {
       Click
     </AdhocFilterPopoverTrigger>,
   );
-  expect(screen.getByRole('tooltip')).toBeInTheDocument();
+
+  expect(await screen.findByRole('tooltip')).toBeInTheDocument();
 });
 
 test('should NOT be visible when controlled', () => {
diff --git a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterPopoverTrigger/index.tsx b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterPopoverTrigger/index.tsx
index 15913e65cb79f..5dd6993c12018 100644
--- a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterPopoverTrigger/index.tsx
+++ b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterPopoverTrigger/index.tsx
@@ -17,12 +17,12 @@
  * under the License.
  */
 import React from 'react';
-import Popover from 'src/components/Popover';
 import { OptionSortType } from 'src/explore/types';
 import AdhocFilterEditPopover from 'src/explore/components/controls/FilterControl/AdhocFilterEditPopover';
 import AdhocFilter from 'src/explore/components/controls/FilterControl/AdhocFilter';
 import { ExplorePopoverContent } from 'src/explore/components/ExploreContentPopover';
 import { Operators } from 'src/explore/constants';
+import ControlPopover from '../../ControlPopover/ControlPopover';
 
 interface AdhocFilterPopoverTriggerProps {
   sections?: string[];
@@ -101,8 +101,7 @@ class AdhocFilterPopoverTrigger extends React.PureComponent<
     );
 
     return (
-      <Popover
-        placement="right"
+      <ControlPopover
         trigger="click"
         content={overlayContent}
         defaultVisible={visible}
@@ -111,7 +110,7 @@ class AdhocFilterPopoverTrigger extends React.PureComponent<
         destroyTooltipOnHide
       >
         {this.props.children}
-      </Popover>
+      </ControlPopover>
     );
   }
 }
diff --git a/superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricOption.test.jsx b/superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricOption.test.jsx
index 14b4185ab77a7..3700bb083c50d 100644
--- a/superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricOption.test.jsx
+++ b/superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricOption.test.jsx
@@ -21,10 +21,10 @@ import React from 'react';
 import sinon from 'sinon';
 import { shallow } from 'enzyme';
 
-import Popover from 'src/components/Popover';
 import { AGGREGATES } from 'src/explore/constants';
 import AdhocMetricOption from 'src/explore/components/controls/MetricControl/AdhocMetricOption';
 import AdhocMetric from 'src/explore/components/controls/MetricControl/AdhocMetric';
+import ControlPopover from '../ControlPopover/ControlPopover';
 
 const columns = [
   { type: 'VARCHAR(255)', column_name: 'source' },
@@ -59,7 +59,7 @@ function setup(overrides) {
 describe('AdhocMetricOption', () => {
   it('renders an overlay trigger wrapper for the label', () => {
     const { wrapper } = setup();
-    expect(wrapper.find(Popover)).toExist();
+    expect(wrapper.find(ControlPopover)).toExist();
     expect(wrapper.find('OptionControlLabel')).toExist();
   });
 
diff --git a/superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricPopoverTrigger.tsx b/superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricPopoverTrigger.tsx
index 42c2c806b78ec..273c83e7d2658 100644
--- a/superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricPopoverTrigger.tsx
+++ b/superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricPopoverTrigger.tsx
@@ -18,7 +18,6 @@
  */
 import React, { ReactNode } from 'react';
 import { Datasource, Metric } from '@superset-ui/core';
-import Popover from 'src/components/Popover';
 import AdhocMetricEditPopoverTitle from 'src/explore/components/controls/MetricControl/AdhocMetricEditPopoverTitle';
 import { ExplorePopoverContent } from 'src/explore/components/ExploreContentPopover';
 import AdhocMetricEditPopover, {
@@ -26,6 +25,7 @@ import AdhocMetricEditPopover, {
 } from './AdhocMetricEditPopover';
 import AdhocMetric from './AdhocMetric';
 import { savedMetricType } from './types';
+import ControlPopover from '../ControlPopover/ControlPopover';
 
 export type AdhocMetricPopoverTriggerProps = {
   adhocMetric: AdhocMetric;
@@ -223,7 +223,7 @@ class AdhocMetricPopoverTrigger extends React.PureComponent<
     );
 
     return (
-      <Popover
+      <ControlPopover
         placement="right"
         trigger="click"
         content={overlayContent}
@@ -234,7 +234,7 @@ class AdhocMetricPopoverTrigger extends React.PureComponent<
         destroyTooltipOnHide
       >
         {this.props.children}
-      </Popover>
+      </ControlPopover>
     );
   }
 }
diff --git a/superset-frontend/src/explore/components/controls/TimeSeriesColumnControl/index.jsx b/superset-frontend/src/explore/components/controls/TimeSeriesColumnControl/index.jsx
index 29d0d16b646c6..5070c9a5956d2 100644
--- a/superset-frontend/src/explore/components/controls/TimeSeriesColumnControl/index.jsx
+++ b/superset-frontend/src/explore/components/controls/TimeSeriesColumnControl/index.jsx
@@ -20,12 +20,12 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Input } from 'src/components/Input';
 import Button from 'src/components/Button';
-import Popover from 'src/components/Popover';
 import { Select, Row, Col } from 'src/components';
 import { t, styled } from '@superset-ui/core';
 import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls';
 import BoundsControl from '../BoundsControl';
 import CheckboxControl from '../CheckboxControl';
+import ControlPopover from '../ControlPopover/ControlPopover';
 
 const propTypes = {
   label: PropTypes.string,
@@ -353,9 +353,8 @@ export default class TimeSeriesColumnControl extends React.Component {
     return (
       <span>
         {this.textSummary()}{' '}
-        <Popover
+        <ControlPopover
           trigger="click"
-          placement="right"
           content={this.renderPopover()}
           title="Column Configuration"
           visible={this.state.popoverVisible}
@@ -366,7 +365,7 @@ export default class TimeSeriesColumnControl extends React.Component {
             className="text-primary"
             label="edit-ts-column"
           />
-        </Popover>
+        </ControlPopover>
       </span>
     );
   }

From cfb967f430a75d363693d79494239b1686fd6e5d Mon Sep 17 00:00:00 2001
From: Diego Medina <diegomedina24@gmail.com>
Date: Wed, 16 Mar 2022 22:47:15 -0400
Subject: [PATCH 17/17] feat: scroll to bottom when adding a new native filter
 and the page is filled (#19053)

* feat: Scroll to bottom when adding a new native filter and the page is filled

* Add test
---
 .../FiltersConfigModal/DraggableFilter.tsx    |   6 +-
 .../FilterConfigPane.test.tsx                 |  47 +++-
 .../FilterConfigurePane.tsx                   |   6 +-
 .../FilterTitleContainer.tsx                  | 234 +++++++++---------
 .../FiltersConfigModal/FilterTitlePane.tsx    |  25 +-
 .../FiltersConfigModal/FiltersConfigModal.tsx |  10 +-
 6 files changed, 196 insertions(+), 132 deletions(-)

diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/DraggableFilter.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/DraggableFilter.tsx
index 188655355ca45..7a4827c80bcf0 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/DraggableFilter.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/DraggableFilter.tsx
@@ -57,7 +57,7 @@ const DragIcon = styled(Icons.Drag, {
 interface FilterTabTitleProps {
   index: number;
   filterIds: string[];
-  onRearrage: (dragItemIndex: number, targetIndex: number) => void;
+  onRearrange: (dragItemIndex: number, targetIndex: number) => void;
 }
 
 interface DragItem {
@@ -68,7 +68,7 @@ interface DragItem {
 
 export const DraggableFilter: React.FC<FilterTabTitleProps> = ({
   index,
-  onRearrage,
+  onRearrange,
   filterIds,
   children,
 }) => {
@@ -120,7 +120,7 @@ export const DraggableFilter: React.FC<FilterTabTitleProps> = ({
         return;
       }
 
-      onRearrage(dragIndex, hoverIndex);
+      onRearrange(dragIndex, hoverIndex);
       // Note: we're mutating the monitor item here.
       // Generally it's better to avoid mutations,
       // but it's good here for the sake of performance
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterConfigPane.test.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterConfigPane.test.tsx
index 78c4d77da1918..3742d536326fb 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterConfigPane.test.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterConfigPane.test.tsx
@@ -22,6 +22,9 @@ import { buildNativeFilter } from 'spec/fixtures/mockNativeFilters';
 import { act, fireEvent, render, screen } from 'spec/helpers/testing-library';
 import FilterConfigPane from './FilterConfigurePane';
 
+const scrollMock = jest.fn();
+Element.prototype.scroll = scrollMock;
+
 const defaultProps = {
   children: jest.fn(),
   getFilterTitle: (id: string) => id,
@@ -56,6 +59,10 @@ function defaultRender(initialState: any = defaultState, props = defaultProps) {
   });
 }
 
+beforeEach(() => {
+  scrollMock.mockClear();
+});
+
 test('renders form', async () => {
   await act(async () => {
     defaultRender();
@@ -65,7 +72,7 @@ test('renders form', async () => {
 
 test('drag and drop', async () => {
   defaultRender();
-  // Drag the state and contry filter above the product filter
+  // Drag the state and country filter above the product filter
   const [countryStateFilter, productFilter] = document.querySelectorAll(
     'div[draggable=true]',
   );
@@ -132,3 +139,41 @@ test('add divider', async () => {
   });
   expect(defaultProps.onAdd).toHaveBeenCalledWith('DIVIDER');
 });
+
+test('filter container should scroll to bottom when adding items', async () => {
+  const state = {
+    dashboardInfo: {
+      metadata: {
+        native_filter_configuration: new Array(35)
+          .fill(0)
+          .map((_, index) =>
+            buildNativeFilter(`NATIVE_FILTER-${index}`, `filter-${index}`, []),
+          ),
+      },
+    },
+    dashboardLayout,
+  };
+  const props = {
+    ...defaultProps,
+    filters: new Array(35).fill(0).map((_, index) => `NATIVE_FILTER-${index}`),
+  };
+
+  defaultRender(state, props);
+
+  const addButton = screen.getByText('Add filters and dividers')!;
+  fireEvent.mouseOver(addButton);
+
+  const addFilterButton = await screen.findByText('Filter');
+  await act(async () => {
+    fireEvent(
+      addFilterButton,
+      new MouseEvent('click', {
+        bubbles: true,
+        cancelable: true,
+      }),
+    );
+  });
+
+  const containerElement = screen.getByTestId('filter-title-container');
+  expect(containerElement.scroll).toHaveBeenCalled();
+});
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterConfigurePane.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterConfigurePane.tsx
index a65e167fdf39b..dba7e6bb30250 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterConfigurePane.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterConfigurePane.tsx
@@ -50,7 +50,7 @@ const TitlesContainer = styled.div`
   border-right: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
 `;
 
-const FiltureConfigurePane: React.FC<Props> = ({
+const FilterConfigurePane: React.FC<Props> = ({
   getFilterTitle,
   onChange,
   onRemove,
@@ -75,7 +75,7 @@ const FiltureConfigurePane: React.FC<Props> = ({
           getFilterTitle={getFilterTitle}
           onChange={onChange}
           onAdd={(type: NativeFilterType) => onAdd(type)}
-          onRearrage={onRearrange}
+          onRearrange={onRearrange}
           onRemove={(id: string) => onRemove(id)}
           restoreFilter={restoreFilter}
         />
@@ -98,4 +98,4 @@ const FiltureConfigurePane: React.FC<Props> = ({
   );
 };
 
-export default FiltureConfigurePane;
+export default FilterConfigurePane;
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterTitleContainer.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterTitleContainer.tsx
index 6ef40d8303b57..f5fe459e4b260 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterTitleContainer.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterTitleContainer.tsx
@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React from 'react';
+import React, { forwardRef } from 'react';
 import { styled, t } from '@superset-ui/core';
 import Icons from 'src/components/Icons';
 import { FilterRemoval } from './types';
@@ -72,124 +72,134 @@ interface Props {
   removedFilters: Record<string, FilterRemoval>;
   onRemove: (id: string) => void;
   restoreFilter: (id: string) => void;
-  onRearrage: (dragIndex: number, targetIndex: number) => void;
+  onRearrange: (dragIndex: number, targetIndex: number) => void;
   filters: string[];
   erroredFilters: string[];
 }
 
-const FilterTitleContainer: React.FC<Props> = ({
-  getFilterTitle,
-  onChange,
-  onRemove,
-  restoreFilter,
-  onRearrage,
-  currentFilterId,
-  removedFilters,
-  filters,
-  erroredFilters = [],
-}) => {
-  const renderComponent = (id: string) => {
-    const isRemoved = !!removedFilters[id];
-    const isErrored = erroredFilters.includes(id);
-    const isActive = currentFilterId === id;
-    const classNames = [];
-    if (isErrored) {
-      classNames.push('errored');
-    }
-    if (isActive) {
-      classNames.push('active');
-    }
-    return (
-      <FilterTitle
-        role="tab"
-        key={`filter-title-tab-${id}`}
-        onClick={() => onChange(id)}
-        className={classNames.join(' ')}
-      >
-        <div css={{ display: 'flex', width: '100%' }}>
-          <div css={{ alignItems: 'center', display: 'flex' }}>
-            {isRemoved ? t('(Removed)') : getFilterTitle(id)}
+const FilterTitleContainer = forwardRef<HTMLDivElement, Props>(
+  (
+    {
+      getFilterTitle,
+      onChange,
+      onRemove,
+      restoreFilter,
+      onRearrange,
+      currentFilterId,
+      removedFilters,
+      filters,
+      erroredFilters = [],
+    },
+    ref,
+  ) => {
+    const renderComponent = (id: string) => {
+      const isRemoved = !!removedFilters[id];
+      const isErrored = erroredFilters.includes(id);
+      const isActive = currentFilterId === id;
+      const classNames = [];
+      if (isErrored) {
+        classNames.push('errored');
+      }
+      if (isActive) {
+        classNames.push('active');
+      }
+      return (
+        <FilterTitle
+          role="tab"
+          key={`filter-title-tab-${id}`}
+          onClick={() => onChange(id)}
+          className={classNames.join(' ')}
+        >
+          <div css={{ display: 'flex', width: '100%' }}>
+            <div css={{ alignItems: 'center', display: 'flex' }}>
+              {isRemoved ? t('(Removed)') : getFilterTitle(id)}
+            </div>
+            {!removedFilters[id] && isErrored && (
+              <StyledWarning className="warning" />
+            )}
+            {isRemoved && (
+              <span
+                css={{ alignSelf: 'flex-end', marginLeft: 'auto' }}
+                role="button"
+                data-test="undo-button"
+                tabIndex={0}
+                onClick={e => {
+                  e.preventDefault();
+                  restoreFilter(id);
+                }}
+              >
+                {t('Undo?')}
+              </span>
+            )}
           </div>
-          {!removedFilters[id] && isErrored && (
-            <StyledWarning className="warning" />
-          )}
-          {isRemoved && (
-            <span
-              css={{ alignSelf: 'flex-end', marginLeft: 'auto' }}
-              role="button"
-              data-test="undo-button"
-              tabIndex={0}
-              onClick={e => {
-                e.preventDefault();
-                restoreFilter(id);
-              }}
-            >
-              {t('Undo?')}
-            </span>
-          )}
-        </div>
-        <div css={{ alignSelf: 'flex-start', marginLeft: 'auto' }}>
-          {isRemoved ? null : (
-            <StyledTrashIcon
-              onClick={event => {
-                event.stopPropagation();
-                onRemove(id);
-              }}
-              alt="RemoveFilter"
-            />
-          )}
-        </div>
-      </FilterTitle>
-    );
-  };
-  const recursivelyRender = (
-    elementId: string,
-    nodeList: Array<{ id: string; parentId: string | null }>,
-    rendered: Array<string>,
-  ): React.ReactNode => {
-    const didAlreadyRender = rendered.indexOf(elementId) >= 0;
-    if (didAlreadyRender) {
-      return null;
-    }
-    let parent = null;
-    const element = nodeList.filter(el => el.id === elementId)[0];
-    if (!element) {
-      return null;
-    }
+          <div css={{ alignSelf: 'flex-start', marginLeft: 'auto' }}>
+            {isRemoved ? null : (
+              <StyledTrashIcon
+                onClick={event => {
+                  event.stopPropagation();
+                  onRemove(id);
+                }}
+                alt="RemoveFilter"
+              />
+            )}
+          </div>
+        </FilterTitle>
+      );
+    };
+    const recursivelyRender = (
+      elementId: string,
+      nodeList: Array<{ id: string; parentId: string | null }>,
+      rendered: Array<string>,
+    ): React.ReactNode => {
+      const didAlreadyRender = rendered.indexOf(elementId) >= 0;
+      if (didAlreadyRender) {
+        return null;
+      }
+      let parent = null;
+      const element = nodeList.filter(el => el.id === elementId)[0];
+      if (!element) {
+        return null;
+      }
+
+      rendered.push(elementId);
+      if (element.parentId) {
+        parent = recursivelyRender(element.parentId, nodeList, rendered);
+      }
+      const children = nodeList
+        .filter(item => item.parentId === elementId)
+        .map(item => recursivelyRender(item.id, nodeList, rendered));
+      return (
+        <>
+          {parent}
+          {renderComponent(elementId)}
+          {children}
+        </>
+      );
+    };
+
+    const renderFilterGroups = () => {
+      const items: React.ReactNode[] = [];
+      filters.forEach((item, index) => {
+        items.push(
+          <DraggableFilter
+            key={index}
+            onRearrange={onRearrange}
+            index={index}
+            filterIds={[item]}
+          >
+            {renderComponent(item)}
+          </DraggableFilter>,
+        );
+      });
+      return items;
+    };
 
-    rendered.push(elementId);
-    if (element.parentId) {
-      parent = recursivelyRender(element.parentId, nodeList, rendered);
-    }
-    const children = nodeList
-      .filter(item => item.parentId === elementId)
-      .map(item => recursivelyRender(item.id, nodeList, rendered));
     return (
-      <>
-        {parent}
-        {renderComponent(elementId)}
-        {children}
-      </>
+      <Container data-test="filter-title-container" ref={ref}>
+        {renderFilterGroups()}
+      </Container>
     );
-  };
-
-  const renderFilterGroups = () => {
-    const items: React.ReactNode[] = [];
-    filters.forEach((item, index) => {
-      items.push(
-        <DraggableFilter
-          key={index}
-          onRearrage={onRearrage}
-          index={index}
-          filterIds={[item]}
-        >
-          {renderComponent(item)}
-        </DraggableFilter>,
-      );
-    });
-    return items;
-  };
-  return <Container>{renderFilterGroups()}</Container>;
-};
+  },
+);
 
 export default FilterTitleContainer;
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterTitlePane.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterTitlePane.tsx
index 5681a41717666..79dc4148349aa 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterTitlePane.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterTitlePane.tsx
@@ -16,8 +16,8 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+import React, { useRef } from 'react';
 import { NativeFilterType, styled, t, useTheme } from '@superset-ui/core';
-import React from 'react';
 import { AntdDropdown } from 'src/components';
 import { MainNav as Menu } from 'src/components/Menu';
 import FilterTitleContainer from './FilterTitleContainer';
@@ -26,7 +26,7 @@ import { FilterRemoval } from './types';
 interface Props {
   restoreFilter: (id: string) => void;
   getFilterTitle: (id: string) => string;
-  onRearrage: (dragIndex: number, targetIndex: number) => void;
+  onRearrange: (dragIndex: number, targetIndex: number) => void;
   onRemove: (id: string) => void;
   onChange: (id: string) => void;
   onAdd: (type: NativeFilterType) => void;
@@ -52,23 +52,26 @@ const TabsContainer = styled.div`
   flex-direction: column;
 `;
 
+const options = [
+  { label: 'Filter', type: NativeFilterType.NATIVE_FILTER },
+  { label: 'Divider', type: NativeFilterType.DIVIDER },
+];
+
 const FilterTitlePane: React.FC<Props> = ({
   getFilterTitle,
   onChange,
   onAdd,
   onRemove,
-  onRearrage,
+  onRearrange,
   restoreFilter,
   currentFilterId,
   filters,
   removedFilters,
   erroredFilters,
 }) => {
+  const filtersContainerRef = useRef<HTMLDivElement>(null);
   const theme = useTheme();
-  const options = [
-    { label: 'Filter', type: NativeFilterType.NATIVE_FILTER },
-    { label: 'Divider', type: NativeFilterType.DIVIDER },
-  ];
+
   const handleOnAdd = (type: NativeFilterType) => {
     onAdd(type);
     setTimeout(() => {
@@ -77,6 +80,11 @@ const FilterTitlePane: React.FC<Props> = ({
         const navList = element.getElementsByClassName('ant-tabs-nav-list')[0];
         navList.scrollTop = navList.scrollHeight;
       }
+
+      filtersContainerRef?.current?.scroll?.({
+        top: filtersContainerRef.current.scrollHeight,
+        behavior: 'smooth',
+      });
     }, 0);
   };
   const menu = (
@@ -109,6 +117,7 @@ const FilterTitlePane: React.FC<Props> = ({
         }}
       >
         <FilterTitleContainer
+          ref={filtersContainerRef}
           filters={filters}
           currentFilterId={currentFilterId}
           removedFilters={removedFilters}
@@ -116,7 +125,7 @@ const FilterTitlePane: React.FC<Props> = ({
           erroredFilters={erroredFilters}
           onChange={onChange}
           onRemove={onRemove}
-          onRearrage={onRearrage}
+          onRearrange={onRearrange}
           restoreFilter={restoreFilter}
         />
       </div>
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigModal.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigModal.tsx
index fd3ac06ea6db9..d258b34fa7489 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigModal.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigModal.tsx
@@ -38,7 +38,7 @@ import ErrorBoundary from 'src/components/ErrorBoundary';
 import { StyledModal } from 'src/components/Modal';
 import { testWithId } from 'src/utils/testUtils';
 import { useFilterConfigMap, useFilterConfiguration } from '../state';
-import FiltureConfigurePane from './FilterConfigurePane';
+import FilterConfigurePane from './FilterConfigurePane';
 import FiltersConfigForm, {
   FilterPanels,
 } from './FiltersConfigForm/FiltersConfigForm';
@@ -379,7 +379,7 @@ export function FiltersConfigModal({
       handleConfirmCancel();
     }
   };
-  const onRearrage = (dragIndex: number, targetIndex: number) => {
+  const onRearrange = (dragIndex: number, targetIndex: number) => {
     const newOrderedFilter = [...orderedFilters];
     const removed = newOrderedFilter.splice(dragIndex, 1)[0];
     newOrderedFilter.splice(targetIndex, 0, removed);
@@ -522,7 +522,7 @@ export function FiltersConfigModal({
             onValuesChange={onValuesChange}
             layout="vertical"
           >
-            <FiltureConfigurePane
+            <FilterConfigurePane
               erroredFilters={erroredFilters}
               onRemove={handleRemoveItem}
               onAdd={addFilter}
@@ -531,11 +531,11 @@ export function FiltersConfigModal({
               currentFilterId={currentFilterId}
               removedFilters={removedFilters}
               restoreFilter={restoreFilter}
-              onRearrange={onRearrage}
+              onRearrange={onRearrange}
               filters={orderedFilters}
             >
               {(id: string) => getForm(id)}
-            </FiltureConfigurePane>
+            </FilterConfigurePane>
           </StyledForm>
         </StyledModalBody>
       </ErrorBoundary>