diff --git a/src/chrome/content.ts b/src/chrome/content.ts index 45ebfd9..423f089 100644 --- a/src/chrome/content.ts +++ b/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( '.react-blob-view-header-sticky' ) let element = childWithProperClass?.parentElement - if (!element) { - // Classic UI - const childWithProperClass = - document.querySelector('.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) diff --git a/src/components/viewer/CadBlobPage.tsx b/src/components/viewer/CadBlobPage.tsx index 31ffa27..ab6ccb7 100644 --- a/src/components/viewer/CadBlobPage.tsx +++ b/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() const [richSelected, setRichSelected] = useState(true) @@ -29,23 +27,14 @@ function CadBlobPortal({ const [sourceElements, setSourceElements] = useState([]) useEffect(() => { - let existingToggle: HTMLElement | undefined | null - let toolbar: HTMLElement | undefined | null - let blob: HTMLElement | undefined | null - if (classicUi) { - // no existing toggle - toolbar = element.querySelector('.js-blob-header') - blob = element.querySelector('.blob-wrapper') - } else { - existingToggle = element.querySelector( - 'ul[class*=SegmentedControl]' + const existingToggle = element.querySelector( + 'ul[class*=SegmentedControl]' + ) + const toolbar = existingToggle?.parentElement + let blob: HTMLElement | undefined | null = + element.querySelector( + 'section[aria-labelledby*=file-name-id]' ) - toolbar = existingToggle?.parentElement - blob = element.querySelector( - '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( { if (index < 2) { @@ -114,11 +103,7 @@ function CadBlobPortal({ Code - {!classicUi && ( - - Blame - - )} + Blame , 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} /> ) diff --git a/src/components/viewer/CadDiff.tsx b/src/components/viewer/CadDiff.tsx index 1b01cf2..13cac0a 100644 --- a/src/components/viewer/CadDiff.tsx +++ b/src/components/viewer/CadDiff.tsx @@ -1,11 +1,6 @@ import React, { useEffect, useState } from 'react' import '@react-three/fiber' -import { - Box, - useTheme, - TabNav, - Octicon, -} from '@primer/react' +import { Box, useTheme, TabNav, Octicon } from '@primer/react' import { FileDiff } from '../../chrome/types' import { Viewer3D } from './Viewer3D' import { BufferGeometry, Sphere } from 'three' diff --git a/tests/extension.spec.ts b/tests/extension.spec.ts index b1bf92c..189999a 100644 --- a/tests/extension.spec.ts +++ b/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 ({ -// page, -// authorizedBackground, -// }) => { -// const url = -// 'https://github.com/KittyCAD/diff-samples/blob/fd9eec79f0464833686ea6b5b34ea07145e32734/models/box.obj' -// const element = await getBlobPreviewElement(page, url) -// const screenshot = await element.screenshot() -// expect(screenshot).toMatchSnapshot() -// }) +test('blob preview with an .obj file', async ({ + page, + authorizedBackground, +}) => { + const url = + 'https://github.com/KittyCAD/diff-samples/blob/fd9eec79f0464833686ea6b5b34ea07145e32734/models/box.obj' + const element = await getBlobPreviewElement(page, url) + const screenshot = await element.screenshot() + 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, diff --git a/tests/extension.spec.ts-snapshots/blob-preview-with-a-step-file-1-chromium-linux.png b/tests/extension.spec.ts-snapshots/blob-preview-with-a-step-file-1-chromium-linux.png new file mode 100644 index 0000000..55c9f5f Binary files /dev/null and b/tests/extension.spec.ts-snapshots/blob-preview-with-a-step-file-1-chromium-linux.png differ diff --git a/tests/extension.spec.ts-snapshots/blob-preview-with-an-obj-file-1-chromium-linux.png b/tests/extension.spec.ts-snapshots/blob-preview-with-an-obj-file-1-chromium-linux.png index 179d805..bc0b0c7 100644 Binary files a/tests/extension.spec.ts-snapshots/blob-preview-with-an-obj-file-1-chromium-linux.png and b/tests/extension.spec.ts-snapshots/blob-preview-with-an-obj-file-1-chromium-linux.png differ