Sara/csb 165 create team info in team settings page (codesandbox#4059)

SaraVieira · web-flow · commit 28ed150e2f2f · 2020-05-01T11:40:42.000+02:00
diff --git a/packages/app/src/app/graphql/schema.graphql b/packages/app/src/app/graphql/schema.graphql
@@ -1,5 +1,5 @@
 # source: https://codesandbox.io/api/graphql
-# timestamp: Thu Apr 30 2020 18:52:01 GMT+0200 (Central European Summer Time)
+# timestamp: Thu Apr 30 2020 19:12:48 GMT+0200 (Central European Summer Time)
 
 schema {
   query: RootQuery
diff --git a/packages/app/src/app/graphql/types.ts b/packages/app/src/app/graphql/types.ts
@@ -1471,7 +1471,10 @@ export type GetTeamQuery = { __typename?: 'RootQueryType' } & {
   me: Maybe<
     { __typename?: 'CurrentUser' } & {
       team: Maybe<
-        { __typename?: 'Team' } & Pick<Team, 'id' | 'creatorId'> & {
+        { __typename?: 'Team' } & Pick<
+          Team,
+          'id' | 'creatorId' | 'description' | 'name'
+        > & {
             users: Array<
               { __typename?: 'User' } & Pick<
                 User,
diff --git a/packages/app/src/app/overmind/effects/gql/dashboard/queries.ts b/packages/app/src/app/overmind/effects/gql/dashboard/queries.ts
@@ -216,6 +216,8 @@ export const getTeam: Query<GetTeamQuery, GetTeamQueryVariables> = gql`
       team(id: $teamId) {
         id
         creatorId
+        description
+        name
         users {
           avatarUrl
           name
diff --git a/packages/app/src/app/overmind/namespaces/dashboard/actions.ts b/packages/app/src/app/overmind/namespaces/dashboard/actions.ts
@@ -139,6 +139,20 @@ export const getTeams: AsyncAction = async ({ state, effects }) => {
 
   state.dashboard.teams = teams.me.teams;
 };
+
+export const getTeam: AsyncAction = withLoadApp(async ({ state, effects }) => {
+  if (!state.dashboard.activeTeam) return;
+  const team = await effects.gql.queries.getTeam({
+    teamId: state.dashboard.activeTeam,
+  });
+
+  if (!team || !team.me) {
+    return;
+  }
+
+  state.dashboard.activeTeamInfo = team.me.team;
+});
+
 export const getRecentSandboxes: AsyncAction = withLoadApp(
   async ({ state, effects }) => {
     const { dashboard } = state;
diff --git a/packages/app/src/app/overmind/namespaces/dashboard/state.ts b/packages/app/src/app/overmind/namespaces/dashboard/state.ts
@@ -50,6 +50,7 @@ type State = {
   teams: Array<{ __typename?: 'Team' } & Pick<Team, 'id' | 'name'>>;
   allCollections: DELETE_ME_COLLECTION[] | null;
   activeTeam: string | null;
+  activeTeamInfo: any | null;
   selectedSandboxes: string[];
   trashSandboxIds: string[];
   isDragging: boolean;
@@ -93,6 +94,7 @@ export const state: State = {
   viewMode: 'grid',
   allCollections: null,
   activeTeam: null,
+  activeTeamInfo: null,
   teams: [],
   recentSandboxesByTime: ({ sandboxes }) => {
     const recentSandboxes = sandboxes.RECENT;
diff --git a/packages/app/src/app/pages/NewDashboard/Content/routes/Settings/TeamSettings.tsx b/packages/app/src/app/pages/NewDashboard/Content/routes/Settings/TeamSettings.tsx
@@ -1,15 +1,89 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useOvermind } from 'app/overmind';
+import css from '@styled-system/css';
+import { Grid, Element, Stack, Button } from '@codesandbox/components';
+import { Box } from './components/Box';
+import { Text } from './components/Typography';
+import { randomColor } from '../../utils';
 import { Header } from '../../../Components/Header';
 
 export const TeamSettings = () => {
   const {
-    state: { dashboard },
+    state: {
+      dashboard: { activeTeamInfo: team },
+    },
+    actions,
   } = useOvermind();
+
+  useEffect(() => {
+    actions.dashboard.getTeam();
+  }, [actions.dashboard]);
+
+  if (!team) {
+    return <Header title="Team Settings" />;
+  }
+  const created = team.users.find(user => user.id === team.creatorId);
   return (
     <>
       <Header title="Team Settings" />
-      {dashboard.activeTeam}
+      <Grid
+        columnGap={4}
+        css={css({
+          gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
+        })}
+      >
+        <Box>
+          <Stack gap={4} align="flex-start">
+            {team.avatarUrl ? (
+              <img src={team.avatarUrl} width="55" alt={team.name} />
+            ) : (
+              <Stack
+                align="center"
+                justify="center"
+                css={css({
+                  minWidth: 55,
+                  width: 55,
+                  height: 55,
+                  borderRadius: 'medium',
+                  color: 'grays.800',
+                  fontSize: 7,
+                  background: randomColor,
+                  fontWeight: 'bold',
+                })}
+              >
+                {team.name.charAt(0)}
+              </Stack>
+            )}
+
+            <Element>
+              <Text weight="bold" block marginBottom={4} size={6}>
+                {team.name}
+              </Text>
+              <Text>Community Plan (Free)</Text>
+              <Text>{team.description}</Text>
+            </Element>
+          </Stack>
+        </Box>
+        <Box
+          title={`${team.users.length} Team Member${
+            team.users.length === 1 ? '' : 's'
+          }`}
+        >
+          <Text>Created by {created.username}</Text>
+        </Box>
+        <Box white title="Team Pro">
+          <Text white marginBottom={6}>
+            Get early access and product updates?
+          </Text>
+          <Button
+            href="https://airtable.com/shrlgLSJWiX8rYqyG"
+            as="a"
+            target="_blank"
+          >
+            Subscribe to Pro
+          </Button>
+        </Box>
+      </Grid>
     </>
   );
 };
diff --git a/packages/app/src/app/pages/NewDashboard/Content/routes/Settings/UserSettings.tsx b/packages/app/src/app/pages/NewDashboard/Content/routes/Settings/UserSettings.tsx
@@ -14,7 +14,7 @@ export const UserSettings = () => {
 
   useEffect(() => {
     actions.dashboard.newDashboardMounted();
-  });
+  }, [actions.dashboard]);
 
   if (!user) {
     return <Header title="User Settings" />;
@@ -43,7 +43,9 @@ export const UserSettings = () => {
               </Text>
               <Text>{user.name}</Text>
               <Text>{user.email}</Text>
-              <Link href="https://github.com">Managed by Github</Link>
+              <Link href="https://github.com" target="_blank">
+                Managed by Github
+              </Link>
             </Element>
           </Stack>
         </Box>
diff --git a/packages/app/src/app/pages/NewDashboard/Content/routes/Settings/components/Typography.tsx b/packages/app/src/app/pages/NewDashboard/Content/routes/Settings/components/Typography.tsx
@@ -11,8 +11,15 @@ type TextProps = {
   size?: number;
 };
 
-export const Link = ({ href, children }) => (
-  <LinkBase size={3} css={css({ color: 'button.background' })} href={href}>
+type LinkProps = { href: string; children: any; target?: string };
+
+export const Link = ({ href, children, ...props }: LinkProps) => (
+  <LinkBase
+    size={3}
+    css={css({ color: 'button.background' })}
+    href={href}
+    {...props}
+  >
     {children}
   </LinkBase>
 );
diff --git a/packages/app/src/app/pages/NewDashboard/Content/utils.ts b/packages/app/src/app/pages/NewDashboard/Content/utils.ts
@@ -18,3 +18,19 @@ export function getPossibleTemplates(sandboxes: any[]) {
     template => template.id
   );
 }
+
+const colors = [
+  'rgb(0, 122, 255)',
+  'rgb(52, 199, 89)',
+  'rgb(255, 45, 85)',
+  'rgb(88, 86, 214)',
+  'rgb(255, 149, 0)',
+  'rgb(90, 200, 250)',
+  'rgb(175, 82, 22)',
+  'rgb(255, 200, 250)',
+  'rgb(69, 235, 195)',
+  'rgb(255, 59, 48)',
+  'rgb(212, 69, 235)',
+  'rgb(192, 235, 69)',
+];
+export const randomColor = colors[Math.floor(Math.random() * colors.length)];
diff --git a/packages/components/src/components/Button/index.tsx b/packages/components/src/components/Button/index.tsx
@@ -107,6 +107,7 @@ export interface ButtonProps
   href?: string;
   to?: string;
   as?: any;
+  target?: any;
 }
 
 export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(

Original file line number	Diff line number	Diff line change
`@@ -107,6 +107,7 @@ export interface ButtonProps`
`107`	`107`	`href?: string;`
`108`	`108`	`to?: string;`
`109`	`109`	`as?: any;`
	`110`	`+ target?: any;`
`110`	`111`	`}`
`111`	`112`
`112`	`113`	`export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(`