From 895bf9a6f60f33a61beb5fe720f7289b487acbef Mon Sep 17 00:00:00 2001
From: Danila Gulderov <danila@gulderov.me>
Date: Wed, 20 Sep 2023 17:53:54 +0300
Subject: [PATCH] Added onFullScreenChange to OuiDataGrid (#1053)

Signed-off-by: Danila Gulderov <danila@gulderov.me>
---
 CHANGELOG.md                            |  1 +
 src-docs/src/views/datagrid/datagrid.js |  5 +++++
 src/components/datagrid/data_grid.tsx   | 23 ++++++++++++++++++++---
 3 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 62ebe84782..fe5f6e862e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -51,6 +51,7 @@
 - Adjust background color of OuiToolTip in `next` theme ([#1004](https://github.com/opensearch-project/oui/pull/1004))
 - Add new `middle-out` order prop option to `OuiPaletteColorBlind` ([#856](https://github.com/opensearch-project/oui/pull/856))
 - Add new icons for OpenSearch Dashboards v2.10.0 ([#1014](https://github.com/opensearch-project/oui/pull/1014))
+- Added onFullScreenChange to OuiDataGrid ([#1015](https://github.com/opensearch-project/oui/pull/1015))
 
 ### 🐛 Bug Fixes
 
diff --git a/src-docs/src/views/datagrid/datagrid.js b/src-docs/src/views/datagrid/datagrid.js
index 03c3d81635..5e17ec8e67 100644
--- a/src-docs/src/views/datagrid/datagrid.js
+++ b/src-docs/src/views/datagrid/datagrid.js
@@ -312,6 +312,10 @@ export default () => {
     console.log(eventData);
   });
 
+  const onFullScreenChange = useRef((eventData) => {
+    console.log('isFullScreen:', eventData);
+  });
+
   return (
     <DataContext.Provider value={raw_data}>
       <OuiDataGrid
@@ -330,6 +334,7 @@ export default () => {
           onChangePage: onChangePage,
         }}
         onColumnResize={onColumnResize.current}
+        onFullScreenChange={onFullScreenChange.current}
       />
     </DataContext.Provider>
   );
diff --git a/src/components/datagrid/data_grid.tsx b/src/components/datagrid/data_grid.tsx
index 3ed5002f2f..d5ac04244b 100644
--- a/src/components/datagrid/data_grid.tsx
+++ b/src/components/datagrid/data_grid.tsx
@@ -164,6 +164,10 @@ type CommonGridProps = CommonProps &
      * A callback for when a column's size changes. Callback receives `{ columnId: string, width: number }`.
      */
     onColumnResize?: OuiDataGridOnColumnResizeHandler;
+    /**
+     * A callback fired when the internal full screen state changes.
+     */
+    onFullScreenChange?: (isFullScreen: boolean) => void;
     /**
      * Defines a minimum width for the grid to show all controls in its header.
      */
@@ -690,6 +694,7 @@ function notifyCellOfFocusState(
 }
 
 const emptyArrayDefault: OuiDataGridControlColumn[] = [];
+
 export const OuiDataGrid: FunctionComponent<OuiDataGridProps> = (props) => {
   const {
     leadingControlColumns = emptyArrayDefault,
@@ -708,6 +713,7 @@ export const OuiDataGrid: FunctionComponent<OuiDataGridProps> = (props) => {
     inMemory,
     popoverContents,
     onColumnResize,
+    onFullScreenChange,
     minSizeForControls = MINIMUM_WIDTH_FOR_GRID_CONTROLS,
     height,
     width,
@@ -715,7 +721,7 @@ export const OuiDataGrid: FunctionComponent<OuiDataGridProps> = (props) => {
     ...rest
   } = props;
 
-  const [isFullScreen, setIsFullScreen] = useState(false);
+  const [isFullScreen, setFullScreen] = useState(false);
   const [gridWidth, setGridWidth] = useState(0);
 
   const [interactiveCellId] = useState(htmlIdGenerator()());
@@ -756,6 +762,17 @@ export const OuiDataGrid: FunctionComponent<OuiDataGridProps> = (props) => {
     [headerIsInteractive, setHeaderIsInteractive, setFocusedCell]
   );
 
+  const handleFullScreenChange = useCallback(
+    (isFullScreen: boolean) => {
+      setFullScreen(isFullScreen);
+
+      if (onFullScreenChange) {
+        onFullScreenChange(isFullScreen);
+      }
+    },
+    [onFullScreenChange]
+  );
+
   const handleHeaderMutation = useCallback<MutationCallback>(
     (records) => {
       const [{ target }] = records;
@@ -781,7 +798,7 @@ export const OuiDataGrid: FunctionComponent<OuiDataGridProps> = (props) => {
       case keys.ESCAPE:
         if (isFullScreen) {
           event.preventDefault();
-          setIsFullScreen(false);
+          handleFullScreenChange(false);
         }
         break;
     }
@@ -1000,7 +1017,7 @@ export const OuiDataGrid: FunctionComponent<OuiDataGridProps> = (props) => {
           color="text"
           className={controlBtnClasses}
           data-test-subj="dataGridFullScrenButton"
-          onClick={() => setIsFullScreen(!isFullScreen)}>
+          onClick={() => handleFullScreenChange(!isFullScreen)}>
           {isFullScreen ? fullScreenButtonActive : fullScreenButton}
         </OuiButtonEmpty>
       )}