feat: Structuring context & schema so it can be used on the client #17489

tgriesser · 2021-07-27T00:21:21Z

Create @packages/graphql to consolidate any GraphQL related state logic
Injects context independently on the client / server for better client-side testing
Introduces @vue/urql
Adds cy.mountFragment to test components w/ GraphQL fragments
Converts existing launchpad components to GraphQL

cypress-bot · 2021-07-27T00:21:22Z

Thanks for taking the time to open a PR!

Create a Draft Pull Request if your PR is not ready for review. Mark the PR as Ready for Review when you're ready for a Cypress team member to review the PR.
Become familiar with the Code Review Checklist for guidelines on coding standards and what needs to be done before a PR can be merged.

cypress · 2021-07-27T00:41:46Z

Test summary

18192 • 0 • 214 • 7 • 1

Run details


Project	cypress
Status	Passed
Commit	`1ef2465`
Started	Aug 2, 2021 12:21 PM
Ended	Aug 2, 2021 12:32 PM
Duration	11:10 💡
OS	Linux Debian - 10.8
Browser	Multiple

View run in Cypress Dashboard ➡️

Flakiness

	cypress/integration/commands/net_stubbing_spec.ts		1
1	network stubbing > intercepting request > can intercept utf-8 request bodies without crashing

This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Dashboard

lmiller1990 · 2021-07-28T01:28:12Z

Great, this looks like it goes with some of the work I've been doing over in #17460 (which is more focused on actually executing things, via GraphQL).

I will pull this down and go over it to fully grok it, and come at you with some questions.

lmiller1990 · 2021-07-28T01:31:09Z

packages/launchpad/package.json

@@ -13,7 +13,7 @@
    "dev": "NODE_ENV=development LAUNCHPAD=1 yarn start-test 5050 cypress:open",
    "postinstall": "yarn codegen && echo '@packages/launchpad needs: yarn build'",
    "start": "http-server -p 5050 dist",
-    "watch": "yarn build --watch",
+    "watch": "concurrently \"vite build --watch\" \"yarn codegen --watch\"",


Have been needing this, great

…/add-context

…/add-context * unified-desktop-gui: chore: fixing dev task for launchpad

tgriesser · 2021-08-02T01:24:55Z

packages/graphql/schema.graphql

+  wizardNavigateBack: Wizard
+
+  """Navigates forward in the wizard"""
+  wizardNavigateForward: Wizard


We can probably simplify this to wizardNavigate(direction: forward | backward)

Sure, let's get it merged and figure out the quality of life improvements - they'll be a lot easier to review in their own context. Not a blocker.

Done here: https://github.com/cypress-io/cypress/pull/17551/files

tgriesser · 2021-08-02T01:25:32Z

packages/graphql/schema.graphql

+  wizardSetManualInstall(isManual: Boolean!): Wizard
+
+  """Sets the current testing type we want to use"""
+  wizardSetTestingType(type: TestingTypeEnum!): Wizard


Can probably consolidate the above to wizardUpdate(input: WizardUpdate!)

lmiller1990

Can keep https://github.com/vuejs/jsx-next#syntax in mind if we want the react style early return on graphql loading pattern

lmiller1990 · 2021-08-02T02:43:33Z

packages/graphql/src/context/BaseContext.ts

@@ -0,0 +1,24 @@
+import type { BaseActions } from '../actions/BaseActions'
+import { App, Wizard } from '../entities'
+import type { Project } from '../entities/Project'


I understand that import type is used because at runtime no such export exists, for example in the use case of a ts file with no runtime exports (eg, no export function, export const or export default), but is there any real benefit in this case (since the Project` module does have some runtime exports)?

Happy to separate import and import type as a general rule - haven't looked, but assuming there is some way to lint or enforce this.

but is there any real benefit in this case (since the Project` module does have some runtime exports)?

Yeah, it avoids the require in the transpiled JS. In this case it's such a minor cost that it doesn't really matter, but you can think of circumstances where you'd want to e.g. import a type from @packages/server without worrying about the entire code being imported executed since it potentially have side-effects. The import type is also important if we want to be able to remove the nxs.gen file from git since there's a sort of chicken-and-egg problem of doing a runtime import of a file that doesn't yet exist. With import type you can sidestep that

but assuming there is some way to lint or enforce this.

Yep, this is enforced via the "importsNotUsedAsValues": "error" which I added to the graphql and launchpad projects. It'll be a type-error if you're only using as a type but you don't import type

