chore: make mobx decoratorless (#31459)

Co-authored-by: Jennifer Shehane <[email protected]>

Author: AtofStryker

.circleci/workflows.yml

@@ -38,7 +38,7 @@ mainBuildFilters: &mainBuildFilters
         - /^release\/\d+\.\d+\.\d+$/
         # use the following branch as well to ensure that v8 snapshot cache updates are fully tested
         - 'update-v8-snapshot-cache-on-develop'
-        - 'chore/fix_react_18_deprecation_warnings'
+        - 'chore/update_mobx_decoratorless'
 
 # usually we don't build Mac app - it takes a long time
 # but sometimes we want to really confirm we are doing the right thing
@@ -49,7 +49,7 @@ macWorkflowFilters: &darwin-workflow-filters
       - equal: [ develop, << pipeline.git.branch >> ]
       # use the following branch as well to ensure that v8 snapshot cache updates are fully tested
       - equal: [ 'update-v8-snapshot-cache-on-develop', << pipeline.git.branch >> ]
-      - equal: [ 'chore/fix_react_18_deprecation_warnings', << pipeline.git.branch >> ]
+      - equal: [ 'chore/update_mobx_decoratorless', << pipeline.git.branch >> ]
       - matches:
           pattern: /^release\/\d+\.\d+\.\d+$/
           value: << pipeline.git.branch >>
@@ -60,7 +60,7 @@ linuxArm64WorkflowFilters: &linux-arm64-workflow-filters
       - equal: [ develop, << pipeline.git.branch >> ]
       # use the following branch as well to ensure that v8 snapshot cache updates are fully tested
       - equal: [ 'update-v8-snapshot-cache-on-develop', << pipeline.git.branch >> ]
-      - equal: [ 'chore/fix_react_18_deprecation_warnings', << pipeline.git.branch >> ]
+      - equal: [ 'chore/update_mobx_decoratorless', << pipeline.git.branch >> ]
       - matches:
           pattern: /^release\/\d+\.\d+\.\d+$/
           value: << pipeline.git.branch >>
@@ -83,8 +83,7 @@ windowsWorkflowFilters: &windows-workflow-filters
       - equal: [ develop, << pipeline.git.branch >> ]
       # use the following branch as well to ensure that v8 snapshot cache updates are fully tested
       - equal: [ 'update-v8-snapshot-cache-on-develop', << pipeline.git.branch >> ]
-      - equal: [ 'chore/fix_react_18_deprecation_warnings', << pipeline.git.branch >> ]
-      - equal: [ 'cacie/fix-du', << pipeline.git.branch >> ]
+      - equal: [ 'chore/update_mobx_decoratorless', << pipeline.git.branch >> ]
       - matches:
           pattern: /^release\/\d+\.\d+\.\d+$/
           value: << pipeline.git.branch >>
@@ -158,7 +157,7 @@ commands:
           name: Set environment variable to determine whether or not to persist artifacts
           command: |
             echo "Setting SHOULD_PERSIST_ARTIFACTS variable"
-            echo 'if ! [[ "$CIRCLE_BRANCH" != "develop" && "$CIRCLE_BRANCH" != "release/"* && "$CIRCLE_BRANCH" != "chore/fix_react_18_deprecation_warnings" ]]; then
+            echo 'if ! [[ "$CIRCLE_BRANCH" != "develop" && "$CIRCLE_BRANCH" != "release/"* && "$CIRCLE_BRANCH" != "chore/update_mobx_decoratorless" ]]; then
                 export SHOULD_PERSIST_ARTIFACTS=true
             fi' >> "$BASH_ENV"
   # You must run `setup_should_persist_artifacts` command and be using bash before running this command

packages/app/src/store/mobx-runner-store.ts

@@ -15,31 +15,47 @@ const defaults = {
 } as const
 
 export class MobxRunnerStore {
-  @observable spec?: Cypress.Spec
-  @observable specs: Cypress.Spec[] = []
-  @observable specRunId?: string
-  @observable isLoading = true
-  @observable width: number
-  @observable height: number
-  @observable automation?: AutomationStatus
-  @observable canSaveStudioLogs = false
+  spec?: Cypress.Spec
+  specs: Cypress.Spec[] = []
+  specRunId?: string
+  isLoading = true
+  width: number
+  height: number
+  automation?: AutomationStatus
+  canSaveStudioLogs = false
 
   constructor (testingType: Cypress.TestingType) {
-    makeObservable(this)
+    makeObservable(this, {
+      spec: observable,
+      specs: observable,
+      specRunId: observable,
+      isLoading: observable,
+      width: observable,
+      height: observable,
+      automation: observable,
+      canSaveStudioLogs: observable,
+      setCanSaveStudioLogs: action,
+      setSpec: action,
+      checkCurrentSpecStillExists: action,
+      setSpecs: action,
+      setIsLoading: action,
+      updateDimensions: action,
+    })
+
     this.width = defaults[testingType].width
     this.height = defaults[testingType].height
   }
 
-  @action setCanSaveStudioLogs (canSave: boolean) {
+  setCanSaveStudioLogs (canSave: boolean) {
     this.canSaveStudioLogs = canSave
   }
 
-  @action setSpec (spec: Cypress.Spec | undefined) {
+  setSpec (spec: Cypress.Spec | undefined) {
     this.spec = spec
     this.specRunId = nanoid()
   }
 
-  @action checkCurrentSpecStillExists (specs: Cypress.Spec[]) {
+  checkCurrentSpecStillExists (specs: Cypress.Spec[]) {
     const newSpecsAbsolutes = new Set(specs.map((spec) => spec.absolute))
 
     this.specs.forEach((oldSpec) => {
@@ -49,16 +65,16 @@ export class MobxRunnerStore {
     })
   }
 
-  @action setSpecs (specs: Cypress.Spec[]) {
+  setSpecs (specs: Cypress.Spec[]) {
     this.checkCurrentSpecStillExists(specs)
     this.specs = specs
   }
 
-  @action setIsLoading (isLoading: boolean) {
+  setIsLoading (isLoading: boolean) {
     this.isLoading = isLoading
   }
 
-  @action updateDimensions (width: number, height: number) {
+  updateDimensions (width: number, height: number) {
     this.height = height
     this.width = width
   }

packages/app/tsconfig.json

@@ -12,8 +12,9 @@
     "../frontend-shared/cypress/**/*.ts"
   ],
   "compilerOptions": {
-    "noImplicitThis": true,
+    // needed for mobx
     "useDefineForClassFields": true,
+    "noImplicitThis": true,
     "paths": {
       "@cy/i18n": ["../frontend-shared/src/locales/i18n"],
       "@cy/components/*": ["../frontend-shared/src/components/*"],

packages/reporter/src/agents/agent-model.ts

@@ -7,13 +7,16 @@ export interface AgentProps extends InstrumentProps {
 }
 
 export default class Agent extends Instrument {
-  @observable callCount: number = 0
-  @observable functionName: string
+  callCount: number = 0
+  functionName: string
 
   constructor (props: AgentProps) {
     super(props)
 
-    makeObservable(this)
+    makeObservable(this, {
+      callCount: observable,
+      functionName: observable,
+    })
 
     this.callCount = props.callCount
     this.functionName = props.functionName

packages/reporter/src/attempts/attempt-model.ts

@@ -14,40 +14,68 @@ import type Log from '../instruments/instrument-model'
 import Session, { SessionProps } from '../sessions/sessions-model'
 
 export default class Attempt {
-  @observable agents: Agent[] = []
-  @observable sessions: Record<string, Session> = {}
-  @observable commands: Command[] = []
-  @observable err?: Err = undefined
-  @observable hooks: Hook[] = []
+  agents: Agent[] = []
+  sessions: Record<string, Session> = {}
+  commands: Command[] = []
+  err?: Err = undefined
+  hooks: Hook[] = []
   // TODO: make this an enum with states: 'QUEUED, ACTIVE, INACTIVE'
-  @observable isActive: boolean | null = null
-  @observable routes: Route[] = []
-  @observable _state?: TestState | null = null
-  @observable _testOuterStatus?: TestState = undefined
-  @observable _invocationCount: number = 0
-  @observable invocationDetails?: FileDetails
+  isActive: boolean | null = null
+  routes: Route[] = []
+  _state?: TestState | null = null
+  _testOuterStatus?: TestState = undefined
+  _invocationCount: number = 0
+  invocationDetails?: FileDetails
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  @observable hookCount: { [name in HookName]: number } = {
+  hookCount: { [name in HookName]: number } = {
     'before all': 0,
     'before each': 0,
     'after all': 0,
     'after each': 0,
     'test body': 0,
     'studio commands': 0,
   }
-  @observable _isOpen: boolean|null = null
+  _isOpen: boolean|null = null
 
-  @observable isOpenWhenLast: boolean | null = null
+  isOpenWhenLast: boolean | null = null
   _callbackAfterUpdate: Function | null = null
   testId: string
 
-  @observable id: number
+  id: number
   test: Test
 
   _logs: {[key: string]: Log} = {}
 
   constructor (props: TestProps, test: Test) {
-    makeObservable(this)
+    makeObservable(this, {
+      agents: observable,
+      sessions: observable,
+      commands: observable,
+      err: observable,
+      hooks: observable,
+      isActive: observable,
+      routes: observable,
+      _state: observable,
+      _testOuterStatus: observable,
+      _invocationCount: observable,
+      invocationDetails: observable,
+      hookCount: observable,
+      _isOpen: observable,
+      isOpenWhenLast: observable,
+      id: observable,
+      hasCommands: computed,
+      isLongRunning: computed,
+      _hasLongRunningCommand: computed,
+      state: computed,
+      error: computed,
+      isLast: computed,
+      isOpen: computed,
+      start: action,
+      update: action,
+      setIsOpen: action,
+      finish: action,
+    })
+
     this.testId = props.id
     this.id = props.currentRetry || 0
     this.test = test
@@ -66,25 +94,25 @@ export default class Attempt {
     _.each(props.routes, this.addLog)
   }
 
-  @computed get hasCommands () {
+  get hasCommands () {
     return !!this.commands.length
   }
 
-  @computed get isLongRunning () {
+  get isLongRunning () {
     return this.isActive && this._hasLongRunningCommand
   }
 
-  @computed get _hasLongRunningCommand () {
+  get _hasLongRunningCommand () {
     return _.some(this.commands, (command) => {
       return command.isLongRunning
     })
   }
 
-  @computed get state () {
+  get state () {
     return this._state || (this.isActive ? 'active' : 'processing')
   }
 
-  @computed get error () {
+  get error () {
     const command = this.err?.isCommandErr ? this.commandMatchingErr() : undefined
 
     return {
@@ -94,11 +122,11 @@ export default class Attempt {
     }
   }
 
-  @computed get isLast () {
+  get isLast () {
     return this.id === this.test.lastAttempt.id
   }
 
-  @computed get isOpen () {
+  get isOpen () {
     if (this._isOpen !== null) {
       return this._isOpen
     }
@@ -166,11 +194,11 @@ export default class Attempt {
     .last()
   }
 
-  @action start () {
+  start () {
     this.isActive = true
   }
 
-  @action update (props: UpdatableTestProps) {
+  update (props: UpdatableTestProps) {
     if (props.state) {
       this._state = props.state
     }
@@ -200,11 +228,11 @@ export default class Attempt {
     }
   }
 
-  @action setIsOpen (isOpen: boolean) {
+  setIsOpen (isOpen: boolean) {
     this._isOpen = isOpen
   }
 
-  @action finish (props: UpdatableTestProps, isInteractive: boolean) {
+  finish (props: UpdatableTestProps, isInteractive: boolean) {
     this.update(props)
     this.isActive = false