feat(dashboard): customize UI for SDK workspaces

Author: tristandubbeld

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

@@ -12,6 +12,7 @@ import { UserMenu } from 'app/pages/common/UserMenu';
 import { Notifications } from 'app/components/Notifications';
 import { dashboard as dashboardUrls } from '@codesandbox/common/lib/utils/url-generator';
 import { useWorkspaceLimits } from 'app/hooks/useWorkspaceLimits';
+import { useActiveTeamInfo } from 'app/hooks/useActiveTeamInfo';
 import { TeamAvatar } from 'app/components/TeamAvatar';
 import { WorkspaceSelect } from 'app/components/WorkspaceSelect';
 import { SkeletonTextBlock } from 'app/components/Skeleton/elements';
@@ -25,6 +26,7 @@ export const Header: React.FC<HeaderProps> = React.memo(
     const history = useHistory();
     const actions = useActions();
     const { isFrozen } = useWorkspaceLimits();
+    const { sdkWorkspace } = useActiveTeamInfo();
     const {
       activeWorkspaceAuthorization,
       hasLogIn,
@@ -96,31 +98,35 @@ export const Header: React.FC<HeaderProps> = React.memo(
 
         <Stack align="center" gap={2}>
           <SearchInputGroup />
-          <Button
-            variant="secondary"
-            disabled={activeWorkspaceAuthorization === 'READ' || isFrozen}
-            onClick={() => {
-              track('Dashboard - Topbar - Import');
-              actions.modalOpened({ modal: 'import' });
-            }}
-            autoWidth
-          >
-            <Icon name="github" size={16} css={{ marginRight: '4px' }} />
-            Import
-          </Button>
-
-          <Button
-            variant="primary"
-            disabled={activeWorkspaceAuthorization === 'READ'}
-            onClick={() => {
-              track('Dashboard - Topbar - Create');
-              actions.modalOpened({ modal: 'create' });
-            }}
-            autoWidth
-          >
-            <Icon name="plus" size={12} css={{ marginRight: '4px' }} />
-            Create
-          </Button>
+          {!sdkWorkspace && (
+            <>
+              <Button
+                variant="secondary"
+                disabled={activeWorkspaceAuthorization === 'READ' || isFrozen}
+                onClick={() => {
+                  track('Dashboard - Topbar - Import');
+                  actions.modalOpened({ modal: 'import' });
+                }}
+                autoWidth
+              >
+                <Icon name="github" size={16} css={{ marginRight: '4px' }} />
+                Import
+              </Button>
+
+              <Button
+                variant="primary"
+                disabled={activeWorkspaceAuthorization === 'READ'}
+                onClick={() => {
+                  track('Dashboard - Topbar - Create');
+                  actions.modalOpened({ modal: 'create' });
+                }}
+                autoWidth
+              >
+                <Icon name="plus" size={12} css={{ marginRight: '4px' }} />
+                Create
+              </Button>
+            </>
+          )}
 
           {hasLogIn && <Notifications dashboard />}
 

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

@@ -7,6 +7,7 @@ import css from '@styled-system/css';
 import { useWorkspaceAuthorization } from 'app/hooks/useWorkspaceAuthorization';
 import { useWorkspaceSubscription } from 'app/hooks/useWorkspaceSubscription';
 import { useWorkspaceFeatureFlags } from 'app/hooks/useWorkspaceFeatureFlags';
+import { useActiveTeamInfo } from 'app/hooks/useActiveTeamInfo';
 import { ContextMenu } from './ContextMenu';
 import { DashboardBaseFolder } from '../types';
 import { Position } from '../Components/Selection';
@@ -76,7 +77,13 @@ export const Sidebar: React.FC<SidebarProps> = ({
     setNewFolderPath,
   };
 
-  const showRespositories = !state.environment.isOnPrem;
+  const { sdkWorkspace } = useActiveTeamInfo();
+  
+  const hasRepositories = state.activeTeam && state.sidebar[state.activeTeam]
+    ? state.sidebar[state.activeTeam].repositories.length > 0
+    : false;
+  
+  const showRespositories = !state.environment.isOnPrem && (!sdkWorkspace || hasRepositories);
 
   const { ubbBeta } = useWorkspaceFeatureFlags();
   const { isPrimarySpace, isTeamAdmin, isTeamEditor } = useWorkspaceAuthorization();
@@ -204,15 +211,17 @@ export const Sidebar: React.FC<SidebarProps> = ({
               size={2}
               css={css({ color: 'sideBarSectionHeader.foreground' })}
             >
-              Devboxes and Sandboxes
+              {sdkWorkspace ? 'Sandboxes' : 'Devboxes and Sandboxes'}
             </Text>
           </Element>
-          <RowItem
-            name="Drafts"
-            page="drafts"
-            path={dashboardUrls.drafts(activeTeam)}
-            icon="file"
-          />
+          {!sdkWorkspace && (
+            <RowItem
+              name="Drafts"
+              page="drafts"
+              path={dashboardUrls.drafts(activeTeam)}
+              icon="file"
+            />
+          )}
 
           <NestableRowItem
             name={ROOT_COLLECTION_NAME}
@@ -252,13 +261,17 @@ export const Sidebar: React.FC<SidebarProps> = ({
             path={dashboardUrls.deleted(activeTeam)}
             icon="trash"
           />
-          <Element marginTop={4} />
-          <RowItem
-            name="Shared with me"
-            page="shared"
-            path={dashboardUrls.shared(activeTeam)}
-            icon="sharing"
-          />
+          {!sdkWorkspace && (
+            <>
+              <Element marginTop={4} />
+              <RowItem
+                name="Shared with me"
+                page="shared"
+                path={dashboardUrls.shared(activeTeam)}
+                icon="sharing"
+              />
+            </>
+          )}
         </List>
         {ubbBeta && state.activeTeamInfo && (
           <UsageProgress