feat: experimental standalone page (#8180)

* feat: show personal free workspaces as teams

* feat: Update workspace settings titles and references

Update titles and references in the workspace settings pages and components

* refactor: Update delete workspace functionality

Removed condition to show notification and added modal

* refactor: Update workspace settings and navigation

Updated workspace settings in Dashboard and navigation in Settings

* feat: Add personal space announcement modal

Added new modal component for announcing personal workspace features and benefits

* feat: Edit workspace and team titles

Changed titles in multiple files from 'Edit team' to 'Edit workspace'.

* change subtitle

* feat: add account settings in preferences

* feat: Add user check

Add user check before executing code in preferences actions.ts

* initial commit

* Update index.tsx

* feat: sandbox and preference modal exposed on standalone page

* fix typing

Author: alexnm

packages/app/src/app/overmind/namespaces/preferences/state.ts

@@ -15,7 +15,7 @@ type State = {
   settings: Settings;
   isLoadingPaymentDetails: boolean;
   hideNavigation: boolean;
-  itemId: string;
+  itemId: string | null;
   showEditor: boolean;
   showModal: boolean;
   showPreview: boolean;
@@ -84,7 +84,7 @@ export const state: State = {
   isLoadingPaymentDetails: true,
   paymentDetailError: null,
   paymentDetails: null,
-  itemId: 'appearance',
+  itemId: null,
   showEditor: true,
   showPreview: true,
   showDevtools: false,

packages/app/src/app/pages/Standalone/index.tsx

@@ -0,0 +1,47 @@
+import React, { useEffect } from 'react';
+import { createGlobalStyle, withTheme } from 'styled-components';
+import { ThemeProvider, Element } from '@codesandbox/components';
+import { useActions } from 'app/overmind';
+import { useParams } from 'react-router-dom';
+import { CreateSandbox } from 'app/components/CreateSandbox';
+import { Preferences } from '../common/Modals/PreferencesModal';
+import { NotFound } from '../common/NotFound';
+
+const COMPONENT_MAP = {
+  preferences: Preferences,
+  create: CreateSandbox,
+};
+
+export const StandalonePage = withTheme(({ theme }) => {
+  const { genericPageMounted } = useActions();
+  const params: { componentId?: string } = useParams();
+  const searchParams = new URLSearchParams(window.location.search);
+
+  useEffect(() => {
+    genericPageMounted();
+  }, [genericPageMounted]);
+
+  const Content = COMPONENT_MAP[params.componentId];
+  const contentProps = Object.fromEntries(searchParams.entries());
+
+  if (!Content) {
+    return <NotFound />;
+  }
+
+  const GlobalStyles = createGlobalStyle({
+    body: {
+      overflow: 'hidden',
+      color: '#f5f5f5',
+      background: '#151515 !important',
+    },
+  });
+
+  return (
+    <ThemeProvider theme={theme.vsCode}>
+      <GlobalStyles />
+      <Element css={{ background: '#151515', width: '100%', height: '100%' }}>
+        <Content isStandalone {...contentProps} />
+      </Element>
+    </ThemeProvider>
+  );
+});

packages/app/src/app/pages/common/Modals/PreferencesModal/SideNavigation.tsx

@@ -2,7 +2,8 @@ import { Element, Stack, Text } from '@codesandbox/components';
 import css from '@styled-system/css';
 import React, { ComponentType, FunctionComponent } from 'react';
 
-import { useAppState, useActions } from 'app/overmind';
+import { useActions } from 'app/overmind';
+
 import { useIsEditorPage } from 'app/hooks/useIsEditorPage';
 
 type MenuItem = {
@@ -12,9 +13,12 @@ type MenuItem = {
 };
 type Props = {
   menuItems: MenuItem[];
+  selectedTab: string;
 };
-export const SideNavigation: FunctionComponent<Props> = ({ menuItems }) => {
-  const { itemId = 'appearance' } = useAppState().preferences;
+export const SideNavigation: FunctionComponent<Props> = ({
+  menuItems,
+  selectedTab,
+}) => {
   const { itemIdChanged } = useActions().preferences;
   const isEditorPage = useIsEditorPage();
 
@@ -55,7 +59,7 @@ export const SideNavigation: FunctionComponent<Props> = ({ menuItems }) => {
               lineHeight: 1,
               border: '1px solid transparent',
               color:
-                itemId === id
+                selectedTab === id
                   ? 'list.hoverForeground'
                   : 'sideBarSectionHeader.foreground',
               '&:hover': {

packages/app/src/app/pages/common/Modals/PreferencesModal/index.tsx

@@ -1,6 +1,5 @@
-import { Stack } from '@codesandbox/components';
-import css from '@styled-system/css';
-import React, { ComponentProps, ComponentType, FunctionComponent } from 'react';
+import { Stack, Element } from '@codesandbox/components';
+import React, { ComponentProps, ComponentType } from 'react';
 
 import AccountIcon from 'react-icons/lib/fa/user';
 import CodeIcon from 'react-icons/lib/fa/code';
@@ -15,8 +14,6 @@ import { useAppState } from 'app/overmind';
 import { useIsEditorPage } from 'app/hooks/useIsEditorPage';
 import { CurrentUser } from '@codesandbox/common/lib/types';
 
-import { Alert } from '../Common/Alert';
-
 import { Account } from './Account';
 import { Appearance } from './Appearance';
 import { CodeFormatting } from './CodeFormatting';
@@ -99,35 +96,40 @@ const getItems = (
       },
   ].filter(Boolean);
 
-export const PreferencesModal: FunctionComponent = () => {
+export const Preferences: React.FC<{
+  tab?: string;
+  isStandalone?: boolean;
+}> = ({ tab, isStandalone }) => {
   const {
     isLoggedIn,
     user,
-    preferences: { itemId = 'account' },
+    preferences: { itemId },
     environment,
   } = useAppState();
 
   const isEditorPage = useIsEditorPage();
   const items = getItems(isLoggedIn, user, environment.isOnPrem, isEditorPage);
 
-  const tabToShow = items.find(({ id }) => id === itemId) || items[0];
+  const tabId = itemId || tab || 'account';
+
+  const tabToShow = items.find(({ id }) => id === tabId) || items[0];
   const { Content } = tabToShow;
 
   return (
-    <Stack css={css({ fontFamily: "'Inter', sans-serif" })}>
-      <SideNavigation menuItems={items} />
+    <Stack>
+      <SideNavigation menuItems={items} selectedTab={tabId} />
 
-      <Alert
-        css={css({
-          height: 482,
+      <Element
+        css={{
+          height: isStandalone ? 'auto' : '482px',
           width: '100%',
-          padding: 6,
-          marginTop: 52,
-          '*': { boxSizing: 'border-box' },
-        })}
+          padding: '24px',
+          marginTop: '52px',
+          overflow: 'auto',
+        }}
       >
         <Content />
-      </Alert>
+      </Element>
     </Stack>
   );
 };

packages/app/src/app/pages/common/Modals/index.tsx

@@ -26,7 +26,7 @@ import { LiveSessionRestricted } from './LiveSessionRestricted';
 import { LiveVersionMismatch } from './LiveSessionVersionMismatch';
 import { NetlifyLogs } from './NetlifyLogs';
 import { PickSandboxModal } from './PickSandboxModal';
-import { PreferencesModal } from './PreferencesModal';
+import { Preferences } from './PreferencesModal';
 import { RecoverFilesModal } from './RecoverFilesModal';
 import { LegacyPaymentModal } from './LegacyPaymentModal';
 import { SandboxPickerModal } from './SandboxPickerModal';
@@ -54,7 +54,7 @@ import { PersonalSpaceAnnouncement } from './PersonalSpaceAnnouncement';
 
 const modals = {
   preferences: {
-    Component: PreferencesModal,
+    Component: Preferences,
     width: 900,
   },
   legacyPayment: {

packages/app/src/app/pages/index.tsx

@@ -12,6 +12,7 @@ import { Debug } from 'app/components/Debug';
 import { ErrorBoundary } from './common/ErrorBoundary';
 import { Modals } from './common/Modals';
 import { DevAuthPage } from './DevAuth';
+import { StandalonePage } from './Standalone';
 import { Container, Content } from './elements';
 import { Dashboard } from './Dashboard';
 import { Sandbox } from './Sandbox';
@@ -217,6 +218,7 @@ const RoutesComponent: React.FC = () => {
               <Route path="/auth/dev" component={DevAuthPage} />
             )}
             <Route path="/codesadbox" component={CodeSadbox} />
+            <Route path="/standalone/:componentId" component={StandalonePage} />
             <Redirect from="/patron" to="/pro" />
             <Route component={NotFound} />
           </Switch>