chore: delete ui-components package (#23950)

* chore: delete ui-components package

* add dependency to frontend-shared that was previously provided by ui-components

* whoops

* fix deps

Author: emilyrohrbough

.circleci/config.yml

@@ -1732,26 +1732,6 @@ jobs:
           path: /tmp/artifacts
       - store-npm-logs
 
-  ui-components-integration-tests:
-    <<: *defaults
-    steps:
-      - restore_cached_workspace
-      - run:
-          command: yarn build-for-tests
-          working_directory: packages/ui-components
-      - run:
-          command: |
-            CYPRESS_KONFIG_ENV=production \
-            CYPRESS_RECORD_KEY=$MAIN_RECORD_KEY \
-            yarn cypress:run --record --parallel --group ui-components
-          working_directory: packages/ui-components
-      - verify-mocha-results
-      - store_test_results:
-          path: /tmp/cypress
-      - store_artifacts:
-          path: /tmp/artifacts
-      - store-npm-logs
-
   npm-webpack-preprocessor:
     <<: *defaults
     steps:
@@ -2502,10 +2482,6 @@ linux-x64-workflow: &linux-x64-workflow
         context: [test-runner:cypress-record-key, test-runner:percy]
         requires:
           - build
-    - ui-components-integration-tests:
-        context: test-runner:cypress-record-key
-        requires:
-          - build
     - npm-webpack-dev-server:
         requires:
           - system-tests-node-modules-install
@@ -2577,7 +2553,6 @@ linux-x64-workflow: &linux-x64-workflow
           - server-integration-tests
           - server-unit-tests
           - test-kitchensink
-          - ui-components-integration-tests
           - unit-tests
           - unit-tests-release
           - cli-visual-tests

npm/vite-dev-server/cypress/support/e2e.ts

@@ -14,5 +14,5 @@
 // ***********************************************************
 
 // Import commands.js using ES2015 syntax:
-import '@packages/frontend-shared/cypress/e2e/support/e2eSupport'
+import '@packages/frontend-shared/cypress/support/e2e'
 import './commands'

npm/webpack-dev-server/cypress/support/e2e.ts

@@ -14,5 +14,5 @@
 // ***********************************************************
 
 // Import commands.js using ES2015 syntax:
-import '@packages/frontend-shared/cypress/e2e/support/e2eSupport'
+import '@packages/frontend-shared/cypress/support/e2e'
 import './commands'

package.json

@@ -59,7 +59,7 @@
     "test-scripts": "mocha -r packages/ts/register --reporter spec 'scripts/unit/**/*spec.js'",
     "test-scripts-watch": "yarn test-scripts --watch --watch-extensions 'ts,js'",
     "pretest-unit": "yarn ensure-deps",
-    "test-unit": "lerna exec yarn test-unit --ignore \"'{@packages/{driver,root,static,web-config,net-stubbing,rewriter,ui-components},@cypress/{webpack-dev-server,eslint-plugin-dev}}'\"",
+    "test-unit": "lerna exec yarn test-unit --ignore \"'{@packages/{driver,root,static,web-config,net-stubbing,rewriter},@cypress/{webpack-dev-server,eslint-plugin-dev}}'\"",
     "pretest-watch": "yarn ensure-deps",
     "test-watch": "lerna exec yarn test-watch --ignore \"'@packages/{driver,root,static,web-config}'\"",
     "type-check": "yarn lerna exec yarn type-check --scope @tooling/system-tests && node scripts/type_check",
@@ -90,7 +90,6 @@
     "@octokit/auth-app": "3.6.1",
     "@octokit/core": "3.6.0",
     "@percy/cli": "1.2.0",
-    "@percy/cypress": "^3.1.1",
     "@semantic-release/changelog": "5.0.1",
     "@semantic-release/git": "9.0.0",
     "@types/bluebird": "3.5.29",

packages/app/cypress.config.ts

@@ -30,7 +30,7 @@ export default defineConfig({
             'just-my-luck',
             'combine-properties',
             'faker',
-            '@packages/ui-components/cypress/support/customPercyCommand',
+            '@packages/frontend-shared/cypress/support/customPercyCommand',
           ],
         },
       },

