From d6f32a0267e2062fb3fd746e1ce3823304bc0870 Mon Sep 17 00:00:00 2001 From: yyh <92089059+lyzno1@users.noreply.github.com> Date: Thu, 13 Aug 2026 06:44:02 +0000 Subject: [PATCH] refactor(web): migrate plugin icon commands (#40648) --- .../components/base/action-button/index.css | 60 ------------- .../plugins/base/key-value-item.tsx | 17 ++-- .../plugins/marketplace/search-box/index.tsx | 26 +++--- .../search-box/trigger/marketplace.tsx | 9 +- .../search-box/trigger/tool-selector.tsx | 9 +- .../authorize/add-oauth-button.tsx | 9 +- .../detail-header/__tests__/index.spec.tsx | 6 -- .../__tests__/index.spec.tsx | 4 +- .../multiple-tool-selector/index.tsx | 10 +-- .../operation-dropdown.tsx | 19 +++-- .../tool-selector/components/tool-item.tsx | 9 +- .../plugins/plugin-page/nav-operations.tsx | 14 ++-- .../plugin-page/plugin-sidecar-panel.tsx | 10 +-- .../plugin-tasks/__tests__/index.spec.tsx | 84 ++++++------------- .../task-status-indicator.module.css | 22 +++++ .../components/task-status-indicator.tsx | 65 ++++++-------- .../plugin-page/plugin-tasks/index.tsx | 35 ++++---- .../components/tools/marketplace/index.tsx | 10 +-- web/app/styles/tailwind-core.css | 1 - 19 files changed, 162 insertions(+), 257 deletions(-) delete mode 100644 web/app/components/base/action-button/index.css create mode 100644 web/app/components/plugins/plugin-page/plugin-tasks/components/task-status-indicator.module.css diff --git a/web/app/components/base/action-button/index.css b/web/app/components/base/action-button/index.css deleted file mode 100644 index 0dd5d82d940..00000000000 --- a/web/app/components/base/action-button/index.css +++ /dev/null @@ -1,60 +0,0 @@ -@utility action-btn { - @apply inline-flex cursor-pointer items-center justify-center text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary; - - &.action-btn-active { - @apply bg-state-accent-active text-text-accent hover:bg-state-accent-active-alt; - } - - &.action-btn-disabled { - @apply text-text-disabled; - } - - &.action-btn-destructive { - @apply bg-state-destructive-hover text-text-destructive; - } -} - -@utility action-btn-hover { - @apply bg-state-base-hover; -} - -@utility action-btn-disabled { - @apply cursor-not-allowed; - - &.action-btn { - @apply text-text-disabled; - } -} - -@utility action-btn-xl { - @apply h-9 w-9 rounded-lg p-2; -} - -@utility action-btn-l { - @apply h-8 w-8 rounded-lg p-1.5; -} - -@utility action-btn-m { - /* m is for the regular button */ - @apply h-6 w-6 rounded-lg p-0.5; -} - -@utility action-btn-s { - @apply h-5 w-5 rounded-[6px]; -} - -@utility action-btn-xs { - @apply h-4 w-4 rounded-sm p-0; -} - -@utility action-btn-active { - &.action-btn { - @apply bg-state-accent-active text-text-accent hover:bg-state-accent-active-alt; - } -} - -@utility action-btn-destructive { - &.action-btn { - @apply bg-state-destructive-hover text-text-destructive; - } -} diff --git a/web/app/components/plugins/base/key-value-item.tsx b/web/app/components/plugins/base/key-value-item.tsx index eae60f88c77..0c95c38b26f 100644 --- a/web/app/components/plugins/base/key-value-item.tsx +++ b/web/app/components/plugins/base/key-value-item.tsx @@ -1,11 +1,10 @@ 'use client' -import { Button } from '@langgenius/dify-ui/button' import { cn } from '@langgenius/dify-ui/cn' +import { IconButton } from '@langgenius/dify-ui/icon-button' import { Tooltip, TooltipContent, TooltipTrigger } from '@langgenius/dify-ui/tooltip' import copy from 'copy-to-clipboard' import { useCallback, useEffect, useId, useState } from 'react' import { useTranslation } from 'react-i18next' -import { CopyCheck } from '../../base/icons/src/vender/line/files' type Props = Readonly<{ label: string @@ -67,21 +66,19 @@ function KeyValueItem({ + {isCopied ? ( - + ) : ( )} - + } /> {tooltipLabel} diff --git a/web/app/components/plugins/marketplace/search-box/index.tsx b/web/app/components/plugins/marketplace/search-box/index.tsx index 54f6f8321a2..2a34bcc2bf5 100644 --- a/web/app/components/plugins/marketplace/search-box/index.tsx +++ b/web/app/components/plugins/marketplace/search-box/index.tsx @@ -1,7 +1,7 @@ 'use client' import type { Ref } from 'react' -import { Button } from '@langgenius/dify-ui/button' import { cn } from '@langgenius/dify-ui/cn' +import { IconButton } from '@langgenius/dify-ui/icon-button' import { useImperativeHandle, useRef } from 'react' import { useTranslation } from 'react-i18next' import Divider from '@/app/components/base/divider' @@ -89,18 +89,18 @@ function SearchBox({ placeholder={placeholder} /> {search && ( - + )} @@ -136,18 +136,18 @@ function SearchBox({ placeholder={placeholder} /> {search && ( - + )} {showTags && ( @@ -161,15 +161,15 @@ function SearchBox({ {supportAddCustomTool && (
- +
)} diff --git a/web/app/components/plugins/marketplace/search-box/trigger/marketplace.tsx b/web/app/components/plugins/marketplace/search-box/trigger/marketplace.tsx index 62ae04f6515..2762a969544 100644 --- a/web/app/components/plugins/marketplace/search-box/trigger/marketplace.tsx +++ b/web/app/components/plugins/marketplace/search-box/trigger/marketplace.tsx @@ -1,6 +1,7 @@ import type { Tag } from '../../../hooks' import { Button } from '@langgenius/dify-ui/button' import { cn } from '@langgenius/dify-ui/cn' +import { IconButton } from '@langgenius/dify-ui/icon-button' import { PopoverTrigger } from '@langgenius/dify-ui/popover' import { memo, useEffect, useRef } from 'react' import { useTranslation } from '#i18n' @@ -87,21 +88,21 @@ function MarketplaceTrigger({ } /> {!!selectedTagsLength && ( - + )} ) diff --git a/web/app/components/plugins/marketplace/search-box/trigger/tool-selector.tsx b/web/app/components/plugins/marketplace/search-box/trigger/tool-selector.tsx index 46bd73c9b70..31b68c09741 100644 --- a/web/app/components/plugins/marketplace/search-box/trigger/tool-selector.tsx +++ b/web/app/components/plugins/marketplace/search-box/trigger/tool-selector.tsx @@ -1,6 +1,7 @@ import type { Tag } from '../../../hooks' import { Button } from '@langgenius/dify-ui/button' import { cn } from '@langgenius/dify-ui/cn' +import { IconButton } from '@langgenius/dify-ui/icon-button' import { PopoverTrigger } from '@langgenius/dify-ui/popover' import { memo, useEffect, useRef } from 'react' import { useTranslation } from '#i18n' @@ -79,21 +80,21 @@ function ToolSelectorTrigger({ } /> {!!selectedTagsLength && ( - + )} ) diff --git a/web/app/components/plugins/plugin-auth/authorize/add-oauth-button.tsx b/web/app/components/plugins/plugin-auth/authorize/add-oauth-button.tsx index 60fd205fde5..92968eda47d 100644 --- a/web/app/components/plugins/plugin-auth/authorize/add-oauth-button.tsx +++ b/web/app/components/plugins/plugin-auth/authorize/add-oauth-button.tsx @@ -18,7 +18,7 @@ import OAuthClientSettings from './oauth-client-settings' export type AddOAuthButtonProps = { pluginPayload: PluginPayload - buttonVariant?: ButtonProps['variant'] + buttonVariant?: NonNullable buttonText?: string className?: string buttonLeftClassName?: string @@ -218,11 +218,12 @@ const AddOAuthButton = ({ dividerClassName, )} > - + )} {!renderTrigger && !isConfigured && ( diff --git a/web/app/components/plugins/plugin-detail-panel/detail-header/__tests__/index.spec.tsx b/web/app/components/plugins/plugin-detail-panel/detail-header/__tests__/index.spec.tsx index 83ab818f14a..6e4527265b6 100644 --- a/web/app/components/plugins/plugin-detail-panel/detail-header/__tests__/index.spec.tsx +++ b/web/app/components/plugins/plugin-detail-panel/detail-header/__tests__/index.spec.tsx @@ -44,12 +44,6 @@ vi.mock('@/utils/var', () => ({ getMarketplaceUrl: (path: string) => `https://marketplace.example.com${path}`, })) -vi.mock('@/app/components/base/action-button', () => ({ - default: ({ children, ...props }: React.ButtonHTMLAttributes) => ( - - ), -})) - vi.mock('@/app/components/base/badge', () => ({ default: ({ text, children }: { text?: React.ReactNode; children?: React.ReactNode }) => (
{text ?? children}
diff --git a/web/app/components/plugins/plugin-detail-panel/multiple-tool-selector/__tests__/index.spec.tsx b/web/app/components/plugins/plugin-detail-panel/multiple-tool-selector/__tests__/index.spec.tsx index 2378de90d60..553225c7338 100644 --- a/web/app/components/plugins/plugin-detail-panel/multiple-tool-selector/__tests__/index.spec.tsx +++ b/web/app/components/plugins/plugin-detail-panel/multiple-tool-selector/__tests__/index.spec.tsx @@ -471,7 +471,7 @@ describe('MultipleToolSelector', () => { const addSelector = screen.getByTestId('tool-selector-add') expect(addSelector).toHaveAttribute('data-controlled-state', 'false') - // Act - Click add button (ActionButton) + // Act - Click the add icon button. const actionButton = screen.getByRole('button', { name: 'plugin.detailPanel.toolSelector.title', }) @@ -703,7 +703,7 @@ describe('MultipleToolSelector', () => { // Arrange & Act const { container } = renderComponent({ disabled: true }) - // Assert - ActionButton (add button with mx-1 class) should not be rendered + // Assert - The add icon button should not be rendered. const actionButton = container.querySelector('[class*="mx-1"]') expect(actionButton).not.toBeInTheDocument() }) diff --git a/web/app/components/plugins/plugin-detail-panel/multiple-tool-selector/index.tsx b/web/app/components/plugins/plugin-detail-panel/multiple-tool-selector/index.tsx index e4e43faeb0e..861f5518ea1 100644 --- a/web/app/components/plugins/plugin-detail-panel/multiple-tool-selector/index.tsx +++ b/web/app/components/plugins/plugin-detail-panel/multiple-tool-selector/index.tsx @@ -1,9 +1,9 @@ import type { Node } from 'reactflow' import type { ToolValue } from '@/app/components/workflow/block-selector/types' import type { NodeOutPutVar } from '@/app/components/workflow/types' -import { Button } from '@langgenius/dify-ui/button' import { cn } from '@langgenius/dify-ui/cn' import { Collapsible, CollapsiblePanel, CollapsibleTrigger } from '@langgenius/dify-ui/collapsible' +import { IconButton } from '@langgenius/dify-ui/icon-button' import * as React from 'react' import { useTranslation } from 'react-i18next' import Divider from '@/app/components/base/divider' @@ -181,19 +181,19 @@ const MultipleToolSelector = ({ controlledState={selectorOpen} onControlledStateChange={setSelectorOpen} trigger={ - + } panelShowState={panelShowState} onPanelShowStateChange={setPanelShowState} diff --git a/web/app/components/plugins/plugin-detail-panel/operation-dropdown.tsx b/web/app/components/plugins/plugin-detail-panel/operation-dropdown.tsx index c4b736443ff..28e21d8a2a3 100644 --- a/web/app/components/plugins/plugin-detail-panel/operation-dropdown.tsx +++ b/web/app/components/plugins/plugin-detail-panel/operation-dropdown.tsx @@ -9,6 +9,7 @@ import { DropdownMenuSeparator, DropdownMenuTrigger, } from '@langgenius/dify-ui/dropdown-menu' +import { IconButton } from '@langgenius/dify-ui/icon-button' import { useSuspenseQuery } from '@tanstack/react-query' import { useTranslation } from 'react-i18next' import { systemFeaturesQueryOptions } from '@/features/system-features/client' @@ -71,14 +72,16 @@ export function OperationDropdown({ return ( $['detailPanel.operation.moreActions'], { ns: 'plugin' })} - > - - + render={ + $['detailPanel.operation.moreActions'], { ns: 'plugin' })} + size={triggerSize === 'xs' ? 'xs' : 'md'} + className="data-popup-open:bg-state-base-hover" + > + + + } + /> )} {onDelete && ( - + )} {!isError && diff --git a/web/app/components/plugins/plugin-page/nav-operations.tsx b/web/app/components/plugins/plugin-page/nav-operations.tsx index 5411dec2a3c..3c1cf767c50 100644 --- a/web/app/components/plugins/plugin-page/nav-operations.tsx +++ b/web/app/components/plugins/plugin-page/nav-operations.tsx @@ -2,8 +2,6 @@ import type { ReactNode } from 'react' import type { DocPathWithoutLang } from '@/types/doc-paths' -import { Button } from '@langgenius/dify-ui/button' -import { cn } from '@langgenius/dify-ui/cn' import { DropdownMenu, DropdownMenuContent, @@ -11,6 +9,7 @@ import { DropdownMenuSeparator, DropdownMenuTrigger, } from '@langgenius/dify-ui/dropdown-menu' +import { IconButton } from '@langgenius/dify-ui/icon-button' import { Fragment, useState } from 'react' import { useTranslation } from 'react-i18next' import { MARKETPLACE_URL_PREFIX } from '@/config' @@ -86,19 +85,16 @@ export function SubmitRequestDropdown({ dividerAfterFirst }: SubmitRequestDropdo $.requestSubmit, { ns: 'plugin', defaultValue: t(($) => $.requestAPlugin, { ns: 'plugin' }), })} - variant="ghost" - className={cn( - 'size-8 p-2 text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary', - 'data-popup-open:bg-state-base-hover data-popup-open:text-text-secondary', - )} + size="lg" + className="data-popup-open:bg-state-base-hover data-popup-open:text-text-secondary" > - + } /> diff --git a/web/app/components/plugins/plugin-page/plugin-sidecar-panel.tsx b/web/app/components/plugins/plugin-page/plugin-sidecar-panel.tsx index b165e73252f..e37fca5953f 100644 --- a/web/app/components/plugins/plugin-page/plugin-sidecar-panel.tsx +++ b/web/app/components/plugins/plugin-page/plugin-sidecar-panel.tsx @@ -1,7 +1,7 @@ 'use client' import type { ReactNode } from 'react' -import { Button } from '@langgenius/dify-ui/button' +import { IconButton } from '@langgenius/dify-ui/icon-button' import { PopoverClose, PopoverTitle } from '@langgenius/dify-ui/popover' import { useTranslation } from 'react-i18next' @@ -26,13 +26,13 @@ export function PluginSidecarPanel({ children, footer, title }: PluginSidecarPan $['operation.close'], { ns: 'common' })} - className="absolute top-2.5 right-2.5 size-8 p-0 text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary" + size="lg" + className="absolute top-2.5 right-2.5" > - + } /> diff --git a/web/app/components/plugins/plugin-page/plugin-tasks/__tests__/index.spec.tsx b/web/app/components/plugins/plugin-page/plugin-tasks/__tests__/index.spec.tsx index f4ce2a20ff2..7cf6228d9da 100644 --- a/web/app/components/plugins/plugin-page/plugin-tasks/__tests__/index.spec.tsx +++ b/web/app/components/plugins/plugin-page/plugin-tasks/__tests__/index.spec.tsx @@ -1,5 +1,6 @@ import type { PluginStatus } from '@/app/components/plugins/types' import { fireEvent, screen, waitFor } from '@testing-library/react' +import userEvent from '@testing-library/user-event' import { beforeEach, describe, expect, it, vi } from 'vitest' import { PluginSource, TaskStatus } from '@/app/components/plugins/types' // Import mocked modules @@ -67,8 +68,7 @@ const setupMocks = (plugins: PluginStatus[] = []) => { return { mockMutateAsync, mockHandleRefetch } } -const getTaskMenuTrigger = () => - document.getElementById('plugin-task-trigger')!.closest('[role="button"]') as HTMLElement +const getTaskMenuTrigger = () => document.getElementById('plugin-task-trigger') as HTMLButtonElement describe('usePluginTaskStatus Hook', () => { beforeEach(() => { @@ -299,6 +299,7 @@ describe('usePluginTaskStatus Hook', () => { // ============================================================================ describe('TaskStatusIndicator Component', () => { const defaultProps = { + id: 'plugin-task-trigger', tip: 'Test tooltip', isInstalling: false, isInstallingWithSuccess: false, @@ -307,7 +308,6 @@ describe('TaskStatusIndicator Component', () => { isFailed: false, successPluginsLength: 0, runningPluginsLength: 0, - totalPluginsLength: 1, onClick: vi.fn(), } @@ -316,64 +316,29 @@ describe('TaskStatusIndicator Component', () => { }) describe('Rendering', () => { - it('should render with correct id', () => { + it('should render an accessible button', () => { render() - expect(document.getElementById('plugin-task-trigger'))!.toBeInTheDocument() - }) - }) - - describe('Icon display', () => { - it('should show downloading icon when installing', () => { - render() - // DownloadingIcon is rendered when isInstalling is true - // DownloadingIcon is rendered when isInstalling is true - expect(document.getElementById('plugin-task-trigger'))!.toBeInTheDocument() - }) - - it('should show downloading icon when installing with error', () => { - render() - expect(document.getElementById('plugin-task-trigger'))!.toBeInTheDocument() - }) - - it('should show install icon when not installing', () => { - render() - expect(document.getElementById('plugin-task-trigger'))!.toBeInTheDocument() + expect(screen.getByRole('button', { name: defaultProps.tip })).toBeInTheDocument() }) }) describe('Status badge', () => { it('should not show a badge when installing has no success or error yet', () => { - render( - , - ) - expect(document.getElementById('plugin-task-trigger'))!.toBeInTheDocument() + render() + expect(screen.queryByTestId('task-status-success-badge')).not.toBeInTheDocument() + expect(screen.queryByTestId('task-status-error-badge')).not.toBeInTheDocument() }) it('should not show success badge when installing with success', () => { render( - , + , ) expect(screen.queryByTestId('task-status-success-badge')).not.toBeInTheDocument() }) it('should show error badge when installing with error', () => { render( - , + , ) expect(screen.getByTestId('task-status-error-badge')).toBeInTheDocument() }) @@ -385,7 +350,6 @@ describe('TaskStatusIndicator Component', () => { isSuccess successPluginsLength={3} runningPluginsLength={0} - totalPluginsLength={3} />, ) expect(screen.getByTestId('task-status-success-badge')).toBeInTheDocument() @@ -397,20 +361,21 @@ describe('TaskStatusIndicator Component', () => { }) }) - describe('Styling', () => { - it('should apply cursor-pointer for statuses that open the task menu', () => { + describe('Availability', () => { + it('should keep active installation status enabled', () => { render() const trigger = document.getElementById('plugin-task-trigger') - expect(trigger)!.toHaveClass('cursor-pointer') + expect(trigger).toHaveAttribute('aria-disabled', 'false') }) }) describe('User interactions', () => { - it('should call onClick when clicked', () => { + it('should call onClick when clicked', async () => { + const user = userEvent.setup() const handleClick = vi.fn() render() - fireEvent.click(document.getElementById('plugin-task-trigger')!) + await user.click(screen.getByRole('button', { name: defaultProps.tip })) expect(handleClick).toHaveBeenCalledTimes(1) }) @@ -630,24 +595,27 @@ describe('PluginTasks Component', () => { expect(screen.getByTestId('plugin-task-list'))!.toBeInTheDocument() }) - it('should apply open styling to the trigger while the task menu is expanded', () => { + it('should expose the expanded state on the trigger', async () => { + const user = userEvent.setup() setupMocks([createMockPlugin({ status: TaskStatus.failed })]) render() - fireEvent.click(getTaskMenuTrigger()) + const taskMenuTrigger = getTaskMenuTrigger() + expect(taskMenuTrigger).not.toHaveAttribute('data-menu-open') - expect(document.getElementById('plugin-task-trigger'))!.toHaveClass( - 'bg-state-destructive-hover-alt', - ) + await user.click(taskMenuTrigger) + + expect(taskMenuTrigger).toHaveAttribute('aria-expanded', 'true') + expect(taskMenuTrigger).toHaveAttribute('data-menu-open', '') }) - it('should apply pointer cursor to the task menu trigger when it can open', () => { + it('should keep the task menu trigger enabled when it can open', () => { setupMocks([createMockPlugin({ status: TaskStatus.failed })]) render() - expect(getTaskMenuTrigger()).toHaveClass('cursor-pointer') + expect(getTaskMenuTrigger()).toHaveAttribute('aria-disabled', 'false') }) it('should apply custom dropdown positioning props', () => { diff --git a/web/app/components/plugins/plugin-page/plugin-tasks/components/task-status-indicator.module.css b/web/app/components/plugins/plugin-page/plugin-tasks/components/task-status-indicator.module.css new file mode 100644 index 00000000000..2ca8503e4c5 --- /dev/null +++ b/web/app/components/plugins/plugin-page/plugin-tasks/components/task-status-indicator.module.css @@ -0,0 +1,22 @@ +@reference "../../../../../styles/globals.css"; + +.indicator { + @apply relative overflow-visible bg-components-panel-bg p-2 shadow-none inset-ring-components-panel-border-subtle; + + &[data-disabled] { + @apply cursor-default bg-components-panel-bg text-components-button-secondary-text shadow-none inset-ring-components-panel-border-subtle backdrop-blur-[5px]; + } + + &[data-menu-open] { + @apply bg-components-button-secondary-bg-hover shadow-xs shadow-shadow-shadow-3 inset-ring-components-button-secondary-border-hover backdrop-blur-[5px]; + } + + &[data-error] { + @apply cursor-pointer bg-state-destructive-hover text-components-button-destructive-secondary-text shadow-xs shadow-shadow-shadow-3 inset-ring-components-button-destructive-secondary-border-hover backdrop-blur-[5px]; + + &:hover, + &[data-menu-open] { + @apply bg-state-destructive-hover-alt; + } + } +} diff --git a/web/app/components/plugins/plugin-page/plugin-tasks/components/task-status-indicator.tsx b/web/app/components/plugins/plugin-page/plugin-tasks/components/task-status-indicator.tsx index 73e6c7787ed..27d341ed851 100644 --- a/web/app/components/plugins/plugin-page/plugin-tasks/components/task-status-indicator.tsx +++ b/web/app/components/plugins/plugin-page/plugin-tasks/components/task-status-indicator.tsx @@ -1,21 +1,22 @@ -import { Button } from '@langgenius/dify-ui/button' +import type { IconButtonProps } from '@langgenius/dify-ui/icon-button' import { cn } from '@langgenius/dify-ui/cn' +import { IconButton } from '@langgenius/dify-ui/icon-button' import { Tooltip, TooltipContent, TooltipTrigger } from '@langgenius/dify-ui/tooltip' import DownloadingIcon from '@/app/components/header/plugins-nav/downloading-icon' +import styles from './task-status-indicator.module.css' -type TaskStatusIndicatorProps = { +type TaskStatusIndicatorProps = Omit< + IconButtonProps, + 'aria-label' | 'aria-labelledby' | 'children' | 'size' | 'tone' | 'variant' +> & { tip: string isInstalling: boolean isInstallingWithSuccess: boolean isInstallingWithError: boolean isSuccess: boolean isFailed: boolean - disabled?: boolean - isOpen?: boolean successPluginsLength: number runningPluginsLength: number - totalPluginsLength: number - onClick: () => void } function ErrorBadgeIcon() { @@ -63,11 +64,10 @@ function TaskStatusIndicator({ isInstallingWithError, isSuccess, isFailed, - disabled = false, - isOpen = false, successPluginsLength, runningPluginsLength, - onClick, + className, + ...buttonProps }: TaskStatusIndicatorProps) { const showErrorStyle = isInstallingWithError || isFailed const hasActiveInstall = isInstalling || isInstallingWithSuccess || isInstallingWithError @@ -76,42 +76,31 @@ function TaskStatusIndicator({ (!hasActiveInstall && !isFailed && successPluginsLength > 0 && runningPluginsLength === 0) const showSuccessBadge = showSuccessIcon && !isInstallingWithError && !isFailed const showBadge = isInstallingWithError || showSuccessBadge || isFailed - const isClickable = !disabled && (hasActiveInstall || isSuccess || isFailed) return ( - - - {showBadge && ( -
- {isInstallingWithError && } - {showSuccessBadge && } - {isFailed && } -
- )} - + + + {showBadge && ( + + {isInstallingWithError && } + {showSuccessBadge && } + {isFailed && } + + )} + + } /> {tip} diff --git a/web/app/components/plugins/plugin-page/plugin-tasks/index.tsx b/web/app/components/plugins/plugin-page/plugin-tasks/index.tsx index 4f29fec31b2..567d2569951 100644 --- a/web/app/components/plugins/plugin-page/plugin-tasks/index.tsx +++ b/web/app/components/plugins/plugin-page/plugin-tasks/index.tsx @@ -124,27 +124,20 @@ const PluginTasks = ({
( -
- {}} - /> -
- )} + render={ + + } disabled={!canOpenMenu} />
{isMarketplaceArrowVisible && ( - + )}
diff --git a/web/app/styles/tailwind-core.css b/web/app/styles/tailwind-core.css index e1c6545678e..be22aa7fb74 100644 --- a/web/app/styles/tailwind-core.css +++ b/web/app/styles/tailwind-core.css @@ -25,7 +25,6 @@ @import './monaco-sticky-fix.css' layer(base); /* Component CSS using @apply / @utility. */ -@import '../components/base/action-button/index.css'; @import '../components/base/badge/index.css'; @import '../components/base/premium-badge/index.css'; @import './glass-surface.css';