lmiller1990 · 2021-08-02T02:43:56Z

packages/graphql/src/context/ContextUtils.ts

@@ -0,0 +1,3 @@
+export class ContextUtils {


Do we need this?

lmiller1990 · 2021-08-02T03:07:04Z

packages/launchpad/src/components/ButtonBar.vue

@@ -10,19 +10,18 @@
      rounded-b
    "
  >
-    <Button @click="nextFunction()">{{ next }}</Button>
-    <Button @click="backFunction()" variant="outline">{{ back }}</Button>
+    <Button @click="nextFn()">{{ next }}</Button>


click can take a callback so you can just do <Button @click="nextFn>", either way is fine.

As an aside, some general tips n tricks:

Another thing you may find useful is if you pass a function, it works the same as React - you can grab the args like

<Button @click="(arg1, arg2) => nextFn(arg2)" />

Additionally should you want the JS event, it's under $event

<Button @click="(arg1, arg2) => nextFn(arg2, $event)" />

lmiller1990 · 2021-08-02T03:08:56Z

packages/launchpad/src/components/ButtonBar.vue

    back: {
      type: String,
      required: true,
    },
+    backFn: {


I wonder if we want some helpers, like:

const RequiredFn = { type: Function, required: true } as const // ... props: { nextFn: RequiredFn }

Probably can make this improvement down the track.

Unfortunate thing is these are both runtime and compile time, so we cannot have a generic like Gql<T>. This is an unfortunate limitation of the object syntax.

Actually we should just do this: #17550

lmiller1990 · 2021-08-02T03:19:12Z

packages/launchpad/src/components/EnvironmentSetup.vue

-    const storeApp = useStoreApp();
-    const storeConfig = useStoreConfig()
-
-    const selectedFramework = ref<Framework | undefined>(undefined);


Love how much code is deleted here and moved to gql

Thin component is a good component

lmiller1990 · 2021-08-02T03:41:18Z

packages/launchpad/src/components/InstallDependencies.vue

-  setup() {
-    const store = useStoreApp();
-    const manualInstall = ref(false);
+  props: {


Here's some neat coming up. There is a new syntax called <script setup> https://github.com/vuejs/rfcs/blob/master/active-rfcs/0040-script-setup.md

It makes vue files more concise. One of the cool things is we get type only props declarations. A bit experimental but we can write:

import { declareProps } from 'vue' declareProps<{ gql: InstallDependenciesFragment }>

This also solves the slow IDE plugin part (at least inside of <script> - it is basically instant, like it should be).

Consider

#17550

lmiller1990 · 2021-08-02T04:26:57Z

packages/server/lib/project-base.ts

@@ -399,7 +396,8 @@ export class ProjectBase<TServer extends Server> extends EE {
    return this.initSpecStore({ specs, config: updatedConfig })
  }

-  async initializePlugins (cfg, options) {
+  // TODO(tim): Improve this when we completely overhaul the rest of the code here,


Yep we can nuke/rework most of this. The reason it's still the way it is, is I was trying to keep it back compatible with the current desktop-gui to make reviewing/merging more easy, but I guess we can just abandon that consider how big a change we are introducing.

* apply general improvemets from PR comments * remove unused file * comment out test for now * stub out missing story module

…ui/add-context-code-review * unified-desktop-gui: feat: Structuring context & schema so it can be used on the client (#17489) fix: vue 3 types, beta suffix & component name (#17508) fix: last test skipped with top navigation and already run suite (#17498) chore: Update Chrome (beta) to 93.0.4577.18 (#17536) fix: use process.geteuid and catch uid errors in file util (#17488) build: make vite build strict (#17509) release 8.1.0 fix(server): correctly include projectRoot when adding a CI project from GUI (#17514) fix(types): update cy.shadow docs url (#17506) chore(npm/webpack-preprocessor): fix CI pipeline (#17515) fix: test runner reporter performance (#17243) chore: release @cypress/vue-v3.0.0-beta.4 chore: release @cypress/vite-dev-server-v2.0.3 fix: make vite re-run on supportFile change (#17485)

wip: Structuring context & schema so it can be used on the client

323445a

tgriesser requested a review from a team as a code owner July 27, 2021 00:21

tgriesser requested review from jennifer-shehane and kuceb and removed request for a team July 27, 2021 00:21

tgriesser marked this pull request as draft July 27, 2021 00:21

tgriesser requested a review from lmiller1990 July 27, 2021 00:21

tgriesser changed the title ~~wip: Structuring context & schema so it can be used on the client~~ feat: Structuring context & schema so it can be used on the client Jul 27, 2021

lmiller1990 reviewed Jul 28, 2021

View reviewed changes

lmiller1990 and others added 18 commits July 28, 2021 14:31

chore: fix dev mode

b5e1cfa

Merge branch 'unified-desktop-gui' into tgriesser/unified-desktop-gui…

810abd8

…/add-context

Continuing to restructure graphql patterns

539d0ab

Cleaning up the server

3c305ac

Don't hash for now, for vite

846d5b5

fix for CI

8182dae

WIP on integrating with vue

09342c2

yarn lock

afbbc88

no need to return props from setup

01396ce

use useResult for more concise and better type safety

511db1a

fix regression

a563368

wip: migrate to apollo

4780c3e

Wip: mostly working with pollInterval

71dc6d5

apollo -> urql

f9f2a44

cleanup

38f4f3c

continuing to cleanup

67691be

fix: updates to tests, strict type checking

eafbc70

Tests passing

0fa52f1

tgriesser added 9 commits July 31, 2021 21:08

wip: attempting rename

04dab79

adding @packages/graphql

de8a707

simplified fragment testing

0f30b0e

Merge branch 'unified-desktop-gui' into tgriesser/unified-desktop-gui…

9076067

…/add-context * unified-desktop-gui: chore: fixing dev task for launchpad

fixing build scripts

06b19b8

remove --inspect-brk

e883ced

fix ci scripts

49b3060

fix build again

a2c0bd7

Fix tests

86d6ce5

tgriesser requested a review from lmiller1990 August 2, 2021 01:22

tgriesser commented Aug 2, 2021

View reviewed changes

tgriesser added 2 commits August 1, 2021 21:35

Add express as dep to @packages/graphql

24d9d3c

fix packages

c492f59

lmiller1990 reviewed Aug 2, 2021

View reviewed changes

lmiller1990 added 2 commits August 2, 2021 15:22

merge in unified-desktop-gui

38ae4cc

chore(launchpad): minor updates (#17551)

1ef2465

* apply general improvemets from PR comments * remove unused file * comment out test for now * stub out missing story module

lmiller1990 marked this pull request as ready for review August 2, 2021 12:54

lmiller1990 merged commit e2f395e into unified-desktop-gui Aug 2, 2021

tgriesser deleted the tgriesser/unified-desktop-gui/add-context branch August 2, 2021 12:58

tgriesser restored the tgriesser/unified-desktop-gui/add-context branch August 2, 2021 13:03

tgriesser deleted the tgriesser/unified-desktop-gui/add-context branch September 29, 2021 14:39

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Structuring context & schema so it can be used on the client #17489

feat: Structuring context & schema so it can be used on the client #17489

tgriesser commented Jul 27, 2021 •

edited

Loading

cypress-bot bot commented Jul 27, 2021

cypress bot commented Jul 27, 2021 •

edited

Loading

lmiller1990 commented Jul 28, 2021

lmiller1990 Jul 28, 2021

tgriesser Aug 2, 2021

lmiller1990 Aug 2, 2021 •

edited

Loading

lmiller1990 Aug 2, 2021

tgriesser Aug 2, 2021

lmiller1990 left a comment •

edited

Loading

lmiller1990 Aug 2, 2021

tgriesser Aug 2, 2021

lmiller1990 Aug 2, 2021

lmiller1990 Aug 2, 2021

lmiller1990 Aug 2, 2021

lmiller1990 Aug 2, 2021

lmiller1990 Aug 2, 2021

lmiller1990 Aug 2, 2021

lmiller1990 Aug 2, 2021

lmiller1990 Aug 2, 2021

feat: Structuring context & schema so it can be used on the client #17489

feat: Structuring context & schema so it can be used on the client #17489

Conversation

tgriesser commented Jul 27, 2021 • edited Loading

cypress-bot bot commented Jul 27, 2021

cypress bot commented Jul 27, 2021 • edited Loading

Test summary

Run details

Flakiness

lmiller1990 commented Jul 28, 2021

Choose a reason for hiding this comment

Choose a reason for hiding this comment

lmiller1990 Aug 2, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

lmiller1990 left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tgriesser commented Jul 27, 2021 •

edited

Loading

cypress bot commented Jul 27, 2021 •

edited

Loading

lmiller1990 Aug 2, 2021 •

edited

Loading

lmiller1990 left a comment •

edited

Loading