fix: DH-19601: Pin aggregations to the top in input tables (#2502)

For DH-19601. Input tables with aggregations in the footer were
experiencing conflicts between aggregated data and insertions to the
pending area. This pr pins aggregations to the top of input tables, that
way we have the bottom of the table reserved for pending rows, and we
don't need to worry about conflicts.

Author: gzh2003

packages/iris-grid/src/IrisGrid.tsx

@@ -863,7 +863,11 @@ class IrisGrid extends Component<IrisGridProps, IrisGridState> {
 
       rollupConfig,
       rollupSelectedColumns: [],
-      aggregationSettings,
+      aggregationSettings:
+        // Pin aggregations to the top if the grid is editable, so that the bottom is reserved for pending rows
+        isEditableGridModel(model) && model.isEditable
+          ? { ...aggregationSettings, showOnTop: true }
+          : aggregationSettings,
       selectedAggregation: null,
 
       openOptions: [],
@@ -4833,6 +4837,11 @@ class IrisGrid extends Component<IrisGridProps, IrisGridState> {
             <Aggregations
               settings={aggregationSettings}
               isRollup={isRollup}
+              availablePlacements={
+                isEditableGridModel(model) && model.isEditable
+                  ? ['top']
+                  : ['top', 'bottom']
+              }
               onChange={this.handleAggregationsChange}
               onEdit={this.handleAggregationEdit}
               dh={model.dh}

packages/iris-grid/src/sidebar/aggregations/Aggregations.tsx

@@ -40,6 +40,7 @@ export type AggregationSettings = {
 
 export type AggregationsProps = {
   isRollup: boolean;
+  availablePlacements?: ('top' | 'bottom')[];
   settings: AggregationSettings;
   onChange: (
     settings: AggregationSettings,
@@ -53,6 +54,7 @@ export type AggregationsProps = {
 function Aggregations({
   isRollup,
   settings,
+  availablePlacements = ['top', 'bottom'],
   onChange,
   onEdit,
   dh,
@@ -308,8 +310,18 @@ function Aggregations({
                 onChange={handleShowOnTopChange}
                 value={`${showOnTop}`}
               >
-                <Radio value="true">Top</Radio>
-                <Radio value="false">Bottom</Radio>
+                <Radio
+                  value="true"
+                  isDisabled={!availablePlacements.includes('top')}
+                >
+                  Top
+                </Radio>
+                <Radio
+                  value="false"
+                  isDisabled={!availablePlacements.includes('bottom')}
+                >
+                  Bottom
+                </Radio>
               </RadioGroup>
             </div>
           )}