packages/app/cypress/component/support/index.ts

@@ -27,7 +27,7 @@ import { setActivePinia } from 'pinia'
 import type { Pinia } from 'pinia'
 import 'cypress-real-events/support'
 
-import { installCustomPercyCommand } from '@packages/ui-components/cypress/support/customPercyCommand'
+import { installCustomPercyCommand } from '@packages/frontend-shared/cypress/support/customPercyCommand'
 
 let pinia: Pinia
 

packages/app/cypress/e2e/support/e2eSupport.ts

@@ -1,4 +1,4 @@
-import '@packages/frontend-shared/cypress/e2e/support/e2eSupport'
+import '@packages/frontend-shared/cypress/support/e2e'
 import 'cypress-real-events/support'
 import './execute-spec'
 

packages/frontend-shared/cypress.config.ts

@@ -20,14 +20,13 @@ export default defineConfig({
       viteConfig: {
         optimizeDeps: {
           include: [
-            '@packages/ui-components/cypress/support/customPercyCommand',
+            'cypress/support/customPercyCommand',
           ],
         },
       },
     },
   },
   e2e: {
     baseUrl: 'http://localhost:5555',
-    supportFile: 'cypress/e2e/support/e2eSupport.ts',
   },
 })

packages/frontend-shared/cypress/e2e/e2ePluginSetup.ts

@@ -1,7 +1,7 @@
 import path from 'path'
 import execa from 'execa'
 
-import type { CyTaskResult, OpenGlobalModeOptions, RemoteGraphQLInterceptor, ResetOptionsResult, WithCtxInjected, WithCtxOptions } from './support/e2eSupport'
+import type { CyTaskResult, OpenGlobalModeOptions, RemoteGraphQLInterceptor, ResetOptionsResult, WithCtxInjected, WithCtxOptions } from '../support/e2e'
 import { fixtureDirs } from '@tooling/system-tests'
 // import type { CloudExecuteRemote } from '@packages/data-context/src/sources'
 import { makeGraphQLServer } from '@packages/graphql/src/makeGraphQLServer'

packages/frontend-shared/cypress/fixtures/config.json

@@ -213,7 +213,7 @@
     "field": "scrollBehavior"
   },
   {
-    "value": "cypress/e2e/support/e2eSupport.ts",
+    "value": "cypress/support/e2e.ts",
     "from": "config",
     "field": "supportFile"
   },
@@ -290,7 +290,7 @@
               "just-my-luck",
               "combine-properties",
               "faker",
-              "@packages/ui-components/cypress/support/customPercyCommand"
+              "cypress/support/customPercyCommand"
             ]
           }
         }

packages/frontend-shared/cypress/support/component.ts

@@ -3,7 +3,7 @@ import { registerMountFn, addVueCommand } from './common'
 import '../../src/styles/shared.scss'
 import 'virtual:windi.css'
 import 'cypress-real-events/support'
-import { installCustomPercyCommand } from '@packages/ui-components/cypress/support/customPercyCommand'
+import { installCustomPercyCommand } from './customPercyCommand'
 import { addNetworkCommands } from './onlineNetwork'
 import { GQLStubRegistry } from './mock-graphql/stubgql-Registry'
 

packages/ui-components/cypress/support/customPercyCommand.ts renamed to packages/frontend-shared/cypress/support/customPercyCommand.ts

@@ -1,22 +1,23 @@
 import '@testing-library/cypress/add-commands'
 import { browsers } from '@packages/launcher/lib/browsers'
-import { installCustomPercyCommand } from '@packages/ui-components/cypress/support/customPercyCommand'
 import { configure } from '@testing-library/cypress'
-import i18n from '../../../src/locales/en-US.json'
-import { addNetworkCommands } from '../../support/onlineNetwork'
 import { fixtureDirs, ProjectFixtureDir } from '@tooling/system-tests'
