Add configuration panel for Application Credentials

[allenporter]

Proposed change

Add a configuration panel for Application Credentials which allow users to configure OAuth Client ID and OAuth Client
Secret for an integration using the user interface.

Work in progress:

• determine correct place for this in the UI (arbitrary placeholder for now, asked for input in #devs_us)
• add core support for an integration (e.g. xbox)
• add core websocket for returning supported integrations
• render integrations drop down or search in fronted UI
• support for deleting an integration
• special display of imported credentials vs user added credentials

Type of change

• Dependency upgrade
• Bugfix (non-breaking change which fixes an issue)
• New feature (thank you!)
• Breaking change (fix/feature causing existing functionality to break)
• Code quality improvements to existing code or addition of tests

Example configuration

Additional information

• This PR fixes or closes issue: fixes #
• This PR is related to issue or discussion: Add application credentials platform core#69148 Revisit rules for OAuth usage in config flow (for Google) architecture#692
• Link to documentation pull request:

Checklist

• The code change is tested and works locally.
• There is no commented out code in this PR.
• Tests have been added to verify that the new code works.

If user exposed functionality or configuration variables are added/changed:

• Documentation added/updated for www.home-assistant.io

[zsarnett]

@matthiasdebaat Let's talk about this. Not sure where this should be. The configuration sections are all changing so this will definitely not stay where is but maybe move to the system tab 🤷

[allenporter]

@matthiasdebaat Let's talk about this. Not sure where this should be. The configuration sections are all changing so this will definitely not stay where is but maybe move to the system tab 🤷

Thanks, really appreciate this. I'll continue to work on the functionality, thought just wanted to flag this early.

[allenporter]

@matthiasdebaat Let's talk about this. Not sure where this should be. The configuration sections are all changing so this will definitely not stay where is but maybe move to the system tab 🤷

Thanks, really appreciate this. I'll continue to work on the functionality, thought just wanted to flag this early.

@zsarnett i saw you landed a config revamp. Do you have a more well formed opinion now of where this should land, or otherwise have any principles regarding the most recent revamp?

I still have other pieces to iterate on fix up but thought I would ask while this was top of mind.

[allenporter]

@matthiasdebaat Let's talk about this. Not sure where this should be. The configuration sections are all changing so this will definitely not stay where is but maybe move to the system tab 🤷

Thanks, really appreciate this. I'll continue to work on the functionality, thought just wanted to flag this early.

@zsarnett i saw you landed a config revamp. Do you have a more well formed opinion now of where this should land, or otherwise have any principles regarding the most recent revamp?

I still have other pieces to iterate on fix up but thought I would ask while this was top of mind.

I just rebased and can see how System makes sense given it seems like we've found a place to put low level things like this. I'm going to go ahead and move this there optimistically, given I think I can see where you're going with this, but happy to put this wherever makes sense.

[zsarnett]

Hey @allenporter , Sorry I should have sent a message yesterday. We believe the best place for this will be in an Overflow menu on the Integrations, Devices, Entities, and Helpers page. The overflow menu can link your configuration page but will not be included in the tabs above

[allenporter]

Oh no problem! Thanks for that, it makes sense to me as this is definitely integration related, and the only thing holding be back from placing it there was that it didn't seem anywhere near big enough to be on its own tab.

My frontend development skills are definitely still in the range of "copying from existing examples". Is there prior art you can point me at I can borrow from? or maybe i can grab time with you to discuss in more detail an approach? As an example of the types if things i'm not sure how to navigate (so to speak): i was playing with this in server section and had a little trouble figuring out the right layout to use with the right set of things i need (e.g. fab, tabs, data table, header labels, etc) as nothing existing seemed to have that combination, then had a little trouble knowing when to reuse vs when to go custom.

[zsarnett]

Similar to the help icon except you will need to use an overflow button

https://github.com/home-assistant/frontend/blob/dev/src/panels/config/automation/ha-automation-picker.ts#L246-L251

Overflow Icon Button
https://github.com/home-assistant/frontend/blob/dev/src/panels/config/dashboard/ha-config-dashboard.ts#L157-L171

[zsarnett]

Something like this

  <ha-button-menu
    corner="BOTTOM_START"
    slot="toolbar-icon"
    activatable
  >
    <ha-icon-button
      slot="trigger"
      .label=${this.hass.localize("ui.common.menu")}
      .path=${mdiDotsVertical}
    ></ha-icon-button>
    <ha-clickable-list-item
      @click=${this._entryClicked}
      href="/config/lovelace/resources"
      aria-label=${this.hass.localize(
        "ui.panel.config.lovelace.resources.caption"
      )}
    >
      ${this.hass.localize(
        "ui.panel.config.lovelace.resources.caption"
      )}
    </ha-clickable-list-item>
  </ha-button-menu>

[allenporter]

Thank you that was extremely helpful. I am hitting a couple layout issues, still working through.

The overflow menu looks good ✅

though it does not expand quite right ❓

And in narrow mode it looks good on 3 tabs ✅

However on the integrations tab it gets out of place ❌

[zsarnett]

I'll try to take a look this weekend or Monday

[allenporter]

No rush, I also need to do one last selector for an integration drop down

[matthiasdebaat]

Awesome work @allenporter!

[zsarnett]

I messed up the git commands but should be all fixed up now. Your commits are all the first commit now... Sorry about that. But the overflow should be good

[allenporter]

@zsarnett 🔥 🔥🔥🔥!!!! thank you, so kind of you. I now will work on making the integration selector and take out of draft.

[zsarnett]

When the backend gets merged can you set it back to ready for review?

[allenporter]

When the backend gets merged can you set it back to ready for review?

Core PR said: Great! Can be merged when frontend PR is happy with this.
home-assistant/core#69148 (review)

So figured i'd get your pulse before actually merging.

[allenporter]

Whoops, noticed I had a lint error, fixed.