Show diff view buttons on browser platform

Summary:
On browser platforms (sl web), the per-file "Open Diff View" buttons were hidden because BrowserPlatform doesn't implement the optional openDiff method. This meant users had no per-file shortcut to view diffs — only the "View Changes" button that shows all files.

This adds a single-file mode to the ComparisonView. When openDiff is unavailable, clicking a per-file diff button calls showComparisonForFile(), which opens the ComparisonView filtered to just that file. Multi-file UI (expand/collapse all buttons) is hidden in this mode.

Changes:
- atoms.ts: Added focusedFile to ComparisonMode, added showComparisonForFile()
- ComparisonView.tsx: Filters file list when focusedFile is set, hides expand/collapse buttons
- ComparisonViewModal.tsx: Passes focusedFile through to ComparisonView
- ChangedFile.tsx: Per-file buttons fall back to showComparisonForFile() when openDiff is unavailable
- BrowserPlatform.ts: Reverted to original (no platform-level changes needed)

Reviewed By: evangrayk

Differential Revision: D97681255

fbshipit-source-id: 1490258805caba066fb28f5dfd2b1ce39c25b1ca

Author: Matt Morris

addons/isl/src/ChangedFile.tsx

@@ -24,6 +24,7 @@ import {useContextMenu} from 'shared/ContextMenu';
 import {basename, notEmpty} from 'shared/utils';
 import {copyUrlForFile, supportsBrowseUrlForHash} from './BrowseRepo';
 import {type ChangedFilesDisplayType} from './ChangedFileDisplayTypePicker';
+import {showComparison} from './ComparisonView/atoms';
 import {generatedStatusDescription, generatedStatusToLabel} from './GeneratedFile';
 import {PartialFileSelectionWithMode} from './PartialFileSelection';
 import {confirmSuggestedEditsForFiles} from './SuggestedEdits';
@@ -103,12 +104,18 @@ export function File({
         onClick: () => platform.revealInExplorerView?.(file.path),
       });
     }