-
 import type { DataContext } from '@packages/data-context'
 import type { AuthenticatedUserShape } from '@packages/data-context/src/data'
 import type { DocumentNode, ExecutionResult } from 'graphql'
 import type { Browser, FoundBrowser, OpenModeOptions } from '@packages/types'
-import type { E2ETaskMap } from '../e2ePluginSetup'
+
 import type { SinonStub } from 'sinon'
 import type sinon from 'sinon'
 import type pDefer from 'p-defer'
 import 'cypress-plugin-tab'
 import type { Response } from 'cross-fetch'
 
+import type { E2ETaskMap } from '../e2e/e2ePluginSetup'
+import { installCustomPercyCommand } from './customPercyCommand'
+import i18n from '../../src/locales/en-US.json'
+import { addNetworkCommands } from './onlineNetwork'
+
 configure({ testIdAttribute: 'data-cy' })
 
 const NO_TIMEOUT = 1000 * 1000

packages/frontend-shared/cypress/e2e/support/e2eSupport.ts renamed to packages/frontend-shared/cypress/support/e2e.ts

@@ -25,6 +25,7 @@
     "@iconify/json": "1.1.368",
     "@iconify/vue": "3.0.0-beta.1",
     "@intlify/vite-plugin-vue-i18n": "2.4.0",
+    "@percy/core": "^1.0.0-beta.48",
     "@percy/cypress": "^3.1.0",
     "@testing-library/cypress": "8.0.0",
     "@toycode/markdown-it-class": "1.2.3",
@@ -40,6 +41,7 @@
     "@vue/compiler-sfc": "3.2.31",
     "@vueuse/core": "7.2.2",
     "axe-core": "4.4.1",
+    "browser-logos": "github:alrra/browser-logos",
     "combine-properties": "0.1.0",
     "cross-env": "6.0.3",
     "cypress-axe": "0.14.0",

packages/frontend-shared/package.json

