Repository: codesandbox/codesandbox-client (language: javascript)

Issue:
Explicitly show who owns a codesandbox
# 🌈 Feature

We had a codesandbox that was created by a member under their user account and then transferred to our org. 
We're pretty sure its owned by us now considering the used org switches when I navigate to the codesandbox (due to https://github.com/codesandbox/codesandbox-client/issues/5035).
But it's still not apparent since codesandbox only shows the creator and not the owner (at least I couldn't find that information).

Codesandbox: https://codesandbox.io/s/mimic-v4-button-default-color-bklx8?file=/src/Demo.tsx
![Screenshot from 2021-10-07 09-38-51](https://user-images.githubusercontent.com/12292047/136340675-4dd07963-27c9-43e3-9055-b51d7122c7af.png)
Client version: e6a3e092b


Discussion / hints:
Ah this is an interesting UX/UI thing we need to look into. We currently show the creator, and then under it which team it belongs to. Maybe we should reverse it, because it's indeed the case that the team is the real _owner_.
> We currently show the creator, and then under it which team it belongs to.

Just spotted it, thanks!

Though it does look like it says to what group the user belongs to not the codesandbox. So this is just a clarity issue for me.
Yeah, we should definitely reverse it. You have a good point!

Fix patch:
diff --git a/packages/app/src/app/overmind/namespaces/editor/internalActions.ts b/packages/app/src/app/overmind/namespaces/editor/internalActions.ts
index 27d1c3b0fb1..f46fe82dee0 100755
--- a/packages/app/src/app/overmind/namespaces/editor/internalActions.ts
+++ b/packages/app/src/app/overmind/namespaces/editor/internalActions.ts
@@ -492,10 +492,7 @@ export const forkSandbox = async (
       actions.server.startContainer(forkedSandbox);
     }
 
-    if (
-      state.workspace.openedWorkspaceItem === 'project-summary' ||
-      state.workspace.openedWorkspaceItem === 'github-summary'
-    ) {
+    if (state.workspace.openedWorkspaceItem === 'project-summary') {
       actions.workspace.openDefaultItem();
     }
 
diff --git a/packages/app/src/app/overmind/utils/items.ts b/packages/app/src/app/overmind/utils/items.ts
index 221206d580c..9eeb6f461ab 100755
--- a/packages/app/src/app/overmind/utils/items.ts
+++ b/packages/app/src/app/overmind/utils/items.ts
@@ -31,12 +31,6 @@ export const PROJECT_SUMMARY: INavigationItem = {
   hasCustomHeader: true,
 };
 
-export const GITHUB_SUMMARY: INavigationItem = {
-  id: 'github-summary',
-  name: 'GitHub Info',
-  hasCustomHeader: true,
-};
-
 export const SEARCH: INavigationItem = {
   id: 'search',
   name: 'Search',
@@ -142,7 +136,7 @@ export default function getItems(
     getTemplate(currentSandbox.template).isServer;
 
   if (currentSandbox.git) {
-    const gitItems = [GITHUB_SUMMARY];
+    const gitItems = [PROJECT_SUMMARY];
 
     if (
       isServer &&
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Navigation/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Navigation/index.tsx
index ae2c57918c8..6543dec2cbb 100644
--- a/packages/app/src/app/pages/Sandbox/Editor/Navigation/index.tsx
+++ b/packages/app/src/app/pages/Sandbox/Editor/Navigation/index.tsx
@@ -28,7 +28,6 @@ import {
 const IDS_TO_ICONS = {
   project: InfoIcon,
   'project-summary': InfoIcon,
-  'github-summary': GithubIcon,
   files: ExplorerIcon,
   search: SearchIcon,
   github: GithubIcon,
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/index.tsx
index 70fa1c3d7e4..569ce347d23 100644
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/index.tsx
+++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/index.tsx
@@ -11,7 +11,6 @@ import { ConfigurationFiles } from './screens/ConfigurationFiles';
 import { Deployment } from './screens/Deployment/index';
 import { Explorer } from './screens/Explorer';
 import { GitHub } from './screens/GitHub';
-import { GithubSummary } from './screens/GithubSummary';
 import { Live } from './screens/Live';
 import { NotOwnedSandboxInfo } from './screens/NotOwnedSandboxInfo';
 import { ProjectInfo } from './screens/ProjectInfo';
@@ -22,7 +21,6 @@ import { SignInBanner } from './SignInBanner';
 const workspaceTabs = {
   project: ProjectInfo,
   'project-summary': NotOwnedSandboxInfo,
-  'github-summary': GithubSummary,
   github: GitHub,
   files: Explorer,
   search: Search,
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/GithubSummary/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/GithubSummary/index.tsx
deleted file mode 100644
index f191bca4828..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/GithubSummary/index.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import { githubRepoUrl } from '@codesandbox/common/lib/utils/url-generator';
-import {
-  Button,
-  Collapsible,
-  Element,
-  Link,
-  Stack,
-  Text,
-} from '@codesandbox/components';
-import { github as GitHubIcon } from '@codesandbox/components/lib/components/Icon/icons';
-import { useAppState, useActions } from 'app/overmind';
-import React from 'react';
-
-import { Explorer } from '../Explorer';
-
-export const GithubSummary = () => {
-  const { forkSandboxClicked } = useActions().editor;
-  const { editor } = useAppState();
-  if (!editor.currentSandbox?.git) {
-    // Race condition where `git` is undefined, but this is still rendered
-    return null;
-  }
-
-  return (
-    <>
-      <Collapsible title="GitHub Repository" defaultOpen>
-        <Element paddingX={2}>
-          <Link
-            target="_blank"
-            rel="noopener noreferrer"
-            href={githubRepoUrl(editor.currentSandbox.git)}
-          >
-            <Stack gap={2} marginBottom={6} align="center">
-              <GitHubIcon width={20} />
-              <Text size={2}>
-                {editor.currentSandbox.git.username}/
-                {editor.currentSandbox.git.repo}
-              </Text>
-            </Stack>
-          </Link>
-          <Text variant="muted" size={3}>
-            This Sandbox is in sync with{' '}
-            <Text weight="bold">{editor.currentSandbox.git.branch}</Text> on
-            GitHub. You have to fork to make changes
-          </Text>
-          <Button
-            marginTop={8}
-            variant="primary"
-            loading={editor.isForkingSandbox}
-            onClick={() => forkSandboxClicked({})}
-          >
-            {editor.isForkingSandbox ? 'Forking...' : 'Fork'}
-          </Button>
-        </Element>
-      </Collapsible>
-      <Explorer readonly />
-    </>
-  );
-};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/NotOwnedSandboxInfo/Summary.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/NotOwnedSandboxInfo/Summary.tsx
index 66313363f51..d0bc2a1d736 100644
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/NotOwnedSandboxInfo/Summary.tsx
+++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/NotOwnedSandboxInfo/Summary.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { useAppState } from 'app/overmind';
+import { useActions, useAppState } from 'app/overmind';
 
 import { getSandboxName } from '@codesandbox/common/lib/utils/get-sandbox-name';
 import {
@@ -9,18 +9,19 @@ import {
 } from '@codesandbox/common/lib/utils/url-generator';
 import getTemplateDefinition from '@codesandbox/common/lib/templates';
 import { getTemplateIcon } from '@codesandbox/common/lib/utils/getTemplateIcon';
+import { TeamAvatar } from 'app/components/TeamAvatar';
 
 import {
   Element,
   Collapsible,
   Text,
   Link,
-  Avatar,
   Stack,
   List,
   ListItem,
   Stats,
   Tags,
+  Button,
 } from '@codesandbox/components';
 import css from '@styled-system/css';
 
@@ -29,7 +30,7 @@ import { GitHubIcon } from '../GitHub/Icons';
 
 export const Summary = () => {
   const {
-    editor: { currentSandbox },
+    editor: { currentSandbox, isForkingSandbox },
     isLoggedIn,
   } = useAppState();
   const {
@@ -42,6 +43,9 @@ export const Summary = () => {
     tags,
     team,
   } = currentSandbox;
+  const {
+    editor: { forkSandboxClicked },
+  } = useActions();
 
   const isForked = forkedFromSandbox || forkedTemplateSandbox;
   const { url: templateUrl } = getTemplateDefinition(template);
@@ -85,17 +89,17 @@ export const Summary = () => {
       <Divider marginTop={8} marginBottom={4} />
 
       <Stack as="section" direction="vertical" gap={4}>
-        {author ? (
+        {team ? (
           <Link href={profileUrl(author.username)}>
             <Stack gap={2} align="center" paddingX={2}>
-              <Avatar user={author} />
+              <TeamAvatar name={team.name} avatar={team.avatarUrl} />
               <Stack direction="vertical">
                 <Link variant={team ? 'body' : 'muted'} block>
-                  {author.username}
+                  {team.name}
                 </Link>
-                {team && (
+                {author && (
                   <Text size={2} variant="muted">
-                    {team.name}
+                    {author.name || author.username}
                   </Text>
                 )}
               </Stack>
@@ -151,6 +155,23 @@ export const Summary = () => {
             </Link>
           </ListItem>
         </List>
+
+        {!author && currentSandbox.git ? (
+          <Stack as="section" direction="vertical" gap={4} paddingX={2}>
+            <Text variant="muted" size={3}>
+              This sandbox is in sync with{' '}
+              <Text weight="bold">{currentSandbox.git.branch}</Text> on GitHub.
+              You have to fork to make changes
+            </Text>
+            <Button
+              variant="primary"
+              loading={isForkingSandbox}
+              onClick={() => forkSandboxClicked({})}
+            >
+              {isForkingSandbox ? 'Forking...' : 'Fork'}
+            </Button>
+          </Stack>
+        ) : null}
       </Stack>
     </Collapsible>
   );
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/ProjectInfo/Summary/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/ProjectInfo/Summary/index.tsx
index 0f859679a85..e8eb7534e12 100644
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/ProjectInfo/Summary/index.tsx
+++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/ProjectInfo/Summary/index.tsx
@@ -7,7 +7,6 @@ import {
   sandboxUrl,
 } from '@codesandbox/common/lib/utils/url-generator';
 import {
-  Avatar,
   Collapsible,
   Element,
   Label,
@@ -21,9 +20,11 @@ import {
   Tags,
   Text,
   IconButton,
+  Button,
 } from '@codesandbox/components';
 import css from '@styled-system/css';
 import { Markdown } from 'app/components/Markdown';
+import { TeamAvatar } from 'app/components/TeamAvatar';
 import { useAppState, useActions } from 'app/overmind';
 import React, { useEffect } from 'react';
 
@@ -32,9 +33,17 @@ import { EditSummary } from './EditSummary';
 import { TemplateConfig } from './TemplateConfig';
 
 export const Summary = () => {
-  const { currentSandbox, sessionFrozen } = useAppState().editor;
+  const {
+    currentSandbox,
+    isForkingSandbox,
+    sessionFrozen,
+  } = useAppState().editor;
   const { editingSandboxInfo } = useAppState().workspace;
-  const { frozenUpdated, sessionFreezeOverride } = useActions().editor;
+  const {
+    frozenUpdated,
+    sessionFreezeOverride,
+    forkSandboxClicked,
+  } = useActions().editor;
   const { toggleEditingSandboxInfo } = useActions().workspace;
   const {
     author,
@@ -115,17 +124,17 @@ export const Summary = () => {
       </Element>
 
       <Stack as="section" direction="vertical" gap={4} paddingX={2}>
-        {author ? (
+        {team ? (
           <Link href={profileUrl(author.username)}>
             <Stack gap={2} align="center" css={{ display: 'inline-flex' }}>
-              <Avatar user={author} />
+              <TeamAvatar name={team.name} avatar={team.avatarUrl} />
               <Element>
                 <Text variant={team ? 'body' : 'muted'} block>
-                  {author.username}
+                  {team.name}
                 </Text>
-                {team && (
+                {author && (
                   <Text size={2} marginTop={1} variant="muted" maxWidth="100%">
-                    {team.name}
+                    {author.name || author.username}
                   </Text>
                 )}
               </Element>
@@ -159,6 +168,24 @@ export const Summary = () => {
         <Stats sandbox={currentSandbox} />
       </Stack>
 
+      {!author && currentSandbox.git ? (
+        <Stack as="section" direction="vertical" gap={4} paddingX={2}>
+          <Text variant="muted" size={3}>
+            This sandbox is in sync with{' '}
+            <Text weight="bold">{currentSandbox.git.branch}</Text> on GitHub.
+            You have to fork to make changes
+          </Text>
+          <Button
+            marginTop={8}
+            variant="primary"
+            loading={isForkingSandbox}
+            onClick={() => forkSandboxClicked({})}
+          >
+            {isForkingSandbox ? 'Forking...' : 'Fork'}
+          </Button>
+        </Stack>
+      ) : null}
+
       <Divider marginTop={8} marginBottom={4} />
 
       <List>


Test patch: