fix display the current pyrefly version in the sandbox #3802 (#4435)

Summary:
Fixes #3802

export version from cargo env into wasm and insert into tsx

Pull Request resolved: #4435

Test Plan: add test

Reviewed By: stroxler

Differential Revision: D114725315

Pulled By: rchen152

fbshipit-source-id: 17daaaa2718dfabf9f35fe999163168e295f81fe

Author: asukaminato0721

pyrefly/lib/lib.rs

@@ -59,6 +59,9 @@ mod tsp;
 
 pub(crate) use compat::*;
 
+/// The version of this Pyrefly build.
+pub const VERSION: &str = env!("CARGO_PKG_VERSION");
+
 /// This interface is NOT stable and should not be relied upon.
 /// It will change during minor version increments.
 ///

pyrefly_wasm/lib.rs

@@ -16,6 +16,12 @@ use wasm_bindgen::prelude::*;
 
 extern crate console_error_panic_hook;
 
+/// Return the version of Pyrefly embedded in this WASM module.
+#[wasm_bindgen]
+pub fn version() -> String {
+    pyrefly::VERSION.to_owned()
+}
+
 #[wasm_bindgen]
 pub struct State(Playground);
 

website/docusaurus.config.ts

@@ -16,10 +16,22 @@ import StylexPlugin from '@stylexjs/webpack-plugin';
 import PyodidePlugin from '@pyodide/webpack-plugin';
 import path from "path";
 import fs from "fs";
+import { execSync } from "child_process";
 import remarkSandboxPlugin from "./src/sandbox/remarkSandboxPlugin";
 
 const BasePath = 'en/docs';
 
+// The commit is only known in a git checkout of the GitHub repository. Elsewhere, such as in
+// fbsource, there is no matching GitHub commit, so it stays empty.
+let pyreflyCommit = '';
+try {
+    pyreflyCommit = execSync('git rev-parse HEAD', {
+        cwd: __dirname,
+        encoding: 'utf8',
+        stdio: ['ignore', 'pipe', 'ignore'],
+    }).trim();
+} catch {}
+
 const baseUrl = process.env.DOCUSAURUS_BASE_URL || '/';
 
 const siteUrl = 'https://pyrefly.org';
@@ -290,6 +302,7 @@ const config: Config = {
                             new webpack.EnvironmentPlugin({
                                 INTERNAL_STATIC_DOCS:
                                     process.env.INTERNAL_STATIC_DOCS === '1' || false,
+                                PYREFLY_COMMIT: pyreflyCommit,
                             }),
                         ],
                     };

website/src/__tests__/__mocks__/pyreflyWasmMock.ts

@@ -87,5 +87,6 @@ class MockState {
 module.exports = {
     __esModule: true,
     default: (): Promise<void> => Promise.resolve(),
+    version: (): string => '1.2.3-test',
     State: MockState,
 };

website/src/__tests__/__snapshots__/sandbox.test.tsx.snap

@@ -36,6 +36,15 @@ exports[`Sandbox Component render sandbox correctly 1`] = `
         />
         Parameter hints
       </label>
+      <a
+        href="https://github.com/facebook/pyrefly/commit/123456789abcdef"
+        id="pyrefly-build"
+        rel="noopener noreferrer"
+        target="_blank"
+        title="Pyrefly 1.2.3-test, commit 123456789abcdef"
+      >
+        Pyrefly 1.2.3-test (commit 123456789)
+      </a>
     </div>
     <div>
       <div

website/src/__tests__/sandbox.test.tsx

@@ -15,6 +15,16 @@ import { SANDBOX_FILE_NAME } from '../pages/sandbox';
 import { DEFAULT_SANDBOX_PROGRAM } from '../sandbox/DefaultSandboxProgram';
 
 describe('Sandbox Component', () => {
+    const pyreflyCommit = '123456789abcdef';
+
+    beforeAll(() => {
+        process.env.PYREFLY_COMMIT = pyreflyCommit;
+    });
+
+    afterAll(() => {
+        delete process.env.PYREFLY_COMMIT;
+    });
+
     test('render sandbox correctly', async () => {
         const container = await act(async () => {
             const { container } = render(
@@ -31,6 +41,14 @@ describe('Sandbox Component', () => {
             DEFAULT_SANDBOX_PROGRAM,
             false
         );
+        const buildLink = container.querySelector('#pyrefly-build');
+        expect(buildLink).toHaveTextContent(
+            'Pyrefly 1.2.3-test (commit 123456789)'
+        );
+        expect(buildLink).toHaveAttribute(
+            'href',
+            `https://github.com/facebook/pyrefly/commit/${pyreflyCommit}`
+        );
 
         // Run test with --update-snapshot to update the snapshot if the test is failing after
         // you made a intentional change to the home page
@@ -79,6 +97,25 @@ describe('Sandbox Component', () => {
         fireEvent.click(toggle);
         expect(toggle).toBeChecked();
     });
+    test('omits the commit for local builds', async () => {
+        delete process.env.PYREFLY_COMMIT;
+        try {
+            const container = await act(async () => {
+                const { container } = render(
+                    <Sandbox sampleFilename={SANDBOX_FILE_NAME} />
+                );
+
+                await Promise.resolve();
+                return container;
+            });
+
+            expect(
+                container.querySelector('#pyrefly-build')
+            ).not.toBeInTheDocument();
+        } finally {
+            process.env.PYREFLY_COMMIT = pyreflyCommit;
+        }
+    });
 
     function expectMonacoEditorLoadedWithContent(
         container: HTMLElement,

website/src/sandbox/Sandbox.tsx

@@ -128,6 +128,8 @@ export default function Sandbox({
     const [isHovered, setIsHovered] = useState(false);
     const [pythonVersion, setPythonVersion] = useState('3.12');
     const [showParameterHints, setShowParameterHints] = useState(false);
+    const [pyreflyVersion, setPyreflyVersion] = useState<string | null>(null);
+    const pyreflyCommit = process.env.PYREFLY_COMMIT;
     // Absolute pixel height for the editor pane (null = not yet initialized)
     const [editorHeight, setEditorHeight] = useState<number | null>(null);
     const [isResizing, setIsResizing] = useState(false);
@@ -564,6 +566,18 @@ export default function Sandbox({
                 />
                 Parameter hints
             </label>
+            {pyreflyVersion && pyreflyCommit && (
+                <a
+                    id="pyrefly-build"
+                    href={`https://github.com/facebook/pyrefly/commit/${pyreflyCommit}`}
+                    title={`Pyrefly ${pyreflyVersion}, commit ${pyreflyCommit}`}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    {...stylex.props(styles.commit)}
+                >
+                    {`Pyrefly ${pyreflyVersion} (commit ${pyreflyCommit.slice(0, 9)})`}
+                </a>
+            )}
         </div>
     );
 
@@ -670,6 +684,7 @@ export default function Sandbox({
         pyreflyWasmInitializedPromise
             .then((pyrefly) => {
                 try {
+                    setPyreflyVersion(pyrefly.version());
                     setPyreService(new pyrefly.State(pythonVersion));
                     setLoading(false);
                     setInternalError('');
@@ -1677,6 +1692,16 @@ const styles = stylex.create({
         whiteSpace: 'nowrap',
         userSelect: 'none',
     },
+    commit: {
+        color: 'var(--color-text-secondary)',
+        fontSize: '12px',
+        padding: '7px 15px',
+        textDecoration: 'none',
+        whiteSpace: 'nowrap',
+        ':hover': {
+            textDecoration: 'underline',
+        },
+    },
     actionButton: {
         border: 'none',
         background: 'transparent',