Add namespace information to AppListItem

[smerschjohann]

Currently the application overview does not contain the namespace where the application is installed. This is ok for the namespace only view, but if you want to have an overview of all applications on the cluster (check the toggle "all namespaces"), this can lead to issues.

For example if you install redis and name it "redis" in multiple namespaces, you cannot differentiate them just by looking at the card. Instead you have to navigate into the details view to find more information on it.

I propose to change https://github.com/vmware-tanzu/kubeapps/blob/main/dashboard/src/components/AppList/AppListItem.tsx in such a way that either the title contains the namespace or place the info somewhere near the Helm-Chart informations

[absoludity]

Thanks @smerschjohann . Sounds sensible. Is this something you wanted to take a look at yourself? (We're happy to help you if so).

Might be worth a screenshot with examples of where you propose to add the namespace for each tile. I wonder if it should always be displayed, or just when looking at installed apps across all namespaces?

[smerschjohann]

Hi @absoludity,

I'm not really a frontend guy, but I can try ;)
I would keep it the same for "all namespace mode" and "single namespace mode", so show the namespace all the time.

I modified the html to show you two different suggestions:

So either add it to the title, but that might get a little long or add it as another line in the section below. What do you think?

[antgamdia]

Thanks for the screenshot with your proposal!
I'm for adding it as part of the details at the bottom.
The required changes (apart of updating the test cases, which you can run via yarn test) are as follows:

      info={
        <div>
          <span>Namespace: {app.installedPackageRef.context?.namespace}</span>  // <---
          <br /> // <---
          <span>
            App: {app.pkgDisplayName}{" "}
            {app.currentVersion?.appVersion
              ? `v${app.currentVersion.appVersion.replace(/^v/, "")}`
              : ""}
          </span>
          <br />
          <span>Package: {app.currentVersion?.pkgVersion}</span>
        </div>
      }

Looking forward to your contribution :) !!