Replace lower-right controls with a full status bar (#7443)

* Resurrect this branch with an initial commit

* Add telemetry to global default items

* Add credit progress bar to status bar

* Add selection info to status bar

* Add help menu to "local" side

* Rename statusBarItem utils

* Delete LowerRightControls, now unused

* fix lints

* Update snapshots

* Add test-id to network health indicator, which all E2E tests rely on

* Update src/components/StatusBar/StatusBar.tsx

Co-authored-by: graphite-app[bot] <96075541+graphite-app[bot]@users.noreply.github.com>

* Fix a couple little issues with the e2e tests

* Fix gizmo e2e tests (it moved) and network health test (it should not be on home page)

* More tweaks to accomodate changes to network health indicator

We made use of two test ID's to make Playwright aware of the state, one
of which was on the icon. Now that we want to normalize usage of the
status bar along a more limited API, that became a not possible. This
just tweaks some test code that relied on that fact.

* Fix lints

* Update snapshots

* Re-run CI

* Update snapshots

* Update snapshots

* Test fixes, label logic tweaks

* Update snapshots

* Update snapshots

* Fix up last few tests hopefully. Relative path syntax failed on windows

* Relative paths are behaving badly on Windows, use the old code here

* Update snapshots

* Update snapshots

* Tweak y-value to work on all platforms, ubuntu didn't like 438

* Fix tooltip and popover alignment on NetworkMachineIndicator

* Remove dire warning comment

* Update src/components/StatusBar/defaultStatusBarItems.tsx

Co-authored-by: graphite-app[bot] <96075541+graphite-app[bot]@users.noreply.github.com>

* @lee-at-zoo-corp feedback, pull hooks out of UI code

* Re-run CI

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: graphite-app[bot] <96075541+graphite-app[bot]@users.noreply.github.com>

e2e/playwright/regression-tests.spec.ts

@@ -575,7 +575,7 @@ extrude002 = extrude(profile002, length = 150)
         name: 'Projects',
       })
       const projectLink = page.getByRole('link', { name: 'bracket' })
-      const networkHealthIndicator = page.getByTestId('network-toggle')
+      const networkHealthIndicator = page.getByTestId(/network-toggle/)
 
       await test.step('Check the home page', async () => {
         await expect(projectsHeading).toBeVisible()

e2e/playwright/snapshot-tests.spec.ts

@@ -798,7 +798,7 @@ test('theme persists', async ({ page, context, homePage }) => {
 
   await page.getByTestId('settings-close-button').click()
 
-  const networkToggle = page.getByTestId('network-toggle')
+  const networkToggle = page.getByTestId(/network-toggle/)
 
   // simulate network down
   await u.emulateNetworkConditions({

e2e/playwright/test-network-and-connection-issues.spec.ts

@@ -24,16 +24,15 @@ test.describe('Test network related behaviors', () => {
 
       await homePage.goToModelingScene()
 
-      const networkToggle = page.getByTestId('network-toggle')
+      const networkToggle = page.getByTestId(/network-toggle/)
 
       // This is how we wait until the stream is online
       await expect(
         page.getByRole('button', { name: 'Start Sketch' })
       ).not.toBeDisabled({ timeout: 15000 })
 
-      const networkWidget = page.locator('[data-testid="network-toggle"]')
-      await expect(networkWidget).toBeVisible()
-      await networkWidget.hover()
+      await expect(networkToggle).toBeVisible()
+      await networkToggle.hover()
 
       const networkPopover = page.locator('[data-testid="network-popover"]')
       await expect(networkPopover).not.toBeVisible()
@@ -44,7 +43,7 @@ test.describe('Test network related behaviors', () => {
       ).toBeVisible()
 
       // Click the network widget
-      await networkWidget.click()
+      await networkToggle.click()
 
       // Check the modal opened.
       await expect(networkPopover).toBeVisible()
@@ -65,8 +64,8 @@ test.describe('Test network related behaviors', () => {
       // Expect the network to be down
       await expect(networkToggle).toContainText('Network health (Offline)')
 
-      // Click the network widget
-      await networkWidget.click()
+      // Click the network toggle
+      await networkToggle.click()
 
       // Check the modal opened.
       await expect(networkPopover).toBeVisible()
@@ -99,7 +98,7 @@ test.describe('Test network related behaviors', () => {
     'Engine disconnect & reconnect in sketch mode',
     { tag: '@skipLocalEngine' },
     async ({ page, homePage, toolbar, scene, cmdBar }) => {
-      const networkToggle = page.getByTestId('network-toggle')
+      const networkToggle = page.getByTestId(/network-toggle/)
       const networkToggleConnectedText = page.getByText(
         'Network health (Strong)'
       )
@@ -286,7 +285,7 @@ profile001 = startProfile(sketch001, at = [12.34, -12.34])
     'Paused stream freezes view frame, unpause reconnect is seamless to user',
     { tag: ['@desktop', '@skipLocalEngine'] },
     async ({ page, homePage, scene, cmdBar, toolbar, tronApp }) => {
-      const networkToggle = page.getByTestId('network-toggle')
+      const networkToggle = page.getByTestId(/network-toggle/)
       const networkToggleConnectedText = page.getByText(
         'Network health (Strong)'
       )

e2e/playwright/test-utils.ts

@@ -37,7 +37,7 @@ export const headerMasks = (page: Page) => [
 ]
 
 export const lowerRightMasks = (page: Page) => [
-  page.getByTestId('network-toggle'),
+  page.getByTestId(/network-toggle/),
   page.getByTestId('billing-remaining-bar'),
 ]
 

e2e/playwright/testing-gizmo.spec.ts

@@ -8,37 +8,37 @@ test.describe('Testing Gizmo', () => {
   const cases = [
     {
       testDescription: 'top view',
-      clickPosition: { x: 951, y: 385 },
+      clickPosition: { x: 951, y: 402 },
       expectedCameraPosition: { x: 800, y: -152, z: 4886.02 },
       expectedCameraTarget: { x: 800, y: -152, z: 26 },
     },
     {
       testDescription: 'bottom view',
-      clickPosition: { x: 951, y: 429 },
+      clickPosition: { x: 951, y: 449 },
       expectedCameraPosition: { x: 800, y: -152, z: -4834.02 },
       expectedCameraTarget: { x: 800, y: -152, z: 26 },
     },
     {
       testDescription: 'right view',
-      clickPosition: { x: 929, y: 417 },
+      clickPosition: { x: 929, y: 435 },
       expectedCameraPosition: { x: 5660.02, y: -152, z: 26 },
       expectedCameraTarget: { x: 800, y: -152, z: 26 },
     },
     {
       testDescription: 'left view',
-      clickPosition: { x: 974, y: 397 },
+      clickPosition: { x: 974, y: 417 },
       expectedCameraPosition: { x: -4060.02, y: -152, z: 26 },
       expectedCameraTarget: { x: 800, y: -152, z: 26 },
     },
     {
       testDescription: 'back view',
-      clickPosition: { x: 967, y: 421 },
+      clickPosition: { x: 967, y: 441 },
       expectedCameraPosition: { x: 800, y: 4708.02, z: 26 },
       expectedCameraTarget: { x: 800, y: -152, z: 26 },
     },
     {
       testDescription: 'front view',
-      clickPosition: { x: 935, y: 393 },
+      clickPosition: { x: 935, y: 413 },
       expectedCameraPosition: { x: 800, y: -5012.02, z: 26 },
       expectedCameraTarget: { x: 800, y: -152, z: 26 },
     },