Public URLs Table UI

[lovincyrus]

Closes #5328

This PR adds a new public URLs table to the project settings page.

• Rename CreateShareableURLForm.svelte references
• Add project settings tab (only accessible by admin)
• Create /[org]/[project]/-/settings
• Check table columns
• Style settings page (left side nav, content)
• Once a URL is created, a toast notification should appear saying, "Go to Public URLs."
• Check table actions for deletion
• Enable /${organization}/-/settings
• Refetch queries after creating/deleting public URL
• Rerender magic auth tokens after deletion
• Blocked by https://github.com/rilldata/rill-private-issues/issues/642
• Row click to open public URL
• Support forward cursor-based pagination
• Make column name clickable
• Convert actions row to dot icon menu
• Add public URL name edit to the creation flow
• Add new Public URL name column
• https://www.figma.com/design/Qt6EyotCBS3V6O31jVhMQ7/RILL?node-id=13077-805393&node-type=frame&t=A7iL1ItEjIm3473q-0
• Handle no token, no URL case
• Confirm deletion
• Address feedback
• Check pagination
• Rename title → name in magic auth token in the API and database (Public URLs Table UI #5366 (comment))
• Use dashboard name for "Dashboard name" col
• Revisit pagination controls based on https://www.figma.com/design/Qt6EyotCBS3V6O31jVhMQ7/RILL?node-id=15019-622855&node-type=frame&t=ZKlKJUwaeOWIUQdh-0
• actions menu https://www.figma.com/design/Qt6EyotCBS3V6O31jVhMQ7/RILL?node-id=16418-896007&node-type=symbol&t=y9nsmi8GgKDf9iL2-0
• add previousPageToken
• change 'name' back to 'title' in the magic auth token Public URLs Table UI #5366 (comment)
• delete confirmation dialog
• support scrolling
• consider createInfiniteQuery
• revisit to remove createdOn if possible
• sticky?

Ability to edit name to the public URL creation

Support title in magic auth token to display Public URL name in the management table
34b4171

export interface V1MagicAuthToken {
  id?: string;
  projectId?: string;
  url?: string;
  token?: string;
  createdOn?: string;
  expiresOn?: string;
  usedOn?: string;
  createdByUserId?: string;
  createdByUserEmail?: string;
  attributes?: V1MagicAuthTokenAttributes;
  metricsView?: string;
  metricsViewFilter?: V1Expression;
  metricsViewFields?: string[];
  state?: string;
+ title?: string;
}

[begelundmuller]

@lovincyrus This PR has now added support for accessing the full URLs of previously created shareable URLs: #5621. You can access the URLs in the url property in the objects returned from the ListMagicAuthTokensRequest RPC.

One thing to be aware of – the url will only be available for newly created shareable URLs, not for ones created before this PR. So the UI will need to handle that case gracefully.

[lovincyrus]

Demo:

CleanShot.2024-09-10.at.09.44.13.mp4

[lovincyrus]

the url will only be available for newly created shareable URLs, not for ones created before this PR. So the UI will need to handle that case gracefully.

Sanity check, @jkhwu - since this is a fairly new feature, I think it's okay to say that we don't need to handle the case for the previously created public URLs. If we do want to handle the case, here's what the empty case looks like:

Update 1: I realized To create a public URL, click the Share button. can be misleading in the context of project settings.
Update 2: Updated the copy

[jkhwu]

Watched the demo and it looks good to me @lovincyrus . The empty state that you proposed looks fine to me, good copy decisions.

[ericpgreen2]

UXQA –

• I have a table of previously-created Public URLs. It's confusing that the row has a "pointer" cursor, yet clicking on the row does nothing. See Jam.
• We should use the dashboard title, if one exists, else fallback to the name
• It's unclear to me how these URLs are sorted. After creating a URL, I wasn't sure where I'd find it in the list. (CC @jkhwu)
  
• I deleted a bunch of URLs, then the "Public URL deleted" notification hung on the screen:
  
• When there are more than 20 URLs, the table doesn't offer pagination or somehow indicate that there more results not shown. (CC @jkhwu)
• It'd be nice if we could use an <a> tag to navigate the URL, so that on:hover the browser shows the URL in the bottom-left corner. Rather than the whole row being clickable, I wonder if we should have a column with a button that says "Copy URL". (CC @jkhwu)

[lovincyrus]

Tagging @begelundmuller and @pjain1 for a review - I've added title support to the magic auth token for displaying the Public URL name in the management table. Ref: 34b4171

export interface V1MagicAuthToken {
  id?: string;
  projectId?: string;
  url?: string;
  token?: string;
  createdOn?: string;
  expiresOn?: string;
  usedOn?: string;
  createdByUserId?: string;
  createdByUserEmail?: string;
  attributes?: V1MagicAuthTokenAttributes;
  metricsView?: string;
  metricsViewFilter?: V1Expression;
  metricsViewFields?: string[];
  state?: string;
+ title?: string;
}

Originally, I added title for the dashboard title, but after discussions with Janet and Eric O, we also need an additional column for 'Public URL name'.

Should I instead add two more fields to support those requirements?

export interface V1MagicAuthToken {
  id?: string;
  projectId?: string;
  url?: string;
  token?: string;
  createdOn?: string;
  expiresOn?: string;
  usedOn?: string;
  createdByUserId?: string;
  createdByUserEmail?: string;
  attributes?: V1MagicAuthTokenAttributes;
  metricsView?: string;
  metricsViewFilter?: V1Expression;
  metricsViewFields?: string[];
  state?: string;
+ urlName?: string;
+ dashboardName?: string;
}

[begelundmuller]

The changes here look good to me. About this:

Originally, I added title for the dashboard title, but after discussions with Janet and Eric O, we also need an additional column for 'Public URL name'.

Should I instead add two more fields to support those requirements?

It makes sense to give the public URL a name, but I don't think we should add extra fields for capturing the dashboard title. It may be edited and would get out of sync.

You can either do a separate request at render time to get the dashboard title (slow for large lists), or would have to limit to showing just the public URL title and dashboard name.

[lovincyrus]

Latest demo:

I've added a forward cursor-based paginated table to display the public URLs. As you can see, we only have a next button. That is because we only get nextPageToken in the API response.

Here is the figma mock for reference: https://www.figma.com/design/Qt6EyotCBS3V6O31jVhMQ7/RILL?node-id=15019-622855&node-type=frame&t=YcDxSNiwCIjVJkiZ-0

CleanShot.2024-09-12.at.10.28.30.mp4

[lovincyrus]

@ericpgreen2 Please report any anomalies if you find any in the previously generated public URLs.

[ericpgreen2]

@ericpgreen2 Please report any anomalies if you find any in the previously generated public URLs.

Here are what the previously-created URLs look like:

No anomalies per se, but there's no an obvious link available to click. I supposed I was envisioning an explicit "Copy link" button being in-line, not hidden behind a dropdown menu.

[lovincyrus]

@ericpgreen2 Please report any anomalies if you find any in the previously generated public URLs.

Here are what the previously-created URLs look like:

No anomalies per se, but there's no an obvious link available to click. I supposed I was envisioning an explicit "Copy link" button being in-line, not hidden behind a dropdown menu.

Sweet! I've hidden the ability to copy URL based on the availability of the constructed url. The previously created public urls will have undefined url, as per #5366 (comment).

Quick note - if url is available, the public url name cell will be clickable and there is a Copy menu item in the actions dropdown.

Re: "not hidden behind a dropdown menu." — I've already synced with @jkhwu and @ericokuma extensively on the consistency of actions ui in our table components. We will use 3 dots icon in the public URL management table.

[lovincyrus]

Makes sense. I was going to switch to infinite scrolling anyway. Hmm, this PR would definitely benefit from an endpoint that allows createInfiniteQuery (I'll explore this) and a server-side sortBy, sortOrder, and query. @begelundmuller

Yeah that should be possible, there's some good inspiration for that in the Google API style guide as well:

• https://cloud.google.com/apis/design/design_patterns#sorting_order
• https://google.aip.dev/160

Is this high priority? It's not a quick change (probably a day or so of effort).

Not a high priority. For context, I would say these features will be needed in the project settings subpages (public URLs, environment variables, user management, etc.) as we expand our coverage for table component.

[ericpgreen2]

This is great! Nice work 🙌

[ericokuma]

Looks great, good work here @lovincyrus !