From 6edc183c5ff8b205159bd2c2b34b916a0106e1ce Mon Sep 17 00:00:00 2001 From: Erik Ritter Date: Mon, 20 Dec 2021 13:58:59 -0800 Subject: [PATCH] chore: Refactor localstorage into typesafe version (#17832) --- .../src/plugin/controlPanel.tsx | 8 +- .../dashboard/containers/DashboardPage.tsx | 20 +++-- .../components/DataTablesPane/index.tsx | 13 ++- .../explore/components/ExploreChartPanel.jsx | 13 ++- .../components/ExploreViewContainer.jsx | 26 +++--- superset-frontend/src/explore/constants.ts | 2 - .../localStorageHelpers.test.ts} | 29 ++++-- .../src/utils/localStorageHelpers.ts | 89 +++++++++++++++++-- .../src/views/CRUD/chart/ChartList.tsx | 15 ++-- .../views/CRUD/dashboard/DashboardList.tsx | 5 +- .../src/views/CRUD/welcome/ActivityTable.tsx | 11 ++- .../src/views/CRUD/welcome/ChartTable.tsx | 19 ++-- .../src/views/CRUD/welcome/DashboardTable.tsx | 25 ++++-- .../src/views/CRUD/welcome/Welcome.tsx | 25 +++--- 14 files changed, 202 insertions(+), 98 deletions(-) rename superset-frontend/src/{views/CRUD/storageKeys.ts => utils/localStorageHelpers.test.ts} (58%) 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 989e32381d97..ccb74e45bb4b 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:')}
- + ), }, }, @@ -265,14 +265,14 @@ const config: ControlPanelConfig = { ], renderTrigger: true, description: ( - + <>
{t('Change order of columns.')}
{t('Available sorting modes:')}
- + ), }, }, diff --git a/superset-frontend/src/dashboard/containers/DashboardPage.tsx b/superset-frontend/src/dashboard/containers/DashboardPage.tsx index 20e98a598f71..1f28ecad74e2 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 55b11f9237d4..be0409ffeb92 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 b331ae33e0cc..7a930a7ff1c7 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 e8b277319fd2..b56f09a2ba2a 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 28668389fe55..2d5afb89627f 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 5002420aa777..8392ee5291a1 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 28f5dfcbaef7..75c18226ef8c 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 33236591b058..3b125c78f35e 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 f82cab4a1113..dfda6e58b98d 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 759a0731312a..9e992ad54ea4 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 8b59fbcad32d..5b98140f389d 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(() => {