Fix blob viewer (new UI) (#521)

* Fix blob viewer (new UI)
Fixes #371

* Add step test and update snaps

* Better selector

src/chrome/content.ts

@@ -44,20 +44,10 @@ async function injectBlob(
     filename: string,
     document: Document
 ) {
-    let classicUi = false
-    // React UI (as of 2023-06-23, for signed-in users only)
     const childWithProperClass = document.querySelector<HTMLElement>(
         '.react-blob-view-header-sticky'
     )
     let element = childWithProperClass?.parentElement
-    if (!element) {
-        // Classic UI
-        const childWithProperClass =
-            document.querySelector<HTMLElement>('.js-blob-header')
-        element = childWithProperClass?.parentElement
-        classicUi = !!element
-    }
-
     if (!element) {
         throw Error("Couldn't find blob html element to inject")
     }
@@ -70,7 +60,6 @@ async function injectBlob(
         repo,
         sha,
         filename,
-        classicUi,
         colorMode,
     })
     root.render(cadBlobPage)

src/components/viewer/CadBlobPage.tsx

@@ -13,14 +13,12 @@ function CadBlobPortal({
     repo,
     sha,
     filename,
-    classicUi,
 }: {
     element: HTMLElement
     owner: string
     repo: string
     sha: string
     filename: string
-    classicUi: boolean
 }): React.ReactElement {
     const [richBlob, setRichBlob] = useState<FileBlob>()
     const [richSelected, setRichSelected] = useState(true)
@@ -29,23 +27,14 @@ function CadBlobPortal({
     const [sourceElements, setSourceElements] = useState<HTMLElement[]>([])
 
     useEffect(() => {
-        let existingToggle: HTMLElement | undefined | null
+        const existingToggle = element.querySelector<HTMLElement>(
-        let toolbar: HTMLElement | undefined | null
+            'ul[class*=SegmentedControl]'
-        let blob: HTMLElement | undefined | null
+        )
-        if (classicUi) {
+        const toolbar = existingToggle?.parentElement
-            // no existing toggle
+        let blob: HTMLElement | undefined | null =
-            toolbar = element.querySelector<HTMLElement>('.js-blob-header')
+            element.querySelector<HTMLElement>(
-            blob = element.querySelector<HTMLElement>('.blob-wrapper')
+                'section[aria-labelledby*=file-name-id]'
-        } else {
-            existingToggle = element.querySelector<HTMLElement>(
-                'ul[class*=SegmentedControl]'
             )
-            toolbar = existingToggle?.parentElement
-            blob = element.querySelector<HTMLElement>(
-                'section[aria-labelledby="file-name-id"]'
-            )
-        }
-
         const isPreviewAlreadyEnabled =
             existingToggle && existingToggle.childElementCount > 2 // Preview, Code, Blame
         if (isPreviewAlreadyEnabled) {
@@ -93,7 +82,7 @@ function CadBlobPortal({
             {toolbarContainer &&
                 createPortal(
                     <SegmentedControl
-                        sx={{ mr: classicUi ? 2 : 0, order: -1 }} // prepend in flex
+                        sx={{ mr: 0, order: -1 }} // prepend in flex
                         aria-label="File view"
                         onChange={(index: number) => {
                             if (index < 2) {
@@ -114,11 +103,7 @@ function CadBlobPortal({
                         <SegmentedControl.Button selected={!richSelected}>
                             Code
                         </SegmentedControl.Button>
-                        {!classicUi && (
+                        <SegmentedControl.Button>Blame</SegmentedControl.Button>
-                            <SegmentedControl.Button>
-                                Blame
-                            </SegmentedControl.Button>
-                        )}
                     </SegmentedControl>,
                     toolbarContainer
                 )}
@@ -148,7 +133,6 @@ export type CadBlobPageProps = {
     repo: string
     sha: string
     filename: string
-    classicUi: boolean
     colorMode: ColorModeWithAuto
 }
 
@@ -158,7 +142,6 @@ export function CadBlobPage({
     repo,
     sha,
     filename,
-    classicUi,
     colorMode,
 }: CadBlobPageProps): React.ReactElement {
     return (
@@ -169,7 +152,6 @@ export function CadBlobPage({
                 repo={repo}
                 sha={sha}
                 filename={filename}
-                classicUi={classicUi}
             />
         </ThemeProvider>
     )

src/components/viewer/CadDiff.tsx

@@ -1,11 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import '@react-three/fiber'
-import {
+import { Box, useTheme, TabNav, Octicon } from '@primer/react'
-    Box,
-    useTheme,
-    TabNav,
-    Octicon,
-} from '@primer/react'
 import { FileDiff } from '../../chrome/types'
 import { Viewer3D } from './Viewer3D'
 import { BufferGeometry, Sphere } from 'three'

tests/extension.spec.ts

@@ -124,17 +124,28 @@ test('commit diff with an added .step file', async ({
 //     expect(screenshot2).toMatchSnapshot()
 // })
 
-// TODO: re-enable when new blob page is fixed
+test('blob preview with an .obj file', async ({
-// test('blob preview with an .obj file', async ({
+    page,
-//     page,
+    authorizedBackground,
-//     authorizedBackground,
+}) => {
-// }) => {
+    const url =
-//     const url =
+        'https://github.com/KittyCAD/diff-samples/blob/fd9eec79f0464833686ea6b5b34ea07145e32734/models/box.obj'
-//         'https://github.com/KittyCAD/diff-samples/blob/fd9eec79f0464833686ea6b5b34ea07145e32734/models/box.obj'
+    const element = await getBlobPreviewElement(page, url)
-//     const element = await getBlobPreviewElement(page, url)
+    const screenshot = await element.screenshot()
-//     const screenshot = await element.screenshot()
+    expect(screenshot).toMatchSnapshot()
-//     expect(screenshot).toMatchSnapshot()
+})
-// })
+
+
+test('blob preview with a .step file', async ({
+    page,
+    authorizedBackground,
+}) => {
+    const url =
+        'https://github.com/KittyCAD/diff-samples/blob/fd9eec79f0464833686ea6b5b34ea07145e32734/models/box.step'
+    const element = await getBlobPreviewElement(page, url)
+    const screenshot = await element.screenshot()
+    expect(screenshot).toMatchSnapshot()
+})
 
 test('blob preview with an .stl file', async ({
     page,