Skip to content

Commit aed183f

Browse files
alexnmalexnm
authored
feat(create-ws): new step for use cases (#8421)
* feat(create-ws): new step for use cases * feat: integration gql mutation * lint
1 parent 01388fd commit aed183f

File tree

8 files changed

+215
-2
lines changed

8 files changed

+215
-2
lines changed

‎packages/app/src/app/components/WorkspaceSetup/WorkspaceSetup.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { SelectWorkspace } from './steps/SelectWorkspace';
88
import { Addons } from './steps/Addons';
99
import { Finalize } from './steps/Finalize';
1010
import { ChangeAddons } from './steps/ChangeAddons';
11+
import { SelectUsecases } from './steps/SelectUsecases';
1112

1213
export type WorkspaceSetupProps = {
1314
flow: WorkspaceFlow;
@@ -59,6 +60,7 @@ export const WorkspaceSetup: React.FC<WorkspaceSetupProps> = ({
5960
const STEP_COMPONENTS: Record<WorkspaceSetupStep, React.FC<StepProps>> = {
6061
create: Create,
6162
'select-workspace': SelectWorkspace,
63+
usecases: SelectUsecases,
6264
plans: Plans,
6365
'spending-limit': SpendingLimit,
6466
addons: Addons,

‎packages/app/src/app/components/WorkspaceSetup/steps/Create.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -165,6 +165,7 @@ export const Create: React.FC<StepProps> = ({
165165
disabled={disableButton || loading || !!error}
166166
type="submit"
167167
size="large"
168+
autoWidth
168169
>
169170
Next
170171
</Button>

‎packages/app/src/app/components/WorkspaceSetup/steps/SelectUsecases.tsx‎

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
import React, { useState } from 'react';
2+
import { Button, Element, Stack, Text } from '@codesandbox/components';
3+
import { useAppState, useEffects } from 'app/overmind';
4+
import styled from 'styled-components';
5+
import { StepHeader } from '../StepHeader';
6+
import { AnimatedStep } from '../elements';
7+
import { StepProps } from '../types';
8+
9+
const USE_CASES = [
10+
'Conduct interviews',
11+
'Build design systems',
12+
'Teach',
13+
'Work on repositories',
14+
'Make prototypes',
15+
'Conduct QA',
16+
'Live collaboration',
17+
'Showcase work',
18+
'Code with AI',
19+
];
20+
21+
export const SelectUsecases: React.FC<StepProps> = ({
22+
onNextStep,
23+
onPrevStep,
24+
onDismiss,
25+
currentStep,
26+
numberOfSteps,
27+
}) => {
28+
const { activeTeam } = useAppState();
29+
const effects = useEffects();
30+
const [usecases, setUsecases] = useState<Record<string, boolean>>(
31+
USE_CASES.reduce((res, usecase) => {
32+
res[usecase] = false;
33+
return res;
34+
}, {})
35+
);
36+
37+
const handleSubmit = async e => {
38+
e.preventDefault();
39+
const selectedUseCases = Object.keys(usecases).filter(k => usecases[k]);
40+
if (selectedUseCases.length > 0) {
41+
effects.gql.mutations.setTeamMetadata({
42+
teamId: activeTeam,
43+
useCases: selectedUseCases,
44+
});
45+
}
46+
onNextStep();
47+
};
48+
49+
return (
50+
<AnimatedStep>
51+
<Stack direction="vertical" gap={6}>
52+
<StepHeader
53+
onPrevStep={onPrevStep}
54+
onDismiss={onDismiss}
55+
currentStep={currentStep}
56+
numberOfSteps={numberOfSteps}
57+
title="How would you like to use CodeSandox?"
58+
/>
59+
<Stack
60+
as="form"
61+
onSubmit={handleSubmit}
62+
direction="vertical"
63+
gap={6}
64+
css={{ width: '100%' }}
65+
align="flex-start"
66+
>
67+
<Text color="#e5e5e5">
68+
Select all that apply. We will customize your dashboard experience
69+
based on this.
70+
</Text>
71+
<Element
72+
css={{
73+
display: 'grid',
74+
gridTemplateColumns: '1fr 1fr 1fr',
75+
gap: '16px',
76+
}}
77+
>
78+
{USE_CASES.map(useCase => (
79+
<ToggleButton
80+
key={useCase}
81+
type="button"
82+
variant="secondary"
83+
data-selected={usecases[useCase]}
84+
onClick={() =>
85+
setUsecases({ ...usecases, [useCase]: !usecases[useCase] })
86+
}
87+
>
88+
{useCase}
89+
</ToggleButton>
90+
))}
91+
</Element>
92+
<Button type="submit" size="large" autoWidth>
93+
Next
94+
</Button>
95+
</Stack>
96+
</Stack>
97+
</AnimatedStep>
98+
);
99+
};
100+
101+
const ToggleButton = styled(Button)`
102+
width: 220px;
103+
height: 80px;
104+
border-radius: 16px;
105+
font-size: 16px;
106+
107+
&[data-selected='true'] {
108+
background-color: #644ed7;
109+
color: #fff;
110+
111+
&:focus {
112+
background-color: #644ed7;
113+
}
114+
115+
&:hover {
116+
background-color: #644ed7;
117+
}
118+
}
119+
`;

‎packages/app/src/app/components/WorkspaceSetup/types.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
export type WorkspaceSetupStep =
22
| 'create'
33
| 'select-workspace'
4+
| 'usecases'
45
| 'plans'
56
| 'addons'
67
| 'change-addons-confirmation'

‎packages/app/src/app/graphql/types.ts‎

Lines changed: 66 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -516,7 +516,11 @@ export type TeamLimits = {
516516
includedDrafts: Scalars['Int'];
517517
/** Number of workspace members included with the team's subscription, including add-ons */
518518
includedMembers: Scalars['Int'];
519-
/** Number of sandboxes included with the team's subscription, including add-ons */
519+
/** Number of included private browser sandboxes with the team's subscription */
520+
includedPrivateSandboxes: Scalars['Int'];
521+
/** Number of included public browser sandboxes with the team's subscription */
522+
includedPublicSandboxes: Scalars['Int'];
523+
/** DEPRECATED: Number of sandboxes included with the team's subscription */
520524
includedSandboxes: Scalars['Int'];
521525
/** Storage (in GB) included with the team's subscription, including add-ons */
522526
includedStorage: Scalars['Int'];
@@ -2193,12 +2197,14 @@ export type RootMutationTypeAddSandboxesToAlbumArgs = {
21932197

21942198
export type RootMutationTypeAddToCollectionArgs = {
21952199
collectionPath: Scalars['String'];
2200+
privacy: InputMaybe<Scalars['Int']>;
21962201
sandboxIds: InputMaybe<Array<InputMaybe<Scalars['ID']>>>;
21972202
teamId: InputMaybe<Scalars['UUID4']>;
21982203
};
21992204

22002205
export type RootMutationTypeAddToCollectionOrTeamArgs = {
22012206
collectionPath: InputMaybe<Scalars['String']>;
2207+
privacy: InputMaybe<Scalars['Int']>;
22022208
sandboxIds: InputMaybe<Array<InputMaybe<Scalars['ID']>>>;
22032209
teamId: InputMaybe<Scalars['UUID4']>;
22042210
};
@@ -4834,6 +4840,7 @@ export type CurrentTeamInfoFragmentFragment = {
48344840
ubbBeta: boolean;
48354841
friendOfCsb: boolean;
48364842
};
4843+
metadata: { __typename?: 'TeamMetadata'; useCases: Array<string> };
48374844
};
48384845

48394846
export type BranchFragment = {
@@ -5645,6 +5652,63 @@ export type UpdateProjectVmTierMutation = {
56455652
};
56465653
};
56475654

5655+
export type SetTeamMetadataMutationVariables = Exact<{
5656+
teamId: Scalars['UUID4'];
5657+
useCases: Array<Scalars['String']> | Scalars['String'];
5658+
}>;
5659+
5660+
export type SetTeamMetadataMutation = {
5661+
__typename?: 'RootMutationType';
5662+
setTeamMetadata: {
5663+
__typename?: 'Team';
5664+
id: any;
5665+
name: string;
5666+
type: TeamType;
5667+
description: string | null;
5668+
creatorId: any | null;
5669+
avatarUrl: string | null;
5670+
legacy: boolean;
5671+
frozen: boolean;
5672+
insertedAt: string;
5673+
settings: {
5674+
__typename?: 'WorkspaceSandboxSettings';
5675+
minimumPrivacy: number;
5676+
} | null;
5677+
userAuthorizations: Array<{
5678+
__typename?: 'UserAuthorization';
5679+
userId: any;
5680+
authorization: TeamMemberAuthorization;
5681+
teamManager: boolean;
5682+
}>;
5683+
users: Array<{
5684+
__typename?: 'User';
5685+
id: any;
5686+
name: string | null;
5687+
username: string;
5688+
avatarUrl: string;
5689+
}>;
5690+
invitees: Array<{
5691+
__typename?: 'User';
5692+
id: any;
5693+
name: string | null;
5694+
username: string;
5695+
avatarUrl: string;
5696+
}>;
5697+
subscription: {
5698+
__typename?: 'ProSubscription';
5699+
origin: SubscriptionOrigin | null;
5700+
type: SubscriptionType;
5701+
status: SubscriptionStatus;
5702+
paymentProvider: SubscriptionPaymentProvider | null;
5703+
} | null;
5704+
featureFlags: {
5705+
__typename?: 'TeamFeatureFlags';
5706+
ubbBeta: boolean;
5707+
friendOfCsb: boolean;
5708+
};
5709+
};
5710+
};
5711+
56485712
export type JoinEligibleWorkspaceMutationVariables = Exact<{
56495713
workspaceId: Scalars['ID'];
56505714
}>;
@@ -6356,6 +6420,7 @@ export type GetTeamQuery = {
63566420
ubbBeta: boolean;
63576421
friendOfCsb: boolean;
63586422
};
6423+
metadata: { __typename?: 'TeamMetadata'; useCases: Array<string> };
63596424
} | null;
63606425
} | null;
63616426
};

‎packages/app/src/app/overmind/effects/gql/dashboard/fragments.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -268,6 +268,10 @@ export const currentTeamInfoFragment = gql`
268268
ubbBeta
269269
friendOfCsb
270270
}
271+
272+
metadata {
273+
useCases
274+
}
271275
}
272276
`;
273277

‎packages/app/src/app/overmind/effects/gql/dashboard/mutations.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,8 @@ import {
6161
UpdateProjectVmTierMutation,
6262
UpdateUsageSubscriptionMutationVariables,
6363
UpdateUsageSubscriptionMutation,
64+
SetTeamMetadataMutation,
65+
SetTeamMetadataMutationVariables,
6466
JoinEligibleWorkspaceMutation,
6567
JoinEligibleWorkspaceMutationVariables,
6668
} from 'app/graphql/types';
@@ -479,6 +481,18 @@ export const updateProjectVmTier: Query<
479481
}
480482
`;
481483

484+
export const setTeamMetadata: Query<
485+
SetTeamMetadataMutation,
486+
SetTeamMetadataMutationVariables
487+
> = gql`
488+
mutation SetTeamMetadata($teamId: UUID4!, $useCases: [String!]!) {
489+
setTeamMetadata(teamId: $teamId, metadata: { useCases: $useCases }) {
490+
...teamFragmentDashboard
491+
}
492+
}
493+
${teamFragmentDashboard}
494+
`;
495+
482496
export const joinEligibleWorkspace: Query<
483497
JoinEligibleWorkspaceMutation,
484498
JoinEligibleWorkspaceMutationVariables

‎packages/app/src/app/pages/WorkspaceFlows/CreateWorkspace.tsx‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,14 @@ export const CreateWorkspace = () => {
2424

2525
return (
2626
<WorkspaceSetup
27-
steps={['create', 'plans', 'addons', 'spending-limit', 'finalize']}
27+
steps={[
28+
'create',
29+
'usecases',
30+
'plans',
31+
'addons',
32+
'spending-limit',
33+
'finalize',
34+
]}
2835
flow="create-workspace"
2936
onComplete={() => {
3037
clearFreshWorkspaceId();

0 commit comments

Comments
 (0)