feat(Datagrid): add feature flag to select hooks until fully released (…

…#2937)

packages/cloud-cognitive/README.md

@@ -102,7 +102,7 @@ const App = () => {
 };
 ```
 
-### Enabling Canary components
+### Enabling Canary components and flagged features
 
 Components that have not yet completed the release review process are considered
 to be canary and require the consumer to enable via a feature flag in a

packages/cloud-cognitive/src/components/Datagrid/Datagrid.stories.js

@@ -43,6 +43,13 @@ export default {
       page: mdx,
     },
   },
+  argTypes: {
+    featureFlags: {
+      table: {
+        disable: true,
+      },
+    },
+  },
 };
 
 const getColumns = (rows) => {

packages/cloud-cognitive/src/components/Datagrid/Extensions/ColumnCustomization/ColumnCustomization.stories.js

@@ -39,6 +39,13 @@ export default {
     styles,
     docs: { page: mdx },
   },
+  argTypes: {
+    featureFlags: {
+      table: {
+        disable: true,
+      },
+    },
+  },
 };
 
 const blockClass = `${pkg.prefix}--datagrid`;
@@ -199,6 +206,12 @@ const ColumnCustomizationUsage = ({ ...args }) => {
     useColumnOrder
   );
 
+  // Warnings are ordinarily silenced in storybook, add this to test
+  pkg._silenceWarnings(false);
+  // Enable feature flag for `useCustomizeColumns` hook
+  pkg.feature['Datagrid.useCustomizeColumns'] = true;
+  pkg._silenceWarnings(true);
+
   return (
     <>
       <Datagrid datagridState={datagridState} />
@@ -235,6 +248,7 @@ export const ColumnCustomizationUsageStory = prepareStory(
     },
     args: {
       ...columnCustomizationControlProps,
+      featureFlags: ['Datagrid.useCustomizeColumns'],
     },
   }
 );
@@ -263,6 +277,12 @@ const ColumnCustomizationWithFixedColumn = ({ ...args }) => {
   );
   const [data] = useState(makeData(10));
 
+  // Warnings are ordinarily silenced in storybook, add this to test
+  pkg._silenceWarnings(false);
+  // Enable feature flag for `useCustomizeColumns` hook
+  pkg.feature['Datagrid.useCustomizeColumns'] = true;
+  pkg._silenceWarnings(true);
+
   const datagridState = useDatagrid(
     {
       className: `c4p--datagrid__hidden--columns`,
@@ -337,6 +357,7 @@ export const ColumnCustomizationWithFixedColumnStory = prepareStory(
     },
     args: {
       ...columnCustomizationControlProps,
+      featureFlags: ['Datagrid.useCustomizeColumns'],
     },
   }
 );

packages/cloud-cognitive/src/components/Datagrid/Extensions/ExpandableRow/ExpandableRow.stories.js

@@ -1,6 +1,6 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 /**
- * Copyright IBM Corp. 2022, 2022
+ * Copyright IBM Corp. 2022, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -20,6 +20,7 @@ import { DatagridActions } from '../../utils/DatagridActions';
 import { DatagridPagination } from '../../utils/DatagridPagination';
 import { makeData } from '../../utils/makeData';
 import { ARG_TYPES } from '../../utils/getArgTypes';
+import { pkg } from '../../../../settings';
 
 export default {
   title: `${getStoryTitle(Datagrid.displayName)}/Extensions/ExpandableRow`,
@@ -28,6 +29,13 @@ export default {
     styles,
     docs: { page: mdx },
   },
+  argTypes: {
+    featureFlags: {
+      table: {
+        disable: true,
+      },
+    },
+  },
 };
 
 const defaultHeader = [
@@ -198,6 +206,12 @@ const ExpandedRows = ({ ...args }) => {
   const [data] = useState(makeData(10));
   const rows = React.useMemo(() => data, [data]);
 
+  // Warnings are ordinarily silenced in storybook, add this to test.
+  pkg._silenceWarnings(false);
+  // Enable feature flag for `useExpandedRow` hook
+  pkg.feature['Datagrid.useExpandedRow'] = true;
+  pkg._silenceWarnings(true);
+
   const datagridState = useDatagrid(
     {
       columns,
@@ -236,5 +250,6 @@ export const ExpandableRowStory = prepareStory(BasicTemplateWrapper, {
   },
   args: {
     ...expandableRowControlProps,
+    featureFlags: ['Datagrid.useExpandedRow'],
   },
 });

packages/cloud-cognitive/src/components/Datagrid/Extensions/Filtering/Flyout.stories.js

@@ -20,6 +20,7 @@ import { makeData } from '../../utils/makeData';
 import { ARG_TYPES } from '../../utils/getArgTypes';
 import { DatagridActions } from '../../utils/DatagridActions';
 import { StatusIcon } from '../../../StatusIcon';
+import { pkg } from '../../../../settings';
 
 export default {
   title: `${getStoryTitle(Datagrid.displayName)}/Extensions/Filtering/Flyout`,
@@ -28,6 +29,13 @@ export default {
     styles,
     docs: { page: mdx },
   },
+  argTypes: {
+    featureFlags: {
+      table: {
+        disable: true,
+      },
+    },
+  },
 };
 
 const getBatchActions = () => {
@@ -153,6 +161,12 @@ const FilteringUsage = ({ defaultGridProps }) => {
   const columns = React.useMemo(() => headers, []);
   const [data] = useState(makeData(20));
 
+  // Warnings are ordinarily silenced in storybook, add this to test
+  pkg._silenceWarnings(false);
+  // Enable feature flag for `useFiltering` hook
+  pkg.feature['Datagrid.useFiltering'] = true;
+  pkg._silenceWarnings(true);
+
   const datagridState = useDatagrid(
     {
       columns,
@@ -310,6 +324,7 @@ export const FlyoutBatch = prepareStory(FilteringTemplateWrapper, {
       onFlyoutClose: action('onFlyoutClose'),
       filters,
     },
+    featureFlags: ['Datagrid.useFiltering'],
   },
 });
 

packages/cloud-cognitive/src/components/Datagrid/Extensions/InlineEdit/InlineEdit.stories.js

@@ -1,6 +1,6 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 /**
- * Copyright IBM Corp. 2022, 2022
+ * Copyright IBM Corp. 2022, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -31,6 +31,13 @@ export default {
     styles,
     docs: { page: mdx },
   },
+  argTypes: {
+    featureFlags: {
+      table: {
+        disable: true,
+      },
+    },
+  },
 };
 
 const sharedDatagridProps = {
@@ -84,6 +91,11 @@ const InlineEditUsage = ({ ...args }) => {
   const [data, setData] = useState(makeData(10));
   const columns = React.useMemo(() => getInlineEditColumns(), []);
 
+  // Warnings are ordinarily silenced in storybook, add this to test.
+  pkg._silenceWarnings(false);
+  pkg.feature['Datagrid.useInlineEdit'] = true;
+  pkg._silenceWarnings(true);
+
   const datagridState = useDatagrid(
     {
       columns,
@@ -151,5 +163,6 @@ export const InlineEditUsageStory = prepareStory(InlineEditTemplateWrapper, {
   },
   args: {
     ...inlineEditUsageControlProps,
+    featureFlags: ['Datagrid.useInlineEdit'],
   },
 });

packages/cloud-cognitive/src/components/Datagrid/Extensions/NestedRows/NestedRows.stories.js

@@ -1,6 +1,6 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 /**
- * Copyright IBM Corp. 2022, 2022
+ * Copyright IBM Corp. 2022, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -19,6 +19,7 @@ import mdx from '../../Datagrid.mdx';
 import { DatagridActions } from '../../utils/DatagridActions';
 import { makeData } from '../../utils/makeData';
 import { ARG_TYPES } from '../../utils/getArgTypes';
+import { pkg } from '../../../../settings';
 
 export default {
   title: `${getStoryTitle(Datagrid.displayName)}/Extensions/NestedRows`,
@@ -27,6 +28,13 @@ export default {
     styles,
     docs: { page: mdx },
   },
+  argTypes: {
+    featureFlags: {
+      table: {
+        disable: true,
+      },
+    },
+  },
 };
 
 const defaultHeader = [
@@ -146,6 +154,13 @@ const sharedDatagridProps = {
 const NestedRows = ({ ...args }) => {
   const columns = React.useMemo(() => defaultHeader, []);
   const [data] = useState(makeData(10, 5, 2, 2));
+
+  // Warnings are ordinarily silenced in storybook, add this to test
+  pkg._silenceWarnings(false);
+  // Enable feature flag for `useNestedRows` hook
+  pkg.feature['Datagrid.useNestedRows'] = true;
+  pkg._silenceWarnings(true);
+
   const datagridState = useDatagrid(
     {
       columns,
@@ -184,5 +199,6 @@ export const NestedRowsUsageStory = prepareStory(BasicTemplateWrapper, {
   },
   args: {
     ...nestedRowsControlProps,
+    featureFlags: ['Datagrid.useNestedRows'],
   },
 });

packages/cloud-cognitive/src/components/Datagrid/Extensions/RowActionButtons/RowActionButtons.stories.js

@@ -1,6 +1,6 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 /**
- * Copyright IBM Corp. 2022, 2022
+ * Copyright IBM Corp. 2022, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -27,6 +27,7 @@ import { DatagridActions } from '../../utils/DatagridActions';
 import { DatagridPagination } from '../../utils/DatagridPagination';
 import { makeData } from '../../utils/makeData';
 import { ARG_TYPES } from '../../utils/getArgTypes';
+import { pkg } from '../../../../settings';
 
 export default {
   title: `${getStoryTitle(Datagrid.displayName)}/Extensions/RowActionButtons`,
@@ -35,6 +36,13 @@ export default {
     styles,
     docs: { page: mdx },
   },
+  argTypes: {
+    featureFlags: {
+      table: {
+        disable: true,
+      },
+    },
+  },
 };
 
 const defaultHeader = [
@@ -166,6 +174,12 @@ const RowActionButtons = ({ ...args }) => {
   const [data] = useState(makeData(10));
   const rows = React.useMemo(() => data, [data]);
 
+  // Warnings are ordinarily silenced in storybook, add this to test.
+  pkg._silenceWarnings(false);
+  // Enable feature flag for `useActionsColumn` hook
+  pkg.feature['Datagrid.useActionsColumn'] = true;
+  pkg._silenceWarnings(true);
+
   const datagridState = useDatagrid(
     {
       columns,
@@ -208,6 +222,7 @@ export const RowActionButtonsUsageStory = prepareStory(
     },
     args: {
       ...rowActionButtonsProps,
+      featureFlags: ['Datagrid.useActionsColumn'],
     },
   }
 );

packages/cloud-cognitive/src/components/Datagrid/useActionsColumn.js

@@ -1,11 +1,11 @@
-/*
- * Licensed Materials - Property of IBM
- * 5724-Q36
- * (c) Copyright IBM Corp. 2021
- * US Government Users Restricted Rights - Use, duplication or disclosure
- * restricted by GSA ADP Schedule Contract with IBM Corp.
+/**
+ * Copyright IBM Corp. 2021, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
  */
-import React from 'react';
+
+import React, { useEffect } from 'react';
 import cx from 'classnames';
 import {
   IconSkeleton,
@@ -16,6 +16,10 @@ import { pkg } from '../../settings';
 const blockClass = `${pkg.prefix}--datagrid`;
 
 const useActionsColumn = (hooks) => {
+  useEffect(() => {
+    pkg.checkReportFeatureEnabled('Datagrid.useActionsColumn');
+  }, []);
+
   const useAttachActionsOnInstance = (instance) => {
     const { rowActions, isFetching, selectedFlatRows } = instance;
 

packages/cloud-cognitive/src/components/Datagrid/useCustomizeColumns.js

@@ -1,17 +1,22 @@
 /**
- * Copyright IBM Corp. 2022, 2022
+ * Copyright IBM Corp. 2022, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
 import * as React from 'react';
+import { pkg } from '../../settings';
 import {
   CustomizeColumnsTearsheetWrapper,
   ToggleButtonWrapper,
 } from './Datagrid/addons/CustomizeColumns';
 
 const useCustomizeColumns = (hooks) => {
+  React.useEffect(() => {
+    pkg.checkReportFeatureEnabled('Datagrid.useCustomizeColumns');
+  }, []);
+
   const [isTearsheetOpen, setIsTearsheetOpen] = React.useState(false);
   hooks.useInstance.push((instance) => {
     const { customizeColumnsProps } = instance;

packages/cloud-cognitive/src/components/Datagrid/useExpandedRow.js

@@ -1,15 +1,20 @@
-/*
- * Licensed Materials - Property of IBM
- * 5724-Q36
- * (c) Copyright IBM Corp. 2020
- * US Government Users Restricted Rights - Use, duplication or disclosure
- * restricted by GSA ADP Schedule Contract with IBM Corp.
+/**
+ * Copyright IBM Corp. 2020, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
  */
-import { useState } from 'react';
+
+import { useEffect, useState } from 'react';
+import { pkg } from '../../settings';
 import DatagridExpandedRow from './Datagrid/DatagridExpandedRow';
 import useRowExpander from './useRowExpander';
 
 const useExpandedRow = (hooks) => {
+  useEffect(() => {
+    pkg.checkReportFeatureEnabled('Datagrid.useExpandedRow');
+  }, []);
+
   useRowExpander(hooks);
   const useInstance = (instance) => {
     const { rows, expandedContentHeight, ExpandedRowContentComponent } =