diff --git a/superset-frontend/plugins/plugin-chart-pivot-table/src/plugin/controlPanel.tsx b/superset-frontend/plugins/plugin-chart-pivot-table/src/plugin/controlPanel.tsx
index 989e32381d971..ccb74e45bb4b9 100644
--- a/superset-frontend/plugins/plugin-chart-pivot-table/src/plugin/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-pivot-table/src/plugin/controlPanel.tsx
@@ -237,14 +237,14 @@ const config: ControlPanelConfig = {
],
renderTrigger: true,
description: (
-
+ <>
{t('Change order of rows.')}
{t('Available sorting modes:')}
- {t('By key: use row names as sorting key')}
- {t('By value: use metric values as sorting key')}
-
+
),
},
},
@@ -265,14 +265,14 @@ const config: ControlPanelConfig = {
],
renderTrigger: true,
description: (
-
+ <>
{t('Change order of columns.')}
{t('Available sorting modes:')}
- {t('By key: use column names as sorting key')}
- {t('By value: use metric values as sorting key')}
-
+
),
},
},
diff --git a/superset-frontend/src/dashboard/containers/DashboardPage.tsx b/superset-frontend/src/dashboard/containers/DashboardPage.tsx
index 20e98a598f71a..1f28ecad74e27 100644
--- a/superset-frontend/src/dashboard/containers/DashboardPage.tsx
+++ b/superset-frontend/src/dashboard/containers/DashboardPage.tsx
@@ -36,13 +36,13 @@ import { UserWithPermissionsAndRoles } from 'src/types/bootstrapTypes';
import { addWarningToast } from 'src/components/MessageToasts/actions';
import {
- getFromLocalStorage,
- setInLocalStorage,
+ getItem,
+ setItem,
+ LocalStorageKeys,
} from 'src/utils/localStorageHelpers';
import {
FILTER_BOX_MIGRATION_STATES,
FILTER_BOX_TRANSITION_SNOOZE_DURATION,
- FILTER_BOX_TRANSITION_SNOOZED_AT,
} from 'src/explore/constants';
import { URL_PARAMS } from 'src/constants';
import { getUrlParam } from 'src/utils/urlUtils';
@@ -126,8 +126,10 @@ const DashboardPage: FC = () => {
}
// has cookie?
- const snoozeDash =
- getFromLocalStorage(FILTER_BOX_TRANSITION_SNOOZED_AT, 0) || {};
+ const snoozeDash = getItem(
+ LocalStorageKeys.filter_box_transition_snoozed_at,
+ {},
+ );
if (
Date.now() - (snoozeDash[id] || 0) <
FILTER_BOX_TRANSITION_SNOOZE_DURATION
@@ -210,9 +212,11 @@ const DashboardPage: FC = () => {
setFilterboxMigrationState(FILTER_BOX_MIGRATION_STATES.REVIEWING);
}}
onClickSnooze={() => {
- const snoozedDash =
- getFromLocalStorage(FILTER_BOX_TRANSITION_SNOOZED_AT, 0) || {};
- setInLocalStorage(FILTER_BOX_TRANSITION_SNOOZED_AT, {
+ const snoozedDash = getItem(
+ LocalStorageKeys.filter_box_transition_snoozed_at,
+ {},
+ );
+ setItem(LocalStorageKeys.filter_box_transition_snoozed_at, {
...snoozedDash,
[id]: Date.now(),
});
diff --git a/superset-frontend/src/explore/components/DataTablesPane/index.tsx b/superset-frontend/src/explore/components/DataTablesPane/index.tsx
index 55b11f9237d40..be0409ffeb925 100644
--- a/superset-frontend/src/explore/components/DataTablesPane/index.tsx
+++ b/superset-frontend/src/explore/components/DataTablesPane/index.tsx
@@ -25,8 +25,9 @@ import TableView, { EmptyWrapperType } from 'src/components/TableView';
import { getChartDataRequest } from 'src/chart/chartAction';
import { getClientErrorObject } from 'src/utils/getClientErrorObject';
import {
- getFromLocalStorage,
- setInLocalStorage,
+ getItem,
+ setItem,
+ LocalStorageKeys,
} from 'src/utils/localStorageHelpers';
import {
CopyToClipboardButton,
@@ -49,10 +50,6 @@ const NULLISH_RESULTS_STATE = {
const DATA_TABLE_PAGE_SIZE = 50;
-const STORAGE_KEYS = {
- isOpen: 'is_datapanel_open',
-};
-
const DATAPANEL_KEY = 'data';
const TableControlsWrapper = styled.div`
@@ -200,7 +197,7 @@ export const DataTablesPane = ({
[RESULT_TYPES.samples]?: boolean;
}>(NULLISH_RESULTS_STATE);
const [panelOpen, setPanelOpen] = useState(
- getFromLocalStorage(STORAGE_KEYS.isOpen, false),
+ getItem(LocalStorageKeys.is_datapanel_open, false),
);
const formattedData = useMemo(
@@ -283,7 +280,7 @@ export const DataTablesPane = ({
);
useEffect(() => {
- setInLocalStorage(STORAGE_KEYS.isOpen, panelOpen);
+ setItem(LocalStorageKeys.is_datapanel_open, panelOpen);
}, [panelOpen]);
useEffect(() => {
diff --git a/superset-frontend/src/explore/components/ExploreChartPanel.jsx b/superset-frontend/src/explore/components/ExploreChartPanel.jsx
index b331ae33e0cc6..7a930a7ff1c76 100644
--- a/superset-frontend/src/explore/components/ExploreChartPanel.jsx
+++ b/superset-frontend/src/explore/components/ExploreChartPanel.jsx
@@ -24,8 +24,9 @@ import { useResizeDetector } from 'react-resize-detector';
import { chartPropShape } from 'src/dashboard/util/propShapes';
import ChartContainer from 'src/chart/ChartContainer';
import {
- getFromLocalStorage,
- setInLocalStorage,
+ getItem,
+ setItem,
+ LocalStorageKeys,
} from 'src/utils/localStorageHelpers';
import ConnectedExploreChartHeader from './ExploreChartHeader';
import { DataTablesPane } from './DataTablesPane';
@@ -64,10 +65,6 @@ const CHART_PANEL_PADDING_HORIZ = 30;
const CHART_PANEL_PADDING_VERTICAL = 15;
const HEADER_PADDING = 15;
-const STORAGE_KEYS = {
- sizes: 'chart_split_sizes',
-};
-
const INITIAL_SIZES = [90, 10];
const MIN_SIZES = [300, 50];
const DEFAULT_SOUTH_PANE_HEIGHT_PERCENT = 40;
@@ -126,7 +123,7 @@ const ExploreChartPanel = props => {
refreshRate: 300,
});
const [splitSizes, setSplitSizes] = useState(
- getFromLocalStorage(STORAGE_KEYS.sizes, INITIAL_SIZES),
+ getItem(LocalStorageKeys.chart_split_sizes, INITIAL_SIZES),
);
const { slice } = props;
const updateQueryContext = useCallback(
@@ -192,7 +189,7 @@ const ExploreChartPanel = props => {
}, [recalcPanelSizes, splitSizes]);
useEffect(() => {
- setInLocalStorage(STORAGE_KEYS.sizes, splitSizes);
+ setItem(LocalStorageKeys.chart_split_sizes, splitSizes);
}, [splitSizes]);
const onDragEnd = sizes => {
diff --git a/superset-frontend/src/explore/components/ExploreViewContainer.jsx b/superset-frontend/src/explore/components/ExploreViewContainer.jsx
index e8b277319fd2a..b56f09a2ba2a0 100644
--- a/superset-frontend/src/explore/components/ExploreViewContainer.jsx
+++ b/superset-frontend/src/explore/components/ExploreViewContainer.jsx
@@ -32,8 +32,9 @@ import { usePrevious } from 'src/common/hooks/usePrevious';
import { useComponentDidMount } from 'src/common/hooks/useComponentDidMount';
import Icons from 'src/components/Icons';
import {
- getFromLocalStorage,
- setInLocalStorage,
+ getItem,
+ setItem,
+ LocalStorageKeys,
} from 'src/utils/localStorageHelpers';
import { URL_PARAMS } from 'src/constants';
import cx from 'classnames';
@@ -183,11 +184,6 @@ function ExploreViewContainer(props) {
? `${props.forcedHeight}px`
: `${windowSize.height - navHeight}px`;
- const storageKeys = {
- controlsWidth: 'controls_width',
- dataSourceWidth: 'datasource_width',
- };
-
const defaultSidebarsWidth = {
controls_width: 320,
datasource_width: 300,
@@ -455,12 +451,12 @@ function ExploreViewContainer(props) {
}
function getSidebarWidths(key) {
- return getFromLocalStorage(key, defaultSidebarsWidth[key]);
+ return getItem(key, defaultSidebarsWidth[key]);
}
function setSidebarWidths(key, dimension) {
const newDimension = Number(getSidebarWidths(key)) + dimension.width;
- setInLocalStorage(key, newDimension);
+ setItem(key, newDimension);
}
if (props.standalone) {
@@ -504,13 +500,13 @@ function ExploreViewContainer(props) {
)}
- setSidebarWidths(storageKeys.dataSourceWidth, d)
+ setSidebarWidths(LocalStorageKeys.datasource_width, d)
}
defaultSize={{
- width: getSidebarWidths(storageKeys.dataSourceWidth),
+ width: getSidebarWidths(LocalStorageKeys.datasource_width),
height: '100%',
}}
- minWidth={defaultSidebarsWidth[storageKeys.dataSourceWidth]}
+ minWidth={defaultSidebarsWidth[LocalStorageKeys.datasource_width]}
maxWidth="33%"
enable={{ right: true }}
className={
@@ -564,13 +560,13 @@ function ExploreViewContainer(props) {
) : null}
- setSidebarWidths(storageKeys.controlsWidth, d)
+ setSidebarWidths(LocalStorageKeys.controls_width, d)
}
defaultSize={{
- width: getSidebarWidths(storageKeys.controlsWidth),
+ width: getSidebarWidths(LocalStorageKeys.controls_width),
height: '100%',
}}
- minWidth={defaultSidebarsWidth[storageKeys.controlsWidth]}
+ minWidth={defaultSidebarsWidth[LocalStorageKeys.controls_width]}
maxWidth="33%"
enable={{ right: true }}
className="col-sm-3 explore-column controls-column"
diff --git a/superset-frontend/src/explore/constants.ts b/superset-frontend/src/explore/constants.ts
index 28668389fe557..2d5afb89627fe 100644
--- a/superset-frontend/src/explore/constants.ts
+++ b/superset-frontend/src/explore/constants.ts
@@ -151,8 +151,6 @@ export enum FILTER_BOX_MIGRATION_STATES {
UNDECIDED = 'UNDECIDED',
}
-export const FILTER_BOX_TRANSITION_SNOOZED_AT =
- 'filter_box_transition_snoozed_at';
export const FILTER_BOX_TRANSITION_SNOOZE_DURATION = 24 * 60 * 60 * 1000; // 24 hours
export const POPOVER_INITIAL_HEIGHT = 240;
diff --git a/superset-frontend/src/views/CRUD/storageKeys.ts b/superset-frontend/src/utils/localStorageHelpers.test.ts
similarity index 58%
rename from superset-frontend/src/views/CRUD/storageKeys.ts
rename to superset-frontend/src/utils/localStorageHelpers.test.ts
index 5002420aa777a..8392ee5291a11 100644
--- a/superset-frontend/src/views/CRUD/storageKeys.ts
+++ b/superset-frontend/src/utils/localStorageHelpers.test.ts
@@ -16,9 +16,28 @@
* specific language governing permissions and limitations
* under the License.
*/
+import {
+ getItem,
+ setItem,
+ LocalStorageKeys,
+} from 'src/utils/localStorageHelpers';
-// storage keys for welcome page sticky tabs and tables
-export const HOMEPAGE_CHART_FILTER = 'homepage_chart_filter';
-export const HOMEPAGE_ACTIVITY_FILTER = 'homepage_activity_filter';
-export const HOMEPAGE_DASHBOARD_FILTER = 'homepage_dashboard_filter';
-export const HOMEPAGE_COLLAPSE_STATE = 'homepage_collapse_state';
+describe('localStorageHelpers', () => {
+ beforeEach(() => {
+ localStorage.clear();
+ });
+
+ afterAll(() => {
+ localStorage.clear();
+ });
+
+ it('gets a value that was set', () => {
+ setItem(LocalStorageKeys.is_datapanel_open, false);
+
+ expect(getItem(LocalStorageKeys.is_datapanel_open, true)).toBe(false);
+ });
+
+ it('returns the default value for an unset value', () => {
+ expect(getItem(LocalStorageKeys.is_datapanel_open, true)).toBe(true);
+ });
+});
diff --git a/superset-frontend/src/utils/localStorageHelpers.ts b/superset-frontend/src/utils/localStorageHelpers.ts
index 28f5dfcbaef72..75c18226ef8cc 100644
--- a/superset-frontend/src/utils/localStorageHelpers.ts
+++ b/superset-frontend/src/utils/localStorageHelpers.ts
@@ -17,19 +17,98 @@
* under the License.
*/
-export const getFromLocalStorage = (key: string, defaultValue: any) => {
+import { TableTabTypes } from 'src/views/CRUD/types';
+import { SetTabType } from 'src/views/CRUD/welcome/ActivityTable';
+
+export enum LocalStorageKeys {
+ /**
+ * START LEGACY LOCAL STORAGE KEYS
+ *
+ * Do not follow the patterns here for key names. Keys should instead be namespaced to avoid
+ * collisions.
+ *
+ * TODO: Update all local storage keys to follow the new pattern. This is a breaking change,
+ * and therefore should be done in a major release.
+ */
+ filter_box_transition_snoozed_at = 'filter_box_transition_snoozed_at',
+ chart_split_sizes = 'chart_split_sizes',
+ controls_width = 'controls_width',
+ datasource_width = 'datasource_width',
+ is_datapanel_open = 'is_datapanel_open',
+ homepage_chart_filter = 'homepage_chart_filter',
+ homepage_dashboard_filter = 'homepage_dashboard_filter',
+ homepage_collapse_state = 'homepage_collapse_state',
+ homepage_activity_filter = 'homepage_activity_filter',
+ /** END LEGACY LOCAL STORAGE KEYS */
+
+ /**
+ * New local storage keys should be namespaced to avoid collisions. Keys should be named in the
+ * form [namespace]__[key].
+ *
+ * Example:
+ * sqllab__is_autocomplete_enabled
+ */
+}
+
+export type LocalStorageValues = {
+ filter_box_transition_snoozed_at: Record;
+ chart_split_sizes: [number, number];
+ controls_width: number;
+ datasource_width: number;
+ is_datapanel_open: boolean;
+ homepage_chart_filter: TableTabTypes;
+ homepage_dashboard_filter: TableTabTypes;
+ homepage_collapse_state: string[];
+ homepage_activity_filter: SetTabType | null;
+};
+
+export function getItem(
+ key: K,
+ defaultValue: LocalStorageValues[K],
+): LocalStorageValues[K] {
+ return dangerouslyGetItemDoNotUse(key, defaultValue);
+}
+
+export function setItem(
+ key: K,
+ value: LocalStorageValues[K],
+): void {
+ dangerouslySetItemDoNotUse(key, value);
+}
+
+/*
+ * This function should not be used directly, as it doesn't provide any type safety or any
+ * guarantees that the globally namespaced localstorage key is correct.
+ *
+ * Instead, use getItem and setItem. Any legacy uses should be updated/migrated in future
+ * Superset versions (as they may require breaking changes).
+ * */
+export function dangerouslyGetItemDoNotUse(
+ key: string,
+ defaultValue: any,
+): any {
try {
const value = localStorage.getItem(key);
- return JSON.parse(value || 'null') || defaultValue;
+ if (value === null) {
+ return defaultValue;
+ }
+ return JSON.parse(value);
} catch {
return defaultValue;
}
-};
+}
-export const setInLocalStorage = (key: string, value: any) => {
+/*
+ * This function should not be used directly, as it doesn't provide any type safety or any
+ * guarantees that the globally namespaced localstorage key is correct.
+ *
+ * Instead, use getItem and setItem. Any legacy uses should be updated/migrated in future
+ * Superset versions (as they may require breaking changes).
+ * */
+export function dangerouslySetItemDoNotUse(key: string, value: any): void {
try {
localStorage.setItem(key, JSON.stringify(value));
} catch {
// Catch in case localStorage is unavailable
}
-};
+}
diff --git a/superset-frontend/src/views/CRUD/chart/ChartList.tsx b/superset-frontend/src/views/CRUD/chart/ChartList.tsx
index 33236591b0580..3b125c78f35e5 100644
--- a/superset-frontend/src/views/CRUD/chart/ChartList.tsx
+++ b/superset-frontend/src/views/CRUD/chart/ChartList.tsx
@@ -49,7 +49,7 @@ import ListView, {
SelectOption,
} from 'src/components/ListView';
import Loading from 'src/components/Loading';
-import { getFromLocalStorage } from 'src/utils/localStorageHelpers';
+import { dangerouslyGetItemDoNotUse } from 'src/utils/localStorageHelpers';
import withToasts from 'src/components/MessageToasts/withToasts';
import PropertiesModal from 'src/explore/components/PropertiesModal';
import ImportModelsModal from 'src/components/ImportModal/index';
@@ -164,7 +164,10 @@ function ChartList(props: ChartListProps) {
const [preparingExport, setPreparingExport] = useState(false);
const { userId } = props.user;
- const userKey = getFromLocalStorage(userId?.toString(), null);
+ // TODO: Fix usage of localStorage keying on the user id
+ const userSettings = dangerouslyGetItemDoNotUse(userId?.toString(), null) as {
+ thumbnails: boolean;
+ };
const openChartImportModal = () => {
showImportModal(true);
@@ -574,8 +577,8 @@ function ChartList(props: ChartListProps) {
{
setActiveChild('Edited');
- setInLocalStorage(HOMEPAGE_ACTIVITY_FILTER, SetTabType.EDITED);
+ setItem(LocalStorageKeys.homepage_activity_filter, SetTabType.EDITED);
},
},
{
@@ -169,7 +168,7 @@ export default function ActivityTable({
label: t('Created'),
onClick: () => {
setActiveChild('Created');
- setInLocalStorage(HOMEPAGE_ACTIVITY_FILTER, SetTabType.CREATED);
+ setItem(LocalStorageKeys.homepage_activity_filter, SetTabType.CREATED);
},
},
];
@@ -180,7 +179,7 @@ export default function ActivityTable({
label: t('Viewed'),
onClick: () => {
setActiveChild('Viewed');
- setInLocalStorage(HOMEPAGE_ACTIVITY_FILTER, SetTabType.VIEWED);
+ setItem(LocalStorageKeys.homepage_activity_filter, SetTabType.VIEWED);
},
});
}
diff --git a/superset-frontend/src/views/CRUD/welcome/ChartTable.tsx b/superset-frontend/src/views/CRUD/welcome/ChartTable.tsx
index f82cab4a11130..dfda6e58b98d5 100644
--- a/superset-frontend/src/views/CRUD/welcome/ChartTable.tsx
+++ b/superset-frontend/src/views/CRUD/welcome/ChartTable.tsx
@@ -25,8 +25,9 @@ import {
useListViewResource,
} from 'src/views/CRUD/hooks';
import {
- getFromLocalStorage,
- setInLocalStorage,
+ getItem,
+ setItem,
+ LocalStorageKeys,
} from 'src/utils/localStorageHelpers';
import withToasts from 'src/components/MessageToasts/withToasts';
import { useHistory } from 'react-router-dom';
@@ -34,7 +35,6 @@ import { TableTabTypes } from 'src/views/CRUD/types';
import PropertiesModal from 'src/explore/components/PropertiesModal';
import { User } from 'src/types/bootstrapTypes';
import { CardContainer, PAGE_SIZE } from 'src/views/CRUD/utils';
-import { HOMEPAGE_CHART_FILTER } from 'src/views/CRUD/storageKeys';
import { LoadingCards } from 'src/views/CRUD/welcome/Welcome';
import ChartCard from 'src/views/CRUD/chart/ChartCard';
import Chart from 'src/types/Chart';
@@ -65,8 +65,11 @@ function ChartTable({
examples,
}: ChartTableProps) {
const history = useHistory();
- const filterStore = getFromLocalStorage(HOMEPAGE_CHART_FILTER, null);
- const initialFilter = filterStore || TableTabTypes.EXAMPLES;
+ const filterStore = getItem(
+ LocalStorageKeys.homepage_chart_filter,
+ TableTabTypes.EXAMPLES,
+ );
+ const initialFilter = filterStore;
const filteredExamples = filter(examples, obj => 'viz_type' in obj);
@@ -162,7 +165,7 @@ function ChartTable({
label: t('Favorite'),
onClick: () => {
setChartFilter(TableTabTypes.FAVORITE);
- setInLocalStorage(HOMEPAGE_CHART_FILTER, TableTabTypes.FAVORITE);
+ setItem(LocalStorageKeys.homepage_chart_filter, TableTabTypes.FAVORITE);
},
},
{
@@ -170,7 +173,7 @@ function ChartTable({
label: t('Mine'),
onClick: () => {
setChartFilter(TableTabTypes.MINE);
- setInLocalStorage(HOMEPAGE_CHART_FILTER, TableTabTypes.MINE);
+ setItem(LocalStorageKeys.homepage_chart_filter, TableTabTypes.MINE);
},
},
];
@@ -180,7 +183,7 @@ function ChartTable({
label: t('Examples'),
onClick: () => {
setChartFilter(TableTabTypes.EXAMPLES);
- setInLocalStorage(HOMEPAGE_CHART_FILTER, TableTabTypes.EXAMPLES);
+ setItem(LocalStorageKeys.homepage_chart_filter, TableTabTypes.EXAMPLES);
},
});
}
diff --git a/superset-frontend/src/views/CRUD/welcome/DashboardTable.tsx b/superset-frontend/src/views/CRUD/welcome/DashboardTable.tsx
index 759a0731312a5..9e992ad54ea41 100644
--- a/superset-frontend/src/views/CRUD/welcome/DashboardTable.tsx
+++ b/superset-frontend/src/views/CRUD/welcome/DashboardTable.tsx
@@ -28,8 +28,9 @@ import {
import handleResourceExport from 'src/utils/export';
import { useHistory } from 'react-router-dom';
import {
- getFromLocalStorage,
- setInLocalStorage,
+ getItem,
+ setItem,
+ LocalStorageKeys,
} from 'src/utils/localStorageHelpers';
import { LoadingCards } from 'src/views/CRUD/welcome/Welcome';
import {
@@ -37,7 +38,6 @@ import {
createErrorHandler,
PAGE_SIZE,
} from 'src/views/CRUD/utils';
-import { HOMEPAGE_DASHBOARD_FILTER } from 'src/views/CRUD/storageKeys';
import withToasts from 'src/components/MessageToasts/withToasts';
import Loading from 'src/components/Loading';
import PropertiesModal from 'src/dashboard/components/PropertiesModal';
@@ -61,8 +61,11 @@ function DashboardTable({
examples,
}: DashboardTableProps) {
const history = useHistory();
- const filterStore = getFromLocalStorage(HOMEPAGE_DASHBOARD_FILTER, null);
- const defaultFilter = filterStore || TableTabTypes.EXAMPLES;
+ const filterStore = getItem(
+ LocalStorageKeys.homepage_dashboard_filter,
+ TableTabTypes.EXAMPLES,
+ );
+ const defaultFilter = filterStore;
const filteredExamples = filter(examples, obj => !('viz_type' in obj));
@@ -159,7 +162,10 @@ function DashboardTable({
label: t('Favorite'),
onClick: () => {
setDashboardFilter(TableTabTypes.FAVORITE);
- setInLocalStorage(HOMEPAGE_DASHBOARD_FILTER, TableTabTypes.FAVORITE);
+ setItem(
+ LocalStorageKeys.homepage_dashboard_filter,
+ TableTabTypes.FAVORITE,
+ );
},
},
{
@@ -167,7 +173,7 @@ function DashboardTable({
label: t('Mine'),
onClick: () => {
setDashboardFilter(TableTabTypes.MINE);
- setInLocalStorage(HOMEPAGE_DASHBOARD_FILTER, TableTabTypes.MINE);
+ setItem(LocalStorageKeys.homepage_dashboard_filter, TableTabTypes.MINE);
},
},
];
@@ -178,7 +184,10 @@ function DashboardTable({
label: t('Examples'),
onClick: () => {
setDashboardFilter(TableTabTypes.EXAMPLES);
- setInLocalStorage(HOMEPAGE_DASHBOARD_FILTER, TableTabTypes.EXAMPLES);
+ setItem(
+ LocalStorageKeys.homepage_dashboard_filter,
+ TableTabTypes.EXAMPLES,
+ );
},
});
}
diff --git a/superset-frontend/src/views/CRUD/welcome/Welcome.tsx b/superset-frontend/src/views/CRUD/welcome/Welcome.tsx
index 8b59fbcad32dd..5b98140f389db 100644
--- a/superset-frontend/src/views/CRUD/welcome/Welcome.tsx
+++ b/superset-frontend/src/views/CRUD/welcome/Welcome.tsx
@@ -22,8 +22,11 @@ import Collapse from 'src/components/Collapse';
import { User } from 'src/types/bootstrapTypes';
import { reject } from 'lodash';
import {
- getFromLocalStorage,
- setInLocalStorage,
+ getItem,
+ dangerouslyGetItemDoNotUse,
+ setItem,
+ dangerouslySetItemDoNotUse,
+ LocalStorageKeys,
} from 'src/utils/localStorageHelpers';
import ListViewCard from 'src/components/ListViewCard';
import withToasts from 'src/components/MessageToasts/withToasts';
@@ -35,10 +38,6 @@ import {
getUserOwnedObjects,
loadingCardCount,
} from 'src/views/CRUD/utils';
-import {
- HOMEPAGE_ACTIVITY_FILTER,
- HOMEPAGE_COLLAPSE_STATE,
-} from 'src/views/CRUD/storageKeys';
import { FeatureFlag, isFeatureEnabled } from 'src/featureFlags';
import { Switch } from 'src/common/components';
@@ -146,7 +145,7 @@ function Welcome({ user, addDangerToast }: WelcomeProps) {
const id = userid.toString();
const recent = `/superset/recent_activity/${user.userId}/?limit=6`;
const [activeChild, setActiveChild] = useState('Loading');
- const userKey = getFromLocalStorage(id, null);
+ const userKey = dangerouslyGetItemDoNotUse(id, null);
let defaultChecked = false;
if (isFeatureEnabled(FeatureFlag.THUMBNAILS)) {
defaultChecked =
@@ -161,17 +160,17 @@ function Welcome({ user, addDangerToast }: WelcomeProps) {
);
const [loadedCount, setLoadedCount] = useState(0);
- const collapseState = getFromLocalStorage(HOMEPAGE_COLLAPSE_STATE, null);
+ const collapseState = getItem(LocalStorageKeys.homepage_collapse_state, []);
const [activeState, setActiveState] = useState>(collapseState);
const handleCollapse = (state: Array) => {
setActiveState(state);
- setInLocalStorage(HOMEPAGE_COLLAPSE_STATE, state);
+ setItem(LocalStorageKeys.homepage_collapse_state, state);
};
useEffect(() => {
- const activeTab = getFromLocalStorage(HOMEPAGE_ACTIVITY_FILTER, null);
- setActiveState(collapseState || DEFAULT_TAB_ARR);
+ const activeTab = getItem(LocalStorageKeys.homepage_activity_filter, null);
+ setActiveState(collapseState.length > 0 ? collapseState : DEFAULT_TAB_ARR);
getRecentAcitivtyObjs(user.userId, recent, addDangerToast)
.then(res => {
const data: ActivityData | null = {};
@@ -183,7 +182,7 @@ function Welcome({ user, addDangerToast }: WelcomeProps) {
setActiveChild('Viewed');
} else if (!activeTab && !data.Viewed) {
setActiveChild('Created');
- } else setActiveChild(activeTab);
+ } else setActiveChild(activeTab || 'Created');
} else if (!activeTab) setActiveChild('Created');
else setActiveChild(activeTab);
setActivityData(activityData => ({ ...activityData, ...data }));
@@ -237,7 +236,7 @@ function Welcome({ user, addDangerToast }: WelcomeProps) {
const handleToggle = () => {
setChecked(!checked);
- setInLocalStorage(id, { thumbnails: !checked });
+ dangerouslySetItemDoNotUse(id, { thumbnails: !checked });
};
useEffect(() => {