u

frontend/amundsen_application/static/css/_icons.scss

@@ -78,6 +78,11 @@ width: $icon-size;
     mask-image: url('../images/icons/Alert-Triangle.svg');
 }
 
+&.icon-export-metadata {
+    -webkit-mask-image: url('../images/icons/ExportMetadata.svg');
+    mask-image: url('../images/icons/ExportMetadata.svg');
+}
+
 &.icon-bookmark {
     -webkit-mask-image: url('../images/icons/Favorite.svg');
     mask-image: url('../images/icons/Favorite.svg');

frontend/amundsen_application/static/js/components/ExportMetadata/ExportMetadataIcon/index.tsx

@@ -0,0 +1,93 @@
+// Copyright Contributors to the Amundsen project.
+// SPDX-License-Identifier: Apache-2.0
+
+import * as React from 'react';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+
+import { logClick } from 'utils/analytics';
+
+import { ResourceType, TableMetadata } from 'interfaces';
+
+import { exportEnabled } from 'config/config-utils';
+
+import './styles.scss';
+
+import Papa from 'papaparse';
+
+interface StateFromProps {
+  tableData: TableMetadata;
+}
+
+export type ExportMetadataIconProps = StateFromProps;
+
+export class ExportMetadataIcon extends React.Component<ExportMetadataIconProps> {
+
+  triggerDownload = (csv, filename) => {
+    const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
+    const link = document.createElement('a');
+    link.href = URL.createObjectURL(blob);
+    link.setAttribute('download', filename);
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  };
+
+  handleClick = (e: React.MouseEvent<HTMLElement>) => {
+    e.stopPropagation();
+    e.preventDefault();
+
+    const { tableData } = this.props;
+
+    const exportedMetadata: Record<string, any>[] = [];
+
+    if (tableData) {
+
+      tableData.columns.forEach(column => {
+        let rowData: Record<string, any> = {};
+        rowData['column_key'] = column.key;
+        rowData['column_name'] = column.name;
+        rowData['column_data_type'] = column.col_type;
+        rowData['column_description'] = column.description;
+        let column_badges: string[] = [];
+        column.badges.forEach(badge => {
+          if (badge.badge_name) {
+            column_badges.push(badge.badge_name);
+          }
+        });
+        rowData['column_badges'] = column_badges;
+
+        exportedMetadata.push(rowData);
+      });
+
+      const csv = Papa.unparse(exportedMetadata);
+      this.triggerDownload(csv, `export_metadata.${tableData.database}.${tableData.cluster}.${tableData.schema}.${tableData.name}.csv`);
+    }
+
+
+    logClick(e, {
+      label: 'Export Metadata',
+      target_id: `export-metadata-button`,
+    });
+  };
+
+  render() {
+    const { tableData } = this.props;
+
+    return (
+      <div
+        className={'export-metadata-icon'}
+        onClick={this.handleClick}
+      >
+        <img
+          className={
+            'icon icon-export-metadata'
+          }
+          alt=""
+        />
+      </div>
+    );
+  }
+}
+
+export default ExportMetadataIcon;

frontend/amundsen_application/static/js/components/ExportMetadata/ExportMetadataIcon/styles.scss

@@ -0,0 +1,30 @@
+
+@import 'variables';
+
+.export-metadata-icon {
+  border-radius: 50%;
+  cursor: pointer;
+  display: inline-block;
+  height: 32px;
+  margin-left: 4px;
+  padding: 4px;
+  vertical-align: top;
+  width: 32px;
+
+  &:hover,
+  &:focus {
+    background-color: $body-bg-tertiary;
+  }
+
+  .icon {
+    margin: 0;
+
+    &.icon-export-metadata {
+      &,
+      &:hover,
+      &:focus {
+        background-color: $stroke !important;
+      }
+    }
+  }
+}

frontend/amundsen_application/static/js/config/config-default.ts

@@ -166,6 +166,9 @@ const configDefault: AppConfig = {
   bookmarks: {
     enabled: true,
   },
+  export: {
+    enabled: true,
+  },
   navLinks: [
     {
       href: '/announcements',

frontend/amundsen_application/static/js/config/config-types.ts

@@ -37,6 +37,7 @@ export interface AppConfig {
   logoTitle: string;
   footerContentHtml: string;
   bookmarks: BookmarksFeaturesConfig;
+  export: ExportFeaturesConfig;
   mailClientFeatures: MailClientFeaturesConfig;
   navAppSuite: VisualLinkConfig[] | null;
   navLinks: LinkConfig[];
@@ -398,6 +399,15 @@ interface BookmarksFeaturesConfig {
   enabled: boolean;
 }
 
+/**
+ * ExportFeaturesConfig - Enable/disable UI features related to the export
+ *
+ * enabled - Enables the export feature
+ */
+interface ExportFeaturesConfig {
+  enabled: boolean;
+}
+
 /**
  * TableProfileConfig - Customize the "Table Profile" section of the "Table Details" page.
  *

frontend/amundsen_application/static/js/config/config-utils.ts

@@ -297,6 +297,13 @@ export function bookmarksEnabled(): boolean {
   return AppConfig.bookmarks.enabled;
 }
 
+/**
+ * Returns whether or not export features should be enabled
+ */
+export function exportEnabled(): boolean {
+  return AppConfig.export.enabled;
+}
+
 /**
  * Returns whether or not dashboard features should be shown
  */

frontend/amundsen_application/static/js/pages/TableDetailPage/index.tsx

@@ -50,6 +50,7 @@ import ColumnDetailsPanel from 'features/ColumnList/ColumnDetailsPanel';
 
 import { AlertList } from 'components/Alert';
 import BookmarkIcon from 'components/Bookmark/BookmarkIcon';
+import ExportMetadataIcon from 'components/ExportMetadata/ExportMetadataIcon';
 import Breadcrumb from 'features/Breadcrumb';
 import EditableSection from 'components/EditableSection';
 import EditableText from 'components/EditableText';
@@ -772,6 +773,9 @@ export class TableDetail extends React.Component<
                 bookmarkKey={data.key}
                 resourceType={ResourceType.table}
               />
+              <ExportMetadataIcon
+                tableData={data}
+              />
               <div className="header-details">
                 <TableHeaderBullets
                   database={data.database}