[frontend] replace location popover with link to filebrowser

Author: bjornalm

apps/metastore/src/metastore/templates/metastore.mako

@@ -263,11 +263,16 @@ ${ components.menubar(is_embeddable) }
       ${_('and stored in')}
       <!-- ko if: details.properties.format === 'kudu' -->
         <div>${_('Kudu')}</div>
+      <!-- /ko -->
+      <!-- ko if: details.properties.format !== 'kudu' -->
+        <!-- ko if: hdfs_link -->
+          <div>          
+            <a data-bind="hueLink: hdfs_link, attr: { title: $parent.catalogEntry.getHdfsFilePath() }" target="_blank" >${_('location')}</a>
+          </div>
+        <!-- /ko -->
+        <!-- ko ifnot: hdfs_link -->
+          <div>${_('unknown location')}</div>
         <!-- /ko -->
-        <!-- ko if: details.properties.format !== 'kudu' -->
-        <div>
-          <a href="javascript: void(0);" data-bind="storageContextPopover: { path: hdfs_link.replace('/filebrowser/view=', ''), offset: { left: 5 } }"> ${_('location')}</a>
-        </div>
       <!-- /ko -->
     </div>
     <!-- /ko -->
@@ -480,12 +485,14 @@ ${ components.menubar(is_embeddable) }
             <div>${ _('Owner') }</div>
             <div><span data-bind="text: owner_name ? owner_name : '${ _ko('None') }'"></span> <span data-bind="visible: owner_type">(<span data-bind="text: owner_type"></span>)</span></div>
           </div>
-          <div class="metastore-property">
-            <div>${ _('Location') }</div>
-            <div>
-              <a href="javascript: void(0);" data-bind="storageContextPopover: { path: hdfs_link.replace('/filebrowser/view=', ''), offset: { left: 5 } }"> ${_('Location')}</a>
+          <!-- ko if: hdfs_link  -->
+            <div class="metastore-property">
+              <div>${ _('Location') }</div>
+              <div>              
+                <a data-bind="hueLink: hdfs_link, attr: { title: $parent.catalogEntry.getHdfsFilePath() }" target="_blank" >${_('location')}</a>
+              </div>
             </div>
-          </div>
+          <!-- /ko -->
         </div>
       </div>
       <!-- ko with: parameters -->

desktop/core/src/desktop/js/catalog/DataCatalogEntry.ts

@@ -1414,6 +1414,11 @@ export default class DataCatalogEntry {
     return false;
   }
 
+  getHdfsFilePath(): string {
+    const hdfs_link = this.analysis?.hdfs_link || '';
+    return hdfs_link.replace('/filebrowser/view=', '');
+  }
+
   /**
    * Returns true if the entry is an Iceberg table
    */

desktop/core/src/desktop/js/catalog/dataCatalogEntry.test.ts

@@ -69,7 +69,7 @@ describe('dataCatalogEntry.ts', () => {
           partition_keys: [],
           cols: [{ name: 'i', type: 'int', comment: '' }],
           path_location: 'test',
-          hdfs_link: '/test',
+          hdfs_link: '/filebrowser/view=/warehouse/tablespace/managed/hive/sample_07',
           is_view: false,
           properties: [],
           details: {
@@ -94,6 +94,13 @@ describe('dataCatalogEntry.ts', () => {
       expect(entry.isIcebergTable()).toBeTruthy();
     });
 
+    it('should return the hdfs path based on the hdfs_link', async () => {
+      emptyAnalysisApiSpy();
+      const entry = await getEntry('someDb.someTable');
+      await entry.getAnalysis();
+      expect(entry.getHdfsFilePath()).toEqual('/warehouse/tablespace/managed/hive/sample_07');
+    });
+
     it('rejects a cachedOnly request if there is no previous promise', async () => {
       emptyAnalysisApiSpy();
       const entryA = await getEntry('someDb.someTable');