Ability to get breadcrumb and direct link from the object browser when unconnected

[ThomasG77]

My organization run a Minio instance I do not manage directly but I can ask for change if needed.

A real url as it's opendata is https://object.infra.data.gouv.fr/browser/cadastre/etalab-cadastre%2F2023-01-01%2Fshp%2Ffrance%2F

By default when not connected, I got the folowing

My issue is that I want to get the real file path because some of my users will prefer wget or curl approach or simple link in a browser instead of a "black box" that download a file. I also want breadcrumb path as it's annoying when browsing to not be able to come back except by clicking back button of the navigator.

I've done an external script for this purpose. I run it in my browser dev tools after loading the page. It's clearly dirty code as I know it would be possible to make better code modifying the Minio mds library and then object-browser.

It's more a proof of concept than a really usable thing for production. I want to gather feedback to know if it could be a good improvement

Each breadcrumb part send you to subpath URL

const hasExtension = (filename) => (filename.split('.').length > 1)
function createElementFromHTML(htmlString) {
  var div = document.createElement('div');
  div.innerHTML = htmlString.trim();

  // Change this to div.childNodes to support multiple top-level nodes.
  return div.firstChild;
}

function refreshLink() {
  const browserPosition = window.location.href.split('/').indexOf('browser')
  const browserBucketPath = window.location.href.split('/').slice(0, browserPosition + 2).join('/')
  const bucketName = window.location.href.split('/').slice(browserPosition + 1, browserPosition + 2)
  const subPath = window.location.href.split('/').slice(browserPosition + 2)[0]
  const encodedPath = window.location.href.split('/').slice(-1)[0]
  let breadcrumb = ''
  if (encodedPath !== bucketName) {
  	breadcrumb = `<a href="${browserBucketPath}">${bucketName}</a>` + '/' + decodeURIComponent(encodedPath.replace(/\+/g,  " "))
  	  .split('/')
  	  .filter(el => el !== '')
  	  .map((curr, idx, all) => {
        // console.log(curr, idx, all)
        const unencoded = all.slice(0, idx + 1).join('/') + '/'
        const newPath = browserBucketPath + '/' + encodeURIComponent(unencoded).replace(/'/g,"%27").replace(/"/g,"%22");
        return `<a href="${newPath}">${curr}</a>`
      })
      .join('/')
  }

  const screenTitle = document.querySelector('.screenTitle-container')
  const breadcrumbElement = document.querySelector('#breadcrumb')
  const breadcrumbHtml = `<div id="breadcrumb">${breadcrumb}</div>`
  if (breadcrumbElement) {
  	breadcrumbElement.innerHtml = breadcrumbHtml
  } else {
  	screenTitle.appendChild(createElementFromHTML(breadcrumbHtml))
  }
  
  const headerRow = document.querySelector('.ReactVirtualized__Table__headerRow')
  if (headerRow.children.length === 3) {
    headerRow.appendChild(createElementFromHTML(`<div aria-label="size" aria-sort="none" class="ReactVirtualized__Table__headerColumn headerItem titleHeader  ReactVirtualized__Table__sortableHeaderColumn" role="columnheader" style="flex: 0 1 100px;" tabindex="0"><div class=""><div class="">Real link</div></div></div>`))
  }
  
  const rowsContent = [...document.querySelector('#object-list-wrapper').querySelectorAll('span.fileNameText')];
  rowsContent.forEach(el => {
    let link = ''
    if (hasExtension(el.innerText)) {
      link = '<a href="' + browserBucketPath.replace('object.infra.data.gouv.fr','object.data.gouv.fr').split('/').filter(el => el != 'browser').join('/') + '/' + decodeURIComponent(encodedPath.replace(/\+/g,  " ")) + el.innerText + '"><span class="">Link</span></a>'
    }
    const row = el.closest('div[role="row"]')
    if (row.children.length === 3) {
      row.appendChild(createElementFromHTML(`<div aria-colindex="4" class="ReactVirtualized__Table__rowColumn" role="gridcell" style="overflow: hidden; flex: 0 1 100px;">${link}</div>`))
      console.log(el.innerText, hasExtension(el.innerText))
    }
  })
}

refreshLink()

The result looks like below

It's clearly about enhancements not a bug