Show warning if some files are hidden from commit changed files list

Summary:
We only send the first 25 files down to the client, so if a commit has more, we don't show them in the UI. We should show a banner explaining that this is happening.

We actually need to do this in a few other places too, this diff starts with just the changed files list.

Reviewed By: quark-zju

Differential Revision: D48812467

fbshipit-source-id: 97fedd25b379124a6547dc24439fd9384cb74b3e

addons/isl/src/CommitInfoView/CommitInfoView.tsx

@@ -331,7 +331,8 @@ export function CommitInfoDetails({commit}: {commit: CommitInfo}) {
                 </VSCodeButton>
               </div>
               <ChangedFiles
-                files={commit.filesSample}
+                filesSubset={commit.filesSample}
+                totalFiles={commit.totalFileCount}
                 comparison={
                   commit.isHead
                     ? {type: ComparisonType.HeadChanges}

addons/isl/src/UncommittedChanges.css

@@ -96,6 +96,11 @@
   line-height: 30px;
 }
 
+.changed-files .banner {
+  padding: var(--pad);
+  margin: var(--pad) 0;
+}
+
 .changed-file-path {
   display: flex;
   align-items: center;

addons/isl/src/UncommittedChanges.tsx

@@ -11,6 +11,7 @@ import type {ChangedFile, ChangedFileType, MergeConflicts, RepoRelativePath} fro
 import type {MutableRefObject, ReactNode} from 'react';
 import type {Comparison} from 'shared/Comparison';
 
+import {Banner} from './Banner';
 import {
   ChangedFileDisplayTypePicker,
   type ChangedFilesDisplayType,
@@ -153,15 +154,23 @@ const sortKeyForStatus: Record<VisualChangedFileType, number> = {
 };
 
 export function ChangedFiles(props: {
-  files: Array<ChangedFile>;
+  filesSubset: Array<ChangedFile>;
+  totalFiles: number;
   comparison: Comparison;
   selection?: UseUncommittedSelection;
 }) {
   const displayType = useRecoilValue(changedFilesDisplayType);
-  const {files, ...rest} = props;
-  const processedFiles = useDeepMemo(() => processCopiesAndRenames(files), [files]);
+  const {filesSubset, totalFiles, ...rest} = props;
+  const processedFiles = useDeepMemo(() => processCopiesAndRenames(filesSubset), [filesSubset]);
   return (
     <div className="changed-files">
+      {totalFiles > filesSubset.length ? (
+        <Banner key={'alert'} icon={<Icon icon="info" />}>
+          <T replace={{$numShown: filesSubset.length, $total: totalFiles}}>
+            Showing first $numShown files out of $total total
+          </T>
+        </Banner>
+      ) : null}
       {displayType === 'tree' ? (
         <FileTree {...rest} files={processedFiles} displayType={displayType} />
       ) : (
@@ -566,14 +575,16 @@ export function UncommittedChanges({place}: {place: 'main' | 'amend sidebar' | '
       </div>
       {conflicts != null ? (
         <ChangedFiles
-          files={conflicts.files ?? []}
+          filesSubset={conflicts.files ?? []}
+          totalFiles={conflicts.files?.length ?? 0}
           comparison={{
             type: ComparisonType.UncommittedChanges,
           }}
         />
       ) : (
         <ChangedFiles
-          files={uncommittedChanges}
+          filesSubset={uncommittedChanges}
+          totalFiles={uncommittedChanges.length}
           selection={selection}
           comparison={{
             type: ComparisonType.UncommittedChanges,

addons/isl/src/__tests__/CommitInfoView.test.tsx

@@ -180,6 +180,37 @@ describe('CommitInfoView', () => {
         expect(amendButton?.disabled).not.toBe(true);
       });
 
+      it('does not show banner if all files are shown', () => {
+        expect(
+          withinCommitInfo().queryByText(/Showing first .* files out of .* total/),
+        ).not.toBeInTheDocument();
+      });
+
+      it('shows banner if not all files are shown', () => {
+        act(() => {
+          simulateCommits({
+            value: [
+              COMMIT('1', 'some public base', '0', {phase: 'public'}),
+              COMMIT('a', 'Head Commit', '1', {
+                isHead: true,
+                filesSample: new Array(25)
+                  .fill(null)
+                  .map((_, i) => ({path: `src/file${i}.txt`, status: 'M'})),
+                totalFileCount: 100,
+              }),
+            ],
+          });
+          simulateUncommittedChangedFiles({
+            value: [],
+          });
+        });
+
+        expect(withinCommitInfo().queryByText(ignoreRTL('file1.txt'))).toBeInTheDocument();
+        expect(
+          withinCommitInfo().queryByText('Showing first 25 files out of 100 total'),
+        ).toBeInTheDocument();
+      });
+
       it('runs amend with selected files', async () => {
         expect(withinCommitInfo().queryByText(ignoreRTL('file1.js'))).toBeInTheDocument();
         expect(withinCommitInfo().queryByText(ignoreRTL('file2.js'))).toBeInTheDocument();