Add overflow menu to discovered integration item (#11165)

Co-authored-by: Zack Barett <arnett.zackary@gmail.com>

src/panels/config/integrations/ha-config-flow-card.ts

@@ -1,6 +1,7 @@
 import { css, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
+import { mdiDotsVertical, mdiOpenInNew } from "@mdi/js";
 import { fireEvent } from "../../../common/dom/fire_event";
 import {
   ATTENTION_SOURCES,
@@ -50,17 +51,62 @@ export class HaConfigFlowCard extends LitElement {
             }`
           )}
         ></mwc-button>
+        <ha-button-menu corner="BOTTOM_START">
+          <ha-icon-button
+            slot="trigger"
+            .label=${this.hass.localize("ui.common.menu")}
+            .path=${mdiDotsVertical}
+          ></ha-icon-button>
+          ${this.flow.context.configuration_url
+            ? html`<a
+                href=${this.flow.context.configuration_url.replace(
+                  /^homeassistant:\/\//,
+                  ""
+                )}
+                rel="noreferrer"
+                target=${this.flow.context.configuration_url.startsWith(
+                  "homeassistant://"
+                )
+                  ? "_self"
+                  : "_blank"}
+              >
+                <mwc-list-item hasMeta>
+                  ${this.hass.localize(
+                    "ui.panel.config.integrations.config_entry.open_configuration_url"
+                  )}<ha-svg-icon
+                    slot="meta"
+                    .path=${mdiOpenInNew}
+                  ></ha-svg-icon>
+                </mwc-list-item>
+              </a>`
+            : ""}
+          ${this.manifest
+            ? html`<a
+                href=${this.manifest.documentation}
+                rel="noreferrer"
+                target="_blank"
+              >
+                <mwc-list-item hasMeta>
+                  ${this.hass.localize(
+                    "ui.panel.config.integrations.config_entry.documentation"
+                  )}<ha-svg-icon
+                    slot="meta"
+                    .path=${mdiOpenInNew}
+                  ></ha-svg-icon>
+                </mwc-list-item>
+              </a>`
+            : ""}
           ${DISCOVERY_SOURCES.includes(this.flow.context.source) &&
           this.flow.context.unique_id
             ? html`
-              <mwc-button
-                @click=${this._ignoreFlow}
-                .label=${this.hass.localize(
+                <mwc-list-item @click=${this._ignoreFlow}>
+                  ${this.hass.localize(
                     "ui.panel.config.integrations.ignore.ignore"
                   )}
-              ></mwc-button>
+                </mwc-list-item>
               `
             : ""}
+        </ha-button-menu>
       </ha-integration-action-card>
     `;
   }
@@ -114,6 +160,10 @@ export class HaConfigFlowCard extends LitElement {
       --state-color: var(--primary-color);
       --text-on-state-color: var(--text-primary-color);
     }
+    a {
+      text-decoration: none;
+      color: var(--primary-color);
+    }
   `;
 }
 

src/translations/en.json

@@ -2478,7 +2478,8 @@
               "setup_retry": "Retrying setup",
               "not_loaded": "Not loaded",
               "failed_unload": "Failed to unload"
-            }
+            },
+            "open_configuration_url": "Visit device"
           },
           "config_flow": {
             "aborted": "Aborted",