[Agent Builder] base management UI for plugins

x-pack/platform/plugins/shared/agent_builder/public/application/components/agents/list/agents.tsx

@@ -27,6 +27,10 @@ const manageSkillsLabel = i18n.translate('xpack.agentBuilder.agents.manageSkills
   defaultMessage: 'Manage skills',
 });
 
+const managePluginsLabel = i18n.translate('xpack.agentBuilder.agents.managePluginsLabel', {
+  defaultMessage: 'Manage plugins',
+});
+
 export const AgentBuilderAgents = () => {
   const { euiTheme } = useEuiTheme();
   const { manageAgents } = useUiPrivileges();
@@ -63,6 +67,12 @@ export const AgentBuilderAgents = () => {
           >
             <EuiText size="s">{manageSkillsLabel}</EuiText>
           </EuiButtonEmpty>,
+          <EuiButtonEmpty
+            aria-label={managePluginsLabel}
+            href={createAgentBuilderUrl(appPaths.plugins.list)}
+          >
+            <EuiText size="s">{managePluginsLabel}</EuiText>
+          </EuiButtonEmpty>,
         ]
       : []),
   ];

x-pack/platform/plugins/shared/agent_builder/public/application/components/conversations/conversation_header/more_actions_button.tsx

@@ -75,6 +75,9 @@ const fullscreenLabels = {
   skills: i18n.translate('xpack.agentBuilder.conversationActions.skills', {
     defaultMessage: 'View all skills',
   }),
+  plugins: i18n.translate('xpack.agentBuilder.conversationActions.plugins', {
+    defaultMessage: 'View all plugins',
+  }),
   sources: i18n.translate('xpack.agentBuilder.conversationActions.sources', {
     defaultMessage: 'View all sources',
   }),
@@ -241,6 +244,15 @@ export const MoreActionsButton: React.FC<MoreActionsButtonProps> = ({ onRenameCo
           >
             {fullscreenLabels.skills}
           </EuiContextMenuItem>,
+          <EuiContextMenuItem
+            key="plugins"
+            icon="package"
+            onClick={closePopover}
+            href={createAgentBuilderUrl(appPaths.plugins.list)}
+            data-test-subj="agentBuilderActionsPlugins"
+          >
+            {fullscreenLabels.plugins}
+          </EuiContextMenuItem>,
         ]
       : []),
     ...(isDataSourcesEnabled

x-pack/platform/plugins/shared/agent_builder/public/application/components/plugins/install_from_url_modal.tsx

@@ -0,0 +1,84 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { useCallback, useState } from 'react';
+import {
+  EuiButton,
+  EuiButtonEmpty,
+  EuiFieldText,
+  EuiForm,
+  EuiFormRow,
+  EuiModal,
+  EuiModalBody,
+  EuiModalFooter,
+  EuiModalHeader,
+  EuiModalHeaderTitle,
+  useGeneratedHtmlId,
+} from '@elastic/eui';
+import { labels } from '../../utils/i18n';
+import { useInstallPluginFromUrl } from '../../hooks/plugins/use_install_plugin';
+
+interface InstallFromUrlModalProps {
+  onClose: () => void;
+}
+
+export const InstallFromUrlModal: React.FC<InstallFromUrlModalProps> = ({ onClose }) => {
+  const modalTitleId = useGeneratedHtmlId({ prefix: 'installFromUrlModal' });
+  const [url, setUrl] = useState('');
+
+  const { installFromUrl, isLoading } = useInstallPluginFromUrl({
+    onSuccess: () => onClose(),
+  });
+
+  const handleSubmit = useCallback(
+    async (e: React.FormEvent) => {
+      e.preventDefault();
+      if (!url.trim()) return;
+      await installFromUrl({ url: url.trim() });
+    },
+    [url, installFromUrl]
+  );
+
+  return (
+    <EuiModal aria-labelledby={modalTitleId} onClose={onClose}>
+      <EuiModalHeader>
+        <EuiModalHeaderTitle id={modalTitleId}>
+          {labels.plugins.installFromUrlModalTitle}
+        </EuiModalHeaderTitle>
+      </EuiModalHeader>
+      <EuiModalBody>
+        <EuiForm id="installFromUrlForm" component="form" onSubmit={handleSubmit}>
+          <EuiFormRow label={labels.plugins.urlFieldLabel} fullWidth>
+            <EuiFieldText
+              value={url}
+              onChange={(e) => setUrl(e.target.value)}
+              placeholder={labels.plugins.urlFieldPlaceholder}
+              fullWidth
+              disabled={isLoading}
+              data-test-subj="agentBuilderInstallPluginUrlField"
+            />
+          </EuiFormRow>
+        </EuiForm>
+      </EuiModalBody>
+      <EuiModalFooter>
+        <EuiButtonEmpty onClick={onClose} disabled={isLoading}>
+          {labels.plugins.cancelButton}
+        </EuiButtonEmpty>
+        <EuiButton
+          type="submit"
+          form="installFromUrlForm"
+          fill
+          isLoading={isLoading}
+          disabled={!url.trim()}
+          data-test-subj="agentBuilderInstallPluginSubmitButton"
+        >
+          {labels.plugins.installButton}
+        </EuiButton>
+      </EuiModalFooter>
+    </EuiModal>
+  );
+};

x-pack/platform/plugins/shared/agent_builder/public/application/components/plugins/install_plugin_button.tsx

@@ -0,0 +1,87 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { useCallback, useState } from 'react';
+import {
+  EuiButton,
+  EuiContextMenuItem,
+  EuiContextMenuPanel,
+  EuiPopover,
+  EuiText,
+} from '@elastic/eui';
+import useToggle from 'react-use/lib/useToggle';
+import { labels } from '../../utils/i18n';
+import { InstallFromUrlModal } from './install_from_url_modal';
+import { UploadPluginModal } from './upload_plugin_modal';
+
+type ModalType = 'url' | 'upload' | null;
+
+export const InstallPluginButton: React.FC = () => {
+  const [isPopoverOpen, togglePopover] = useToggle(false);
+  const [openModal, setOpenModal] = useState<ModalType>(null);
+
+  const closePopover = useCallback(() => togglePopover(false), [togglePopover]);
+
+  const handleOpenUrlModal = useCallback(() => {
+    closePopover();
+    setOpenModal('url');
+  }, [closePopover]);
+
+  const handleOpenUploadModal = useCallback(() => {
+    closePopover();
+    setOpenModal('upload');
+  }, [closePopover]);
+
+  const handleCloseModal = useCallback(() => {
+    setOpenModal(null);
+  }, []);
+
+  return (
+    <>
+      <EuiPopover
+        button={
+          <EuiButton
+            fill
+            iconType="plusInCircle"
+            iconSide="left"
+            onClick={togglePopover}
+            data-test-subj="agentBuilderInstallPluginButton"
+          >
+            <EuiText size="s">{labels.plugins.installPluginButton}</EuiText>
+          </EuiButton>
+        }
+        isOpen={isPopoverOpen}
+        closePopover={closePopover}
+        anchorPosition="downLeft"
+        panelPaddingSize="none"
+      >
+        <EuiContextMenuPanel
+          items={[
+            <EuiContextMenuItem
+              key="installFromUrl"
+              icon="link"
+              onClick={handleOpenUrlModal}
+              data-test-subj="agentBuilderInstallFromUrlMenuItem"
+            >
+              {labels.plugins.installFromUrlMenuItem}
+            </EuiContextMenuItem>,
+            <EuiContextMenuItem
+              key="uploadZip"
+              icon="exportAction"
+              onClick={handleOpenUploadModal}
+              data-test-subj="agentBuilderUploadPluginMenuItem"
+            >
+              {labels.plugins.uploadMenuItem}
+            </EuiContextMenuItem>,
+          ]}
+        />
+      </EuiPopover>
+      {openModal === 'url' && <InstallFromUrlModal onClose={handleCloseModal} />}
+      {openModal === 'upload' && <UploadPluginModal onClose={handleCloseModal} />}
+    </>
+  );
+};