chore: datagrid deprecation notice (#6419)

* chore: datagrid deprecation notice * fix: additional deprecation items * fix: avt url * fix: avt urls * fix: deprecation wording * fix: deprecation wording * fix: update story structure
carbon-design-system · Nov 14, 2024 · ac62359 · ac62359
1 parent 2909e38
commit ac62359
Show file tree

Hide file tree

Showing 17 changed files with 63 additions and 17 deletions.
diff --git a/e2e/components/Datagrid/Datagrid-test.avt.e2e.js b/e2e/components/Datagrid/Datagrid-test.avt.e2e.js
@@ -16,7 +16,7 @@ test.describe('Datagrid @avt', () => {
   test('@avt-basic-usage', async ({ page }) => {
     await visitStory(page, {
       component: 'Datagrid',
-      id: 'ibm-products-components-datagrid--basic-usage',
+      id: 'deprecated-datagrid-datagrid--basic-usage',
       globals: {
         carbonTheme: 'white',
       },
@@ -27,7 +27,7 @@ test.describe('Datagrid @avt', () => {
   test('@avt-open-and-dismiss-sidepanel-onRowClick', async ({ page }) => {
     await visitStory(page, {
       component: 'Datagrid',
-      id: 'ibm-products-components-datagrid-clickablerow--clickable-row-story',
+      id: 'deprecated-datagrid-datagrid-clickablerow--clickable-row-story',
       globals: {
         carbonTheme: 'white',
       },

diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid.docs-page.js b/packages/ibm-products/src/components/Datagrid/Datagrid.docs-page.js
@@ -13,6 +13,7 @@ import toolbarScreenshot from './storybook-assets/datagrid-actions-example.png';
 
 const DocsPage = () => (
   <StoryDocsPage
+    deprecationNotice={`\`Datagrid\` is deprecated and will be moving to an example-based approach. For more information, please refer to the [migration docs](https://github.com/carbon-design-system/tanstack-carbon).`}
     blocks={[
       {
         title: 'Getting started',

diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid.stories.jsx b/packages/ibm-products/src/components/Datagrid/Datagrid.stories.jsx
@@ -36,9 +36,10 @@ import { Wrapper } from './utils/Wrapper';
 import DocsPage from './Datagrid.docs-page';
 import { getBatchActions } from './utils/getBatchActions';
 import { StatusIcon } from '../StatusIcon';
+import { Annotation } from '../../../../core/.storybook/Annotation';
 
 export default {
-  title: 'IBM Products/Components/Datagrid',
+  title: 'Deprecated/Datagrid/Datagrid',
   component: Datagrid,
   tags: ['autodocs'],
   parameters: {
@@ -56,6 +57,27 @@ export default {
     },
   },
   excludeStories: ['getBatchActions'],
+  decorators: [
+    (story) => (
+      <div>
+        <Annotation
+          type="deprecation-notice"
+          text={
+            <div>
+              This component is deprecated and will be moving to an
+              example-based approach. For more information, please refer to the{' '}
+              <a href="https://github.com/carbon-design-system/tanstack-carbon">
+                migration documentation
+              </a>
+              .
+            </div>
+          }
+        >
+          {story()}
+        </Annotation>
+      </div>
+    ),
+  ],
 };
 
 const getColumns = (rows) => {

diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid.test.js b/packages/ibm-products/src/components/Datagrid/Datagrid.test.js
@@ -917,7 +917,10 @@ const ActionsColumnExample = ({
 
 beforeAll(() => {
   jest.spyOn(global.console, 'warn').mockImplementation((message) => {
-    if (!message.includes('componentWillReceiveProps')) {
+    if (
+      !message.includes('componentWillReceiveProps') &&
+      !message.includes('deprecated')
+    ) {
       global.console.warn(message);
     }
   });
@@ -1171,7 +1174,8 @@ describe(componentName, () => {
         );
         expect(container.children.length).toEqual(0);
         jest.spyOn(console, 'error').mockRestore();
-      }
+      },
+      2
     );
   });
 

diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid/Datagrid.tsx b/packages/ibm-products/src/components/Datagrid/Datagrid/Datagrid.tsx
@@ -34,6 +34,7 @@ export interface DatagridProps {
 
 /**
  * The `Datagrid` component is an extension of Carbon's DataTable component. At the most basic level, the `Datagrid` component takes in columns and rows and renders a data table. There is a set of data table extensions which this component provides support for, these can be found [here](https://pages.github.ibm.com/carbon/ibm-products/components/datagrid/overview/). This component is data driven and allows you to choose what pieces will be included based on the hooks/plugins that are provided.
+ * @deprecated
  */
 export let Datagrid = React.forwardRef(
   (
@@ -104,6 +105,12 @@ export let Datagrid = React.forwardRef(
   }
 );
 
+/**@ts-ignore*/
+Datagrid.deprecated = {
+  level: 'warn',
+  details: `For more information, please refer to the migration docs https://github.com/carbon-design-system/tanstack-carbon`,
+};
+
 // Return a placeholder if not released and not enabled by feature flag
 Datagrid = pkg.checkComponentEnabled(Datagrid, componentName);
 

diff --git a/packages/ibm-products/src/components/Datagrid/Extensions/AiLabel/AiLabel.stories.jsx b/packages/ibm-products/src/components/Datagrid/Extensions/AiLabel/AiLabel.stories.jsx
@@ -26,7 +26,7 @@ import { StoryDocsPage } from '../../../../global/js/utils/StoryDocsPage';
 import { ExampleAILabel } from '../../utils/ExampleAILabel';
 
 export default {
-  title: 'IBM Products/Components/Datagrid/AILabel',
+  title: 'Deprecated/Datagrid/Datagrid/AILabel',
   component: Datagrid,
   tags: ['autodocs'],
   parameters: {

diff --git a/...ges/ibm-products/src/components/Datagrid/Extensions/ClickableRow/ClickableRow.stories.jsx b/...ges/ibm-products/src/components/Datagrid/Extensions/ClickableRow/ClickableRow.stories.jsx
@@ -30,7 +30,7 @@ import { SidePanel } from '../../../SidePanel';
 import { StoryDocsPage } from '../../../../global/js/utils/StoryDocsPage';
 
 export default {
-  title: 'IBM Products/Components/Datagrid/ClickableRow',
+  title: 'Deprecated/Datagrid/Datagrid/ClickableRow',
   component: Datagrid,
   tags: ['autodocs'],
   parameters: {

diff --git a/...ts/src/components/Datagrid/Extensions/ColumnCustomization/ColumnCustomization.stories.jsx b/...ts/src/components/Datagrid/Extensions/ColumnCustomization/ColumnCustomization.stories.jsx
@@ -30,7 +30,7 @@ import { FeatureFlags } from '../../../FeatureFlags';
 import { WithFeatureFlags } from '../../../../../../core/.storybook/WithFeatureFlags';
 
 export default {
-  title: 'IBM Products/Components/Datagrid/ColumnCustomization',
+  title: 'Deprecated/Datagrid/Datagrid/ColumnCustomization',
   component: Datagrid,
   tags: ['autodocs'],
   parameters: {

diff --git a/...ges/ibm-products/src/components/Datagrid/Extensions/EditableCell/EditableCell.stories.jsx b/...ges/ibm-products/src/components/Datagrid/Extensions/EditableCell/EditableCell.stories.jsx
@@ -28,7 +28,7 @@ const blockClass = `${pkg.prefix}--datagrid`;
 const storybookBlockClass = `storybook-${blockClass}__validation-code-snippet`;
 
 export default {
-  title: 'IBM Products/Components/Datagrid/EditableCell',
+  title: 'Deprecated/Datagrid/Datagrid/EditableCell',
   component: Datagrid,
   tags: ['autodocs'],
   parameters: {

diff --git a/...s/ibm-products/src/components/Datagrid/Extensions/ExpandableRow/ExpandableRow.stories.jsx b/...s/ibm-products/src/components/Datagrid/Extensions/ExpandableRow/ExpandableRow.stories.jsx
@@ -26,7 +26,7 @@ import { DocsPage } from './ExpandableRow.docs-page';
 import { usePrefix } from '../../../../global/js/hooks';
 
 export default {
-  title: 'IBM Products/Components/Datagrid/ExpandableRow',
+  title: 'Deprecated/Datagrid/Datagrid/ExpandableRow',
   component: Datagrid,
   tags: ['autodocs'],
   parameters: {

diff --git a/packages/ibm-products/src/components/Datagrid/Extensions/Filtering/Flyout.stories.jsx b/packages/ibm-products/src/components/Datagrid/Extensions/Filtering/Flyout.stories.jsx
@@ -18,7 +18,7 @@ import { getDateFormat } from '../../utils/getDateFormat';
 import { getFilterProps } from './Panel.stories';
 
 export default {
-  title: 'IBM Products/Components/Datagrid/Filtering/Flyout',
+  title: 'Deprecated/Datagrid/Datagrid/Filtering/Flyout',
   component: Datagrid,
   tags: ['autodocs'],
   parameters: {

diff --git a/packages/ibm-products/src/components/Datagrid/Extensions/Filtering/Panel.stories.jsx b/packages/ibm-products/src/components/Datagrid/Extensions/Filtering/Panel.stories.jsx
@@ -18,7 +18,7 @@ import { FilteringUsage } from '../../utils/FilteringUsage';
 import { getDateFormat } from '../../utils/getDateFormat';
 
 export default {
-  title: 'IBM Products/Components/Datagrid/Filtering/Panel',
+  title: 'Deprecated/Datagrid/Datagrid/Filtering/Panel',
   component: Datagrid,
   tags: ['autodocs'],
   parameters: {

diff --git a/packages/ibm-products/src/components/Datagrid/Extensions/NestedRows/NestedRows.stories.jsx b/packages/ibm-products/src/components/Datagrid/Extensions/NestedRows/NestedRows.stories.jsx
@@ -33,7 +33,7 @@ const sharedArgTypes = {
 };
 
 export default {
-  title: 'IBM Products/Components/Datagrid/NestedRows',
+  title: 'Deprecated/Datagrid/Datagrid/NestedRows',
   component: Datagrid,
   tags: ['autodocs'],
   parameters: {

diff --git a/...products/src/components/Datagrid/Extensions/RowActionButtons/RowActionButtons.stories.jsx b/...products/src/components/Datagrid/Extensions/RowActionButtons/RowActionButtons.stories.jsx
@@ -25,7 +25,7 @@ import { makeData } from '../../utils/makeData';
 import { ARG_TYPES } from '../../utils/getArgTypes';
 
 export default {
-  title: 'IBM Products/Components/Datagrid/RowActionButtons',
+  title: 'Deprecated/Datagrid/Datagrid/RowActionButtons',
   component: Datagrid,
   tags: ['autodocs'],
   parameters: {

diff --git a/...oducts/src/components/Datagrid/Extensions/RowHeightSettings/RowHeightSettings.stories.jsx b/...oducts/src/components/Datagrid/Extensions/RowHeightSettings/RowHeightSettings.stories.jsx
@@ -19,7 +19,7 @@ import { ARG_TYPES } from '../../utils/getArgTypes';
 import { StoryDocsPage } from '../../../../global/js/utils/StoryDocsPage';
 
 export default {
-  title: 'IBM Products/Components/Datagrid/RowHeightSettings',
+  title: 'Deprecated/Datagrid/Datagrid/RowHeightSettings',
   component: Datagrid,
   tags: ['autodocs'],
   parameters: {

diff --git a/packages/ibm-products/src/global/js/utils/StoryDocsPage.js b/packages/ibm-products/src/global/js/utils/StoryDocsPage.js
@@ -97,6 +97,7 @@ export const StoryDocsPage = ({
   blocks,
   omitCodedExample,
   omitUnreferencedStories,
+  deprecationNotice,
 }) => {
   const { csfFile } = useOf('meta', ['meta']);
 
@@ -140,6 +141,12 @@ export const StoryDocsPage = ({
         )
       ) : null}
 
+      {deprecationNotice && (
+        <>
+          <h2 style={{ marginTop: '16px' }}>Deprecation notice</h2>
+          <Markdown>{deprecationNotice}</Markdown>
+        </>
+      )}
       <h2 style={{ marginTop: guidelinesHref ? '16px' : '' }}>
         Table of contents
       </h2>
@@ -290,6 +297,10 @@ StoryDocsPage.propTypes = {
       }),
     })
   ),
+  /**
+   * Designates a special top level area for important notices or messaging like deprecation
+   */
+  deprecationNotice: PropTypes.string,
   /**
    * Set to true if no published example exists (all components and patterns should have an example)
    */

diff --git a/packages/ibm-products/src/global/js/utils/test-helper.js b/packages/ibm-products/src/global/js/utils/test-helper.js
@@ -138,11 +138,12 @@ const makeMatcherArray = (args) =>
  * argument.
  * @param {Function} test the test function to call, during which the call to
  * console.warn will be expected.
+ * @param {number} calls by default the test assumes warn will be called a single time, but it's possible it'll be called more than once
  */
-export const expectWarn = (message, test) => {
+export const expectWarn = (message, test, calls = 1) => {
   const warn = jest.spyOn(console, 'warn').mockImplementation(jest.fn());
   const result = test();
-  expect(warn).toBeCalledTimes(1);
+  expect(warn).toBeCalledTimes(calls);
   // expect(warn).toHaveBeenCalledWith(...makeMatcherArray(message));
   warn.mockRestore();
   return result;