Add file permissions to details view

[tomasmatus]

fixes: #565

Adds permissions column to details view with the ability to sort by permissions. Sorting is done by comparing permission octal values.

[tomasmatus]

I see that currently the text in tooltip doesn't match the mockup...

[garrett]

I see that currently the text in tooltip doesn't match the mockup...

Correct. Also the layout doesn't either. (Ideally, it'd use something like a grid to align.)

Here's how that looks for both the permissions and also date (showing that this could/should probably be reused):

To show what I mean about alignment, here's a zoom with guides to illustrate:

Despite the colons not matching (the leftmost guide is on the leftmost colon), you see that the actual values do match up. The reason for this is to make it easier to read and compare the values.

There are two simple ways to achieve this and have semantic meaning: using a description list in a grid or using a properly structured table. I've included both methods @ https://codepen.io/garrett/pen/yLdBOQr — the description list method is lighter weight and should be easier to implement.

The description list uses this HTML for the demo:

<dl class="keyvalue-alignment">
  <dt>Owner:</dt>
  <dl>read, write, access</dl>

  <dt>Group:</dt>
  <dl>read-only</dl>

  <dt>Others:</dt>
  <dl>no access</dl>
</dl>

And this CSS:

.keyvalue-alignment {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.5em;
}

(We'd ideally use PatternFly's spacer-sm in a var() instead of 0.5em. This simple demo doesn't use PatternFly.)

Both of these methods address having proper layout and semantic structure (that is: having meaning instead of having div soup).

Note: I'm not sure of a way to achieve this in PatternFly without pulling in a lot of extra style which would be rather heavy in a tooltip. Just like how PatternFly "Table" is not HTML table, but an very featureful version implemented with HTML table (plus a lot of extra CSS), PatternFly "Grid" layout is not CSS grid, but is a fixed 12 column grid layout. It is implemented a lot of style (including CSS grid, but a lot of other rules) that makes it work completely different from CSS grid, which makes it unsuitable. But that's OK... PatternFly — including PatternFly-React — is meant to be mixed and matched with standard HTML.