feat: surface column level badges (#706)

* adding badges to column and starting badges column work in table Signed-off-by: Allison Suarez Miranda <asuarezmiranda@lyft.com> * tests and adding column badges logic Signed-off-by: Allison Suarez Miranda <asuarezmiranda@lyft.com> * fixed test issues and fixed search bug by forcing badge text to be lower case when searching Signed-off-by: Allison Suarez Miranda <asuarezmiranda@lyft.com> * lint Signed-off-by: Allison Suarez Miranda <asuarezmiranda@lyft.com> * fixed method isse Signed-off-by: Allison Suarez Miranda <asuarezmiranda@lyft.com> * betterer fix Signed-off-by: Allison Suarez Miranda <asuarezmiranda@lyft.com> * lint Signed-off-by: Allison Suarez Miranda <asuarezmiranda@lyft.com> * adding badges to column and starting badges column work in table Signed-off-by: Allison Suarez Miranda <asuarezmiranda@lyft.com> * tests and adding column badges logic Signed-off-by: Allison Suarez Miranda <asuarezmiranda@lyft.com> * fixed test issues and fixed search bug by forcing badge text to be lower case when searching Signed-off-by: Allison Suarez Miranda <asuarezmiranda@lyft.com> * lint Signed-off-by: Allison Suarez Miranda <asuarezmiranda@lyft.com> * build(deps): bump throttle-debounce in /amundsen_application/static (#711) Signed-off-by: Marcos Iglesias Valle <golodhros@gmail.com> * build(deps-dev): bump @babel/preset-react (#710) Signed-off-by: Marcos Iglesias Valle <golodhros@gmail.com> * build(deps-dev): bump enzyme-adapter-react-16 (#707) Signed-off-by: Marcos Iglesias Valle <golodhros@gmail.com> * build(deps-dev): bump jest in /amundsen_application/static (#708) Bumps [jest](https://github.com/facebook/jest) from 26.4.2 to 26.5.0. - [Release notes](https://github.com/facebook/jest/releases) - [Changelog](https://github.com/facebook/jest/blob/master/CHANGELOG.md) - [Commits](jestjs/jest@v26.4.2...v26.5.0) Signed-off-by: dependabot-preview[bot] <support@dependabot.com> Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com> * chore: Updates Storybook to version 6 (#712) * Removing story.name Signed-off-by: Marcos Iglesias <miglesiasvalle@lyft.com> * Adding pre-push hook Signed-off-by: Marcos Iglesias <miglesiasvalle@lyft.com> * Updating Flag and Card Signed-off-by: Marcos Iglesias <miglesiasvalle@lyft.com> * Updating Storybook to version 6 Signed-off-by: Marcos Iglesias <miglesiasvalle@lyft.com> * Updating betterer results Signed-off-by: Marcos Iglesias <miglesiasvalle@lyft.com> * Update eslint config Signed-off-by: Marcos Iglesias <miglesiasvalle@lyft.com> * Update eslint config Signed-off-by: Marcos Iglesias <miglesiasvalle@lyft.com> * Removing pre-push hook as it runs on .src-custom Signed-off-by: Marcos Iglesias <miglesiasvalle@lyft.com> * fixed method isse Signed-off-by: Allison Suarez Miranda <asuarezmiranda@lyft.com> * betterer fix Signed-off-by: Allison Suarez Miranda <asuarezmiranda@lyft.com> * lint Signed-off-by: Allison Suarez Miranda <asuarezmiranda@lyft.com> * added new table with 4 columns to storybook Signed-off-by: Allison Suarez Miranda <asuarezmiranda@lyft.com> * removed weird package file Signed-off-by: Allison Suarez Miranda <asuarezmiranda@lyft.com> * removed ternary Signed-off-by: Allison Suarez Miranda <asuarezmiranda@lyft.com> * refactored badges, need to clean up all leftover code Signed-off-by: Allison Suarez Miranda <asuarezmiranda@lyft.com> * bits of cleanup and rename donClick to handleClick Signed-off-by: Allison Suarez Miranda <asuarezmiranda@lyft.com> * lint fix Signed-off-by: Allison Suarez Miranda <asuarezmiranda@lyft.com> * added text utils tests Signed-off-by: Allison Suarez Miranda <asuarezmiranda@lyft.com> * got convertText out of Flag Signed-off-by: Allison Suarez Miranda <asuarezmiranda@lyft.com> * lint fixes Signed-off-by: Allison Suarez Miranda <asuarezmiranda@lyft.com> * removed important Signed-off-by: Allison Suarez Miranda <asuarezmiranda@lyft.com> * oopsie Signed-off-by: Allison Suarez Miranda <asuarezmiranda@lyft.com> * Update amundsen_application/static/js/utils/textUtils.ts Co-authored-by: Marcos Iglesias <190833+Golodhros@users.noreply.github.com> * removed comments and renamed onClick Signed-off-by: Allison Suarez Miranda <asuarezmiranda@lyft.com> * type issue Signed-off-by: Allison Suarez Miranda <asuarezmiranda@lyft.com> Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com> Co-authored-by: Marcos Iglesias <190833+Golodhros@users.noreply.github.com>
amundsen-io · Oct 10, 2020 · 0bdb4eb · 0bdb4eb
1 parent 86594b9
commit 0bdb4eb
Show file tree

Hide file tree

Showing 23 changed files with 565 additions and 307 deletions.
diff --git a/amundsen_application/static/.storybook/main.ts b/amundsen_application/static/.storybook/main.ts
@@ -4,13 +4,12 @@
 import customWebpackConfig from './webpack.config.js';
 import MiniCssExtractPlugin from 'mini-css-extract-plugin';
 
-
 module.exports = {
   stories: ['../js/**/*.story.tsx'],
   addons: [
     '@storybook/addon-actions',
     '@storybook/addon-links',
-    '@storybook/addon-knobs'
+    '@storybook/addon-knobs',
   ],
   webpackFinal: (config) => {
     return {
@@ -25,10 +24,10 @@ module.exports = {
       },
       plugins: [
         new MiniCssExtractPlugin({
-            filename: "[name].[contenthash].css",
+          filename: '[name].[contenthash].css',
         }),
-        ...config.plugins
-      ]
+        ...config.plugins,
+      ],
     };
   },
 };
diff --git a/amundsen_application/static/.storybook/preview.ts b/amundsen_application/static/.storybook/preview.ts
@@ -3,11 +3,7 @@
 
 import '../css/styles.scss';
 
-const categoriesOrder = [
-  'Overview',
-  'Attributes',
-  'Components',
-];
+const categoriesOrder = ['Overview', 'Attributes', 'Components'];
 
 export const parameters = {
   options: {

diff --git a/amundsen_application/static/js/components/ColumnList/index.spec.tsx b/amundsen_application/static/js/components/ColumnList/index.spec.tsx
@@ -8,10 +8,8 @@ import configureStore from 'redux-mock-store';
 import { mocked } from 'ts-jest/utils';
 
 import { SortDirection } from 'interfaces';
-import {
-  notificationsEnabled,
-  getTableSortCriterias,
-} from 'config/config-utils';
+import { BadgeStyle } from 'config/config-types';
+import * as ConfigUtils from 'config/config-utils';
 
 import globalState from 'fixtures/globalState';
 import ColumnList, { ColumnListProps } from '.';
@@ -22,8 +20,14 @@ import TestDataBuilder from './testDataBuilder';
 
 jest.mock('config/config-utils');
 
-const mockedNotificationsEnabled = mocked(notificationsEnabled, true);
-const mockedGetTableSortCriterias = mocked(getTableSortCriterias, true);
+const mockedNotificationsEnabled = mocked(
+  ConfigUtils.notificationsEnabled,
+  true
+);
+const mockedGetTableSortCriterias = mocked(
+  ConfigUtils.getTableSortCriterias,
+  true
+);
 const dataBuilder = new TestDataBuilder();
 const middlewares = [];
 const mockStore = configureStore(middlewares);
@@ -232,7 +236,7 @@ describe('ColumnList', () => {
       });
     });
 
-    describe('when columns with serveral stats including usage are passed', () => {
+    describe('when columns with several stats including usage are passed', () => {
       const { columns } = dataBuilder.withSeveralStats().build();
 
       it('should render the usage column', () => {
@@ -277,5 +281,59 @@ describe('ColumnList', () => {
         expect(actual).toEqual(expected);
       });
     });
+
+    describe('when columns with badges are passed', () => {
+      const { columns } = dataBuilder.withBadges().build();
+      const getBadgeConfigSpy = jest.spyOn(ConfigUtils, 'getBadgeConfig');
+      getBadgeConfigSpy.mockImplementation((badgeName: string) => {
+        return {
+          displayName: badgeName + ' test name',
+          style: BadgeStyle.PRIMARY,
+        };
+      });
+
+      it('should render the rows', () => {
+        const { wrapper } = setup({ columns });
+        const expected = columns.length;
+        const actual = wrapper.find('.table-detail-table .ams-table-row')
+          .length;
+
+        expect(actual).toEqual(expected);
+      });
+
+      it('should render the badge column', () => {
+        const { wrapper } = setup({ columns });
+        const expected = columns.length;
+        const actual = wrapper.find('.badge-list').length;
+
+        expect(actual).toEqual(expected);
+      });
+
+      describe('number of bages', () => {
+        it('should render no badges in the first cell', () => {
+          const { wrapper } = setup({ columns });
+          const expected = 0;
+          const actual = wrapper.find('.badge-list').at(0).find('.flag').length;
+
+          expect(actual).toEqual(expected);
+        });
+
+        it('should render one badge in the second cell', () => {
+          const { wrapper } = setup({ columns });
+          const expected = 1;
+          const actual = wrapper.find('.badge-list').at(1).find('.flag').length;
+
+          expect(actual).toEqual(expected);
+        });
+
+        it('should render three badges in the third cell', () => {
+          const { wrapper } = setup({ columns });
+          const expected = 3;
+          const actual = wrapper.find('.badge-list').at(2).find('.flag').length;
+
+          expect(actual).toEqual(expected);
+        });
+      });
+    });
   });
 });
diff --git a/amundsen_application/static/js/components/ColumnList/index.tsx b/amundsen_application/static/js/components/ColumnList/index.tsx
@@ -24,8 +24,10 @@ import {
   RequestMetadataType,
   SortCriteria,
   SortDirection,
+  Badge,
 } from 'interfaces';
 
+import BadgeList from 'components/common/BadgeList';
 import ColumnType from './ColumnType';
 import ColumnDescEditableText from './ColumnDescEditableText';
 import { getStatsInfoText } from './utils';
@@ -82,6 +84,7 @@ type FormattedDataType = {
   name: string;
   sort_order: string;
   isEditable: boolean;
+  badges: Badge[];
 };
 
 type ExpandedRowProps = {
@@ -122,6 +125,15 @@ const getSortingFunction = (
     : stringSortingFunction;
 };
 
+const hasColumnWithBadge = (columns: TableColumn[]) => {
+  return columns.some((col) => {
+    if (col.badges) {
+      return col.badges.length > 0;
+    }
+    return false;
+  });
+};
+
 const getUsageStat = (item) => {
   const hasItemStats = !!item.stats.length;
 
@@ -200,6 +212,7 @@ const ColumnList: React.FC<ColumnListProps> = ({
   openRequestDescriptionDialog,
   sortBy = DEFAULT_SORTING,
 }: ColumnListProps) => {
+  const hasColumnBadges = hasColumnWithBadge(columns);
   const formattedData: FormattedDataType[] = columns.map((item, index) => {
     const hasItemStats = !!item.stats.length;
 
@@ -216,6 +229,7 @@ const ColumnList: React.FC<ColumnListProps> = ({
       sort_order: item.sort_order,
       usage: getUsageStat(item),
       stats: hasItemStats ? item.stats[0] : null,
+      badges: hasColumnBadges ? item.badges : [],
       action: item.name,
       name: item.name,
       isEditable: item.is_editable,
@@ -274,6 +288,18 @@ const ColumnList: React.FC<ColumnListProps> = ({
     ];
   }
 
+  if (hasColumnBadges) {
+    formattedColumns = [
+      ...formattedColumns,
+      {
+        title: 'Badges',
+        field: 'badges',
+        horAlign: TextAlignmentValues.left,
+        component: (values) => <BadgeList badges={values} />,
+      },
+    ];
+  }
+
   if (notificationsEnabled()) {
     formattedColumns = [
       ...formattedColumns,

diff --git a/amundsen_application/static/js/components/ColumnList/testDataBuilder.ts b/amundsen_application/static/js/components/ColumnList/testDataBuilder.ts
@@ -268,6 +268,89 @@ function TestDataBuilder(config = {}) {
     return new this.Klass(attr);
   };
 
+  this.withBadges = () => {
+    const attr = {
+      columns: [
+        {
+          col_type:
+            'struct<trigger_event:string,backfill:boolean,graphql_version:string>',
+          description: null,
+          is_editable: true,
+          name: 'complex_column_name_2',
+          sort_order: 1,
+          stats: [
+            {
+              end_epoch: 1600473600,
+              start_epoch: 1597881600,
+              stat_type: 'column_usage',
+              stat_val: '111',
+            },
+          ],
+          badges: [],
+        },
+        {
+          col_type: 'struct<code:string,timezone:string>',
+          description: null,
+          is_editable: true,
+          name: 'complex_column_name_3',
+          sort_order: 2,
+          stats: [
+            {
+              end_epoch: 1600473600,
+              start_epoch: 1597881600,
+              stat_type: 'test_stat',
+              stat_val: '000',
+            },
+            {
+              end_epoch: 1600473600,
+              start_epoch: 1597881600,
+              stat_type: 'column_usage',
+              stat_val: '222',
+            },
+          ],
+          badges: [
+            {
+              badge_name: 'Badge Name 1',
+              category: 'column',
+            },
+          ],
+        },
+        {
+          col_type:
+            'struct<route_id:string,shift:struct<shift_id:string,started_at:timestamp,ended_at:timestamp>>',
+          description: null,
+          is_editable: true,
+          name: 'complex_column_name_4',
+          sort_order: 3,
+          stats: [
+            {
+              end_epoch: 1600473600,
+              start_epoch: 1597881600,
+              stat_type: 'column_usage',
+              stat_val: '333',
+            },
+          ],
+          badges: [
+            {
+              badge_name: 'Badge Name 1',
+              category: 'column',
+            },
+            {
+              badge_name: 'Badge Name 2',
+              category: 'column',
+            },
+            {
+              badge_name: 'Badge Name 3',
+              category: 'column',
+            },
+          ],
+        },
+      ],
+    };
+
+    return new this.Klass(attr);
+  };
+
   this.withEmptyColumns = () => {
     const attr = { columns: [] };