-    if (comparison != null && platform.openDiff != null) {
+    if (comparison != null) {
       options.push({
         label: t('Open Diff View ($comparison)', {
           replace: {$comparison: labelForComparison(comparison)},
         }),
-        onClick: () => platform.openDiff?.(file.path, comparison),
+        onClick: () => {
+          if (platform.openDiff != null) {
+            platform.openDiff(file.path, comparison);
+          } else {
+            showComparison(comparison, file.path);
+          }
+        },
       });
     }
 
@@ -226,15 +233,19 @@ function FileActions({
 
   const actions: Array<React.ReactNode> = [];
 
-  if (platform.openDiff != null && !conflictStatuses.has(file.status)) {
+  if (!conflictStatuses.has(file.status)) {
     actions.push(
       <Tooltip title={t('Open diff view')} key="open-diff-view" delayMs={1000}>
         <Button
           className="file-show-on-hover"
           icon
           data-testid="file-open-diff-button"
           onClick={() => {
-            platform.openDiff?.(file.path, comparison);
+            if (platform.openDiff != null) {
+              platform.openDiff(file.path, comparison);
+            } else {
+              showComparison(comparison, file.path);
+            }
           }}>
           <Icon icon="request-changes" />
         </Button>

addons/isl/src/ComparisonView/ComparisonView.tsx

@@ -74,9 +74,11 @@ const comparisonDisplayMode = localStorageBackedAtom<ComparisonDisplayMode | 're
 export default function ComparisonView({
   comparison,
   dismiss,
+  focusedFile,
 }: {
   comparison: Comparison;
   dismiss?: () => void;
+  focusedFile?: string;
 }) {
   const compared = useAtomValue(currentComparisonData(comparison));
 
@@ -116,7 +118,10 @@ export default function ComparisonView({
         </EmptyState>
       );
   } else {
-    const files = data.value ?? [];
+    let files = data.value ?? [];
+    if (focusedFile != null) {
+      files = files.filter(f => f.newFileName === focusedFile || f.oldFileName === focusedFile);
+    }
     sortFilesByType(files);
     const fileGroups = group(files, file => generatedStatuses[file.newFileName ?? '']);
     content = (
@@ -171,6 +176,7 @@ export default function ComparisonView({
         collapsedFiles={collapsedFiles}
         setCollapsedFile={setCollapsedFile}
         dismiss={dismiss}
+        focusedFile={focusedFile}
       />
       <div className="comparison-view-details">{content}</div>
     </div>
@@ -187,11 +193,13 @@ function ComparisonViewHeader({
   collapsedFiles,
   setCollapsedFile,
   dismiss,
+  focusedFile,
 }: {
   comparison: Comparison;
   collapsedFiles: Map<string, boolean>;
   setCollapsedFile: (path: string, collapsed: boolean) => unknown;
   dismiss?: () => void;
+  focusedFile?: string;
 }) {
   const setComparisonMode = useSetAtom(currentComparisonMode);
   const [compared, reloadComparison] = useAtom(currentComparisonData(comparison));
@@ -250,32 +258,36 @@ function ComparisonViewHeader({
               <Icon icon="refresh" data-testid="comparison-refresh-button" />
             </Button>
           </Tooltip>
-          <Button
-            onClick={() => {
-              for (const file of data?.value ?? []) {
-                if (file.newFileName) {
-                  setCollapsedFile(file.newFileName, false);
+          {focusedFile == null && (
+            <Button
+              onClick={() => {
+                for (const file of data?.value ?? []) {
+                  if (file.newFileName) {
+                    setCollapsedFile(file.newFileName, false);
+                  }
                 }
-              }
-            }}
-            disabled={isLoading || allFilesExpanded}
-            icon>
-            <Icon icon="unfold" slot="start" />
-            <T>Expand all files</T>
-          </Button>
-          <Button
-            onClick={() => {
-              for (const file of data?.value ?? []) {
-                if (file.newFileName) {
-                  setCollapsedFile(file.newFileName, true);
+              }}
+              disabled={isLoading || allFilesExpanded}
+              icon>
+              <Icon icon="unfold" slot="start" />
+              <T>Expand all files</T>
+            </Button>
+          )}
+          {focusedFile == null && (
+            <Button
+              onClick={() => {
+                for (const file of data?.value ?? []) {
+                  if (file.newFileName) {
+                    setCollapsedFile(file.newFileName, true);
+                  }
                 }
-              }
-            }}
-            icon
-            disabled={isLoading || noFilesExpanded}>
-            <Icon icon="fold" slot="start" />
-            <T>Collapse all files</T>
-          </Button>
+              }}
+              icon
+              disabled={isLoading || noFilesExpanded}>
+              <Icon icon="fold" slot="start" />
+              <T>Collapse all files</T>
+            </Button>
+          )}
           <Tooltip trigger="click" component={() => <ComparisonSettingsDropdown />}>
             <Button icon>
               <Icon icon="ellipsis" />

addons/isl/src/ComparisonView/ComparisonViewModal.tsx

@@ -45,7 +45,11 @@ export function ComparisonViewModal() {
   return (
     <Modal className="comparison-view-modal" height="" width="">
       <Suspense fallback={<Icon icon="loading" />}>
-        <ComparisonView comparison={mode.comparison} dismiss={dismissComparison} />
+        <ComparisonView
+          comparison={mode.comparison}
+          dismiss={dismissComparison}
+          focusedFile={mode.focusedFile}
+        />
       </Suspense>
     </Modal>
   );
@@ -61,7 +65,7 @@ export function ComparisonViewApp() {
   return (
     <div className="comparison-view-root">
       <Suspense fallback={<Icon icon="loading" />}>
-        <ComparisonView comparison={mode.comparison} />
+        <ComparisonView comparison={mode.comparison} focusedFile={mode.focusedFile} />
       </Suspense>
     </div>
   );

addons/isl/src/ComparisonView/atoms.ts

@@ -6,13 +6,19 @@
  */
 
 import type {Comparison} from 'shared/Comparison';
+import type {RepoRelativePath} from '../types';
 
 import {atom} from 'jotai';
 import {ComparisonType} from 'shared/Comparison';
 import {writeAtom} from '../jotaiUtils';
 import platform from '../platform';
 
-export type ComparisonMode = {comparison: Comparison; visible: boolean};
+export type ComparisonMode = {
+  comparison: Comparison;
+  visible: boolean;
+  /** When set, only show the diff for this specific file. */
+  focusedFile?: RepoRelativePath;
+};
 export const currentComparisonMode = atom<ComparisonMode>(
   window.islAppMode?.mode === 'comparison'
     ? {
@@ -25,14 +31,14 @@ export const currentComparisonMode = atom<ComparisonMode>(
       },
 );
 
-/** Open Comparison View for a given comparison type */
-export async function showComparison(comparison: Comparison) {
+/** Open Comparison View, optionally focused on a single file */
+export async function showComparison(comparison: Comparison, focusedFile?: RepoRelativePath) {
   if (await platform.openDedicatedComparison?.(comparison)) {
     return;
   }
-  writeAtom(currentComparisonMode, {comparison, visible: true});
+  writeAtom(currentComparisonMode, {comparison, visible: true, focusedFile});
 }
 
 export function dismissComparison() {
-  writeAtom(currentComparisonMode, last => ({...last, visible: false}));
+  writeAtom(currentComparisonMode, last => ({...last, visible: false, focusedFile: undefined}));
 }