fix: Getting tooltip on edit button of Column Description if un-editable (#511)

* passing edit text and url to ColumnList

* Added unit test case

amundsen_application/static/js/components/TableDetail/ColumnList/index.tsx

@@ -6,10 +6,14 @@ import './styles.scss';
 
 interface ColumnListProps {
   columns?: TableColumn[];
+  editText?: string;
+  editUrl?: string;
 }
 
 const ColumnList: React.SFC<ColumnListProps> = ({
   columns,
+  editText,
+  editUrl,
 }: ColumnListProps) => {
   if (columns.length < 1) {
     return <div />;
@@ -17,7 +21,13 @@ const ColumnList: React.SFC<ColumnListProps> = ({
   }
 
   const columnList = columns.map((entry, index) => (
-    <ColumnListItem key={`column:${index}`} data={entry} index={index} />
+    <ColumnListItem
+      key={`column:${index}`}
+      data={entry}
+      index={index}
+      editText={editText}
+      editUrl={editUrl}
+    />
   ));
 
   return <ul className="column-list list-group">{columnList}</ul>;
@@ -25,6 +35,8 @@ const ColumnList: React.SFC<ColumnListProps> = ({
 
 ColumnList.defaultProps = {
   columns: [] as TableColumn[],
+  editText: '',
+  editUrl: '',
 };
 
 export default ColumnList;

amundsen_application/static/js/components/TableDetail/ColumnListItem/index.spec.tsx

@@ -7,6 +7,7 @@ import {
   ColumnListItemProps,
   mapDispatchToProps,
 } from 'components/TableDetail/ColumnListItem';
+import EditableSection from 'components/common/EditableSection';
 import ColumnStats from 'components/TableDetail/ColumnStats';
 import AppConfig from 'config/config';
 import * as UtilMethods from 'ducks/utilMethods';
@@ -34,6 +35,8 @@ describe('ColumnListItem', () => {
       },
       index: 0,
       openRequestDescriptionDialog: jest.fn(),
+      editText: 'Click to edit discription in source',
+      editUrl: 'source/test_column_name',
       ...propOverrides,
     };
 
@@ -126,6 +129,19 @@ describe('ColumnListItem', () => {
       expect(newWrapper.find(ColumnStats).exists()).toBe(true);
     });
 
+    it('renders EditableSection with correct edit text and Url when expanded', () => {
+      instance.setState({ isExpanded: true });
+      const newWrapper = shallow(instance.render());
+      expect(newWrapper.find(EditableSection).exists()).toBe(true);
+      const editableSection = newWrapper.find(EditableSection);
+      expect(editableSection.props()).toMatchObject({
+        title: 'Description',
+        readOnly: !props.data.is_editable,
+        editText: props.editText,
+        editUrl: props.editUrl,
+      });
+    });
+
     describe('when not expanded', () => {
       let newWrapper;
       beforeAll(() => {

amundsen_application/static/js/components/TableDetail/ColumnListItem/index.tsx

@@ -26,6 +26,8 @@ interface DispatchFromProps {
 interface OwnProps {
   data: TableColumn;
   index: number;
+  editText: string;
+  editUrl: string;
 }
 
 interface ColumnListItemState {
@@ -170,6 +172,8 @@ export class ColumnListItem extends React.Component<
                 <EditableSection
                   title="Description"
                   readOnly={!metadata.is_editable}
+                  editText={this.props.editText}
+                  editUrl={this.props.editUrl}
                 >
                   <ColumnDescEditableText
                     columnIndex={this.props.index}

amundsen_application/static/js/components/TableDetail/index.tsx

@@ -135,12 +135,18 @@ export class TableDetail extends React.Component<
     return `${params.database}://${params.cluster}.${params.schema}/${params.table}`;
   }
 
-  renderTabs() {
+  renderTabs(editText, editUrl) {
     const tabInfo = [];
 
     // Default Column content
     tabInfo.push({
-      content: <ColumnList columns={this.props.tableData.columns} />,
+      content: (
+        <ColumnList
+          columns={this.props.tableData.columns}
+          editText={editText}
+          editUrl={editUrl}
+        />
+      ),
       key: 'columns',
       title: `Columns (${this.props.tableData.columns.length})`,
     });
@@ -307,7 +313,9 @@ export class TableDetail extends React.Component<
                 </section>
               ))}
             </aside>
-            <main className="right-panel">{this.renderTabs()}</main>
+            <main className="right-panel">
+              {this.renderTabs(editText, editUrl)}
+            </main>
           </div>
         </div>
       );