add pending changes to left panel

Summary:
# Context
Continuing w/ the split suggestions, in the left pane / uncommitted changes section, we are now showing the pending changes diff stats with the addition of a yellow warning indicator when the diff goes over the threshold.

Reviewed By: evangrayk

Differential Revision: D58494105

fbshipit-source-id: 6cc237efb69201d6ec94d5e84ec9c00fde1c5a02

addons/isl/src/CommitInfoView/DiffStats.tsx

@@ -17,6 +17,7 @@ import {
 } from '../sloc/useFetchSignificantLinesOfCode';
 import * as stylex from '@stylexjs/stylex';
 import {Icon} from 'shared/Icon';
+import {SLOC_THRESHOLD_FOR_SPLIT_SUGGESTIONS} from '../sloc/diffStatConstants';
 
 type Props = {commit: CommitInfo};
 const styles = stylex.create({
@@ -42,38 +43,59 @@ export function DiffStats({commit}: Props) {
   return <ResolvedDiffStatsView significantLinesOfCode={significantLinesOfCode} />;
 }
 
-export function PendingDiffStats() {
+export function PendingDiffStats({showWarning = false}: {showWarning?: boolean}) {
   return (
     <ErrorBoundary>
-      <PendingDiffStatsView />
+      <PendingDiffStatsView showWarning={showWarning} />
     </ErrorBoundary>
   );
 }
 
-export function PendingDiffStatsView() {
+export function PendingDiffStatsView({showWarning = false}: {showWarning?: boolean}) {
   const significantLinesOfCode = useFetchPendingSignificantLinesOfCode();
   if (significantLinesOfCode == null) {
     return <LoadingDiffStatsView />;
   }
-  return <ResolvedDiffStatsView significantLinesOfCode={significantLinesOfCode} />;
+  return (
+    <ResolvedDiffStatsView
+      significantLinesOfCode={significantLinesOfCode}
+      showWarning={showWarning}
+    />
+  );
 }
 
 function ResolvedDiffStatsView({
   significantLinesOfCode,
+  showWarning,
 }: {
   significantLinesOfCode: number | undefined;
+  showWarning?: boolean;
 }) {
   if (significantLinesOfCode == null) {
     return null;
   }
+  const extras =
+    showWarning && significantLinesOfCode > SLOC_THRESHOLD_FOR_SPLIT_SUGGESTIONS ? (
+      <Tooltip
+        title={t(
+          //formatting this on multiple lines to look good in the tooltip
+          `Consider unselecting some of these changes.
+
+Small Diffs lead to less SEVs & quicker review times.
+`,
+        )}>
+        <Icon icon="warning" color="yellow" />
+      </Tooltip>
+    ) : null;
+
   return (
-    <DiffStatsView>
+    <DiffStatsView extras={extras}>
       <T replace={{$num: significantLinesOfCode}}>$num lines</T>
     </DiffStatsView>
   );
 }
 
-function DiffStatsView({children}: {children: React.ReactNode}) {
+function DiffStatsView({extras, children}: {extras?: React.ReactNode; children: React.ReactNode}) {
   return (
     <Row xstyle={styles.locInfo}>
       <Icon icon="code" />
@@ -84,6 +106,7 @@ function DiffStatsView({children}: {children: React.ReactNode}) {
         )}>
         <Icon icon="info" />
       </Tooltip>
+      {extras}
     </Row>
   );
 }

addons/isl/src/UncommittedChanges.tsx

@@ -31,6 +31,7 @@ import {
   commitMessageFieldsSchema,
   commitMessageFieldsToString,
 } from './CommitInfoView/CommitMessageFields';
+import {PendingDiffStats} from './CommitInfoView/DiffStats';
 import {temporaryCommitTitle} from './CommitTitle';
 import {OpenComparisonViewButton} from './ComparisonView/OpenComparisonViewButton';
 import {Row} from './ComponentUtils';
@@ -44,6 +45,7 @@ import {tracker} from './analytics';
 import {latestCommitMessageFields} from './codeReview/CodeReviewInfo';
 import {Badge} from './components/Badge';
 import {Button} from './components/Button';
+import GatedComponent from './components/GatedComponent';
 import {islDrawerState} from './drawerState';
 import {externalMergeToolAtom} from './externalMergeTool';
 import {T, t} from './i18n';
@@ -711,6 +713,11 @@ export function UncommittedChanges({place}: {place: Place}) {
       <UnsavedFilesCount />
       {conflicts != null || place !== 'main' ? null : (
         <div className="button-rows">
+          <GatedComponent featureFlag={Internal.featureFlags?.ShowSplitSuggestion}>
+            <div className="button-row">
+              <PendingDiffStats showWarning={true} />
+            </div>
+          </GatedComponent>
           <div className="button-row">
             <span className="quick-commit-inputs">
               <VSCodeButton