From 769b1bb40ec636ddbe0bd1d1960d50c1a069b541 Mon Sep 17 00:00:00 2001 From: Drew Date: Mon, 14 Oct 2024 21:23:31 +0000 Subject: [PATCH] u --- .../static/css/_icons.scss | 5 + .../static/images/icons/ExportMetadata.svg | 5 + .../ExportMetadataIcon/index.tsx | 93 +++++++++++++++++++ .../ExportMetadataIcon/styles.scss | 30 ++++++ .../static/js/config/config-default.ts | 3 + .../static/js/config/config-types.ts | 10 ++ .../static/js/config/config-utils.ts | 7 ++ .../static/js/pages/TableDetailPage/index.tsx | 4 + 8 files changed, 157 insertions(+) create mode 100644 frontend/amundsen_application/static/images/icons/ExportMetadata.svg create mode 100644 frontend/amundsen_application/static/js/components/ExportMetadata/ExportMetadataIcon/index.tsx create mode 100644 frontend/amundsen_application/static/js/components/ExportMetadata/ExportMetadataIcon/styles.scss diff --git a/frontend/amundsen_application/static/css/_icons.scss b/frontend/amundsen_application/static/css/_icons.scss index 5145c650e1..1aba790f97 100644 --- a/frontend/amundsen_application/static/css/_icons.scss +++ b/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'); diff --git a/frontend/amundsen_application/static/images/icons/ExportMetadata.svg b/frontend/amundsen_application/static/images/icons/ExportMetadata.svg new file mode 100644 index 0000000000..cbf537e6e1 --- /dev/null +++ b/frontend/amundsen_application/static/images/icons/ExportMetadata.svg @@ -0,0 +1,5 @@ + + + ExportMetadata + + \ No newline at end of file diff --git a/frontend/amundsen_application/static/js/components/ExportMetadata/ExportMetadataIcon/index.tsx b/frontend/amundsen_application/static/js/components/ExportMetadata/ExportMetadataIcon/index.tsx new file mode 100644 index 0000000000..e5e549267c --- /dev/null +++ b/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 { + + 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) => { + e.stopPropagation(); + e.preventDefault(); + + const { tableData } = this.props; + + const exportedMetadata: Record[] = []; + + if (tableData) { + + tableData.columns.forEach(column => { + let rowData: Record = {}; + 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 ( +
+ +
+ ); + } +} + +export default ExportMetadataIcon; \ No newline at end of file diff --git a/frontend/amundsen_application/static/js/components/ExportMetadata/ExportMetadataIcon/styles.scss b/frontend/amundsen_application/static/js/components/ExportMetadata/ExportMetadataIcon/styles.scss new file mode 100644 index 0000000000..4d4a38d6ea --- /dev/null +++ b/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; + } + } + } +} diff --git a/frontend/amundsen_application/static/js/config/config-default.ts b/frontend/amundsen_application/static/js/config/config-default.ts index a18185653c..7507db9324 100644 --- a/frontend/amundsen_application/static/js/config/config-default.ts +++ b/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', diff --git a/frontend/amundsen_application/static/js/config/config-types.ts b/frontend/amundsen_application/static/js/config/config-types.ts index 0d1968419b..6078b22e2f 100644 --- a/frontend/amundsen_application/static/js/config/config-types.ts +++ b/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. * diff --git a/frontend/amundsen_application/static/js/config/config-utils.ts b/frontend/amundsen_application/static/js/config/config-utils.ts index d714e78467..ab097b7bc4 100644 --- a/frontend/amundsen_application/static/js/config/config-utils.ts +++ b/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 */ diff --git a/frontend/amundsen_application/static/js/pages/TableDetailPage/index.tsx b/frontend/amundsen_application/static/js/pages/TableDetailPage/index.tsx index f32de5967e..89b1e0007e 100644 --- a/frontend/amundsen_application/static/js/pages/TableDetailPage/index.tsx +++ b/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} /> +