@@ -1,16 +1,16 @@
-import chromeIcon from '../../../../node_modules/browser-logos/src/chrome/chrome.svg?url'
-import firefoxIcon from '../../../../node_modules/browser-logos/src/firefox/firefox.svg?url'
-import edgeIcon from '../../../../node_modules/browser-logos/src/edge/edge.svg?url'
-import electronIcon from '../../../../node_modules/browser-logos/src/electron/electron.svg?url'
-import canaryIcon from '../../../../node_modules/browser-logos/src/chrome-canary/chrome-canary.svg?url'
-import chromeBetaIcon from '../../../../node_modules/browser-logos/src/chrome-beta/chrome-beta.svg?url'
-import chromiumIcon from '../../../../node_modules/browser-logos/src/chromium/chromium.svg?url'
-import edgeBetaIcon from '../../../../node_modules/browser-logos/src/edge-beta/edge-beta.png'
-import edgeCanaryIcon from '../../../../node_modules/browser-logos/src/edge-canary/edge-canary.png'
-import edgeDevIcon from '../../../../node_modules/browser-logos/src/edge-dev/edge-dev.png'
-import firefoxNightlyIcon from '../../../../node_modules/browser-logos/src/firefox-nightly/firefox-nightly.svg?url'
-import firefoxDeveloperEditionIcon from '../../../../node_modules/browser-logos/src/firefox-developer-edition/firefox-developer-edition.svg?url'
-import webKitIcon from '../../../../node_modules/browser-logos/src/webkit/webkit.svg?url'
+import chromeIcon from 'browser-logos/src/chrome/chrome.svg?url'
+import firefoxIcon from 'browser-logos/src/firefox/firefox.svg?url'
+import edgeIcon from 'browser-logos/src/edge/edge.svg?url'
+import electronIcon from 'browser-logos/src/electron/electron.svg?url'
+import canaryIcon from 'browser-logos/src/chrome-canary/chrome-canary.svg?url'
+import chromeBetaIcon from 'browser-logos/src/chrome-beta/chrome-beta.svg?url'
+import chromiumIcon from 'browser-logos/src/chromium/chromium.svg?url'
+import edgeBetaIcon from 'browser-logos/src/edge-beta/edge-beta.png'
+import edgeCanaryIcon from 'browser-logos/src/edge-canary/edge-canary.png'
+import edgeDevIcon from 'browser-logos/src/edge-dev/edge-dev.png'
+import firefoxNightlyIcon from 'browser-logos/src/firefox-nightly/firefox-nightly.svg?url'
+import firefoxDeveloperEditionIcon from 'browser-logos/src/firefox-developer-edition/firefox-developer-edition.svg?url'
+import webKitIcon from 'browser-logos/src/webkit/webkit.svg?url'
 import genericBrowserLogo from '@packages/frontend-shared/src/assets/logos/generic-browser.svg?url'
 
 export const allBrowsersIcons = {

packages/frontend-shared/src/assets/browserLogos.ts

@@ -24,7 +24,7 @@ export default defineConfig({
       viteConfig: {
         optimizeDeps: {
           include: [
-            '@packages/ui-components/cypress/support/customPercyCommand',
+            '@packages/frontend-shared/cypress/support/customPercyCommand',
           ],
         },
       },

packages/launchpad/cypress.config.ts

@@ -24,7 +24,7 @@ import 'cypress-real-events/support'
 
 import './commands'
 import './attachFileWithPath'
-import { installCustomPercyCommand } from '@packages/ui-components/cypress/support/customPercyCommand'
+import { installCustomPercyCommand } from '@packages/frontend-shared/cypress/support/customPercyCommand'
 
 installCustomPercyCommand({
   before: () => {},

packages/launchpad/cypress/component/support/index.ts

@@ -1,5 +1,5 @@
-/// <reference path="../../../../frontend-shared/cypress/e2e/support/e2eSupport.ts" />
-require('../../../../frontend-shared/cypress/e2e/support/e2eSupport')
+/// <reference path="../../../../frontend-shared/cypress/support/e2e.ts" />
+require('../../../../frontend-shared/cypress/support/e2e')
 
 require('./dropFileWithPath')
 require('./containsPath')

packages/launchpad/cypress/e2e/support/e2eSupport.ts

@@ -1,6 +1,6 @@
 import { mount } from 'cypress/react'
 import 'cypress-real-events/support'
-import { installCustomPercyCommand } from '@packages/ui-components/cypress/support/customPercyCommand'
+import { installCustomPercyCommand } from '@packages/frontend-shared/cypress/support/customPercyCommand'
 
 import '../../src/main.scss'
 

packages/reporter/cypress/support/component.ts

@@ -1,6 +1,6 @@
 import 'cypress-real-events/support'
 // @ts-ignore
-import { installCustomPercyCommand } from '@packages/ui-components/cypress/support/customPercyCommand'
+import { installCustomPercyCommand } from '@packages/frontend-shared/cypress/support/customPercyCommand'
 
 installCustomPercyCommand({
   before () {

packages/reporter/cypress/support/e2e.ts

@@ -7,7 +7,6 @@
 @import 'lib/tag';
 @import 'lib/tooltip';
 @import '~@reach/dialog/styles.css';
-@import '../../ui-components/src/file-opener/file-opener';
 // import all other scss files in src except if they are in lib
 // or their file name is `selector-playground` or `main`
 // NOTE: no need to import scss files in their components

packages/reporter/src/main-runner.scss

@@ -8,7 +8,6 @@
 @import 'lib/tag';
 @import 'lib/tooltip';
 @import '~@reach/dialog/styles.css';
-@import '../../ui-components/src/file-opener/file-opener';
 // import all other scss files in src except if they are in lib
 // or their file name is `selecor-playground` or `main`
 // NOTA: no need to import scss files in their components

packages/reporter/src/main.scss

@@ -9,5 +9,4 @@ $cy-tooltip-class: 'cy-tooltip';
 // NOTA: no need to import scss files in their components
 @import '../../runner/src/!(lib)*/**/!(assertions-menu|main).scss';
 
-@import '../../ui-components/src/dropdown';
 @import '../../reporter/src/main-runner';