rusackas commented on code in PR #37141: URL: https://github.com/apache/superset/pull/37141#discussion_r2824919593
########## superset-frontend/src/components/MobileRouteGuard/index.tsx: ########## @@ -0,0 +1,104 @@ +/** + * 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 { ReactNode, useEffect, useState } from 'react'; +import { useLocation } from 'react-router-dom'; +import { Grid } from '@superset-ui/core/components'; +import MobileUnsupported from 'src/pages/MobileUnsupported'; + +const { useBreakpoint } = Grid; + +/** + * Routes that are supported on mobile devices. + * All other routes will show the MobileUnsupported page on mobile. + */ +export const MOBILE_SUPPORTED_ROUTES: RegExp[] = [ + // Authentication + /^\/login\/?$/, + /^\/logout\/?$/, + /^\/register\/?/, + + // Welcome / Home page + /^\/superset\/welcome\/?$/, + + // Dashboard list and individual dashboards + /^\/dashboard\/list\/?$/, + /^\/superset\/dashboard\/[^/]+\/?$/, + + // The mobile unsupported page itself + /^\/mobile-unsupported\/?$/, + + // User info + /^\/user_info\/?$/, +]; + +/** + * Check if a given path is supported on mobile + */ +export function isMobileSupportedRoute(path: string): boolean { + // Remove query string and hash for matching + const cleanPath = path.split(/[?#]/)[0]; + return MOBILE_SUPPORTED_ROUTES.some(pattern => pattern.test(cleanPath)); +} + +interface MobileRouteGuardProps { + children: ReactNode; +} + +/** + * A component that wraps route content and redirects to the + * MobileUnsupported page when accessing non-mobile-friendly + * routes on mobile devices. + * + * Users can bypass this by clicking "Continue anyway" which + * sets a sessionStorage flag. + */ +function MobileRouteGuard({ children }: MobileRouteGuardProps) { + const screens = useBreakpoint(); + const location = useLocation(); + const [bypassEnabled, setBypassEnabled] = useState(false); + + // Check for bypass flag on mount and when location changes + useEffect(() => { + const bypass = sessionStorage.getItem('mobile-bypass') === 'true'; + setBypassEnabled(bypass); + }, [location.pathname]); Review Comment: ✅ Fixed in commit 140f28b. Added try/catch wrapper and initialized state safely in useState initializer to avoid both crashes and first-render flicker. ########## superset-frontend/src/pages/MobileUnsupported/index.tsx: ########## @@ -0,0 +1,215 @@ +/** + * 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 { useCallback } from 'react'; +import { useHistory, useLocation } from 'react-router-dom'; +import { t } from '@apache-superset/core'; +import { css, useTheme } from '@apache-superset/core/ui'; +import { Button, Grid } from '@superset-ui/core/components'; +import { Icons } from '@superset-ui/core/components/Icons'; + +const { useBreakpoint } = Grid; + +interface MobileUnsupportedProps { + /** The original path the user was trying to access */ + originalPath?: string; +} + +/** + * A mobile-friendly page shown when users try to access + * features that aren't supported on mobile devices. + */ +function MobileUnsupported({ originalPath }: MobileUnsupportedProps) { + const theme = useTheme(); + const history = useHistory(); + const location = useLocation(); + const screens = useBreakpoint(); + + // Get the original path from props or query params + const fromPath = + originalPath || + new URLSearchParams(location.search).get('from') || + location.pathname; + + const handleViewDashboards = useCallback(() => { + history.push('/dashboard/list/'); + }, [history]); + + const handleGoHome = useCallback(() => { + history.push('/superset/welcome/'); + }, [history]); + + const handleContinueAnyway = useCallback(() => { + // Store preference in sessionStorage so we don't keep redirecting + sessionStorage.setItem('mobile-bypass', 'true'); Review Comment: ✅ Fixed in commit 140f28b. Wrapped sessionStorage.setItem in try/catch so the "Continue anyway" flow still works without crashing. -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: [email protected] For queries about this service, please contact Infrastructure at: [email protected] --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
