style: enhance button component and add translations for instance details

Author: SteKoe

spring-boot-admin-server-ui/src/main/frontend/components/sba-accordion.vue

@@ -90,3 +90,11 @@ const handleTitleClick = () => {
   open.value = !open.value;
 };
 </script>
+
+<style scoped>
+@reference "../index.css";
+
+:deep(header button) {
+  @apply cursor-pointer;
+}
+</style>

spring-boot-admin-server-ui/src/main/frontend/components/sba-button.spec.ts

@@ -0,0 +1,132 @@
+import userEvent from '@testing-library/user-event';
+import { screen } from '@testing-library/vue';
+import { describe, expect, it } from 'vitest';
+import { defineComponent } from 'vue';
+
+import SbaButton from './sba-button.vue';
+
+import { render } from '@/test-utils';
+
+describe('SbaButton', () => {
+  it('renders as a button element by default', () => {
+    render(SbaButton, { slots: { default: 'Click me' } });
+    expect(
+      screen.getByRole('button', { name: 'Click me' }),
+    ).toBeInTheDocument();
+  });
+
+  it('renders slot content', () => {
+    render(SbaButton, { slots: { default: 'Submit' } });
+    expect(screen.getByText('Submit')).toBeVisible();
+  });
+
+  it('renders as an anchor element when as="a"', () => {
+    render(SbaButton, {
+      props: { as: 'a', href: '#' },
+      slots: { default: 'Link' },
+    });
+    expect(screen.getByRole('link', { name: 'Link' })).toBeInTheDocument();
+  });
+
+  it('sets href on anchor element', () => {
+    render(SbaButton, {
+      props: { as: 'a', href: 'https://example.com' },
+      slots: { default: 'Link' },
+    });
+    expect(screen.getByRole('link', { name: 'Link' })).toHaveAttribute(
+      'href',
+      'https://example.com',
+    );
+  });
+
+  it('sets title attribute', () => {
+    render(SbaButton, {
+      props: { title: 'My tooltip' },
+      slots: { default: 'Btn' },
+    });
+    expect(screen.getByRole('button', { name: 'Btn' })).toHaveAttribute(
+      'title',
+      'My tooltip',
+    );
+  });
+
+  it('is disabled when disabled prop is true', () => {
+    render(SbaButton, {
+      props: { disabled: true },
+      slots: { default: 'Disabled' },
+    });
+    expect(screen.getByRole('button', { name: 'Disabled' })).toBeDisabled();
+  });
+
+  it('is not disabled by default', () => {
+    render(SbaButton, { slots: { default: 'Active' } });
+    expect(screen.getByRole('button', { name: 'Active' })).not.toBeDisabled();
+  });
+
+  it('emits click event when button is clicked', async () => {
+    const { emitted } = render(SbaButton, { slots: { default: 'Click' } });
+    await userEvent.click(screen.getByRole('button', { name: 'Click' }));
+    expect(emitted().click).toHaveLength(1);
+  });
+
+  it('does not emit click event when rendered as anchor', async () => {
+    const { emitted } = render(SbaButton, {
+      props: { as: 'a', href: '#' },
+      slots: { default: 'Link' },
+    });
+    await userEvent.click(screen.getByRole('link', { name: 'Link' }));
+    expect(emitted().click).toBeUndefined();
+  });
+
+  it('accepts a Vue component as the as prop and emits click', async () => {
+    const StubComponent = defineComponent({
+      template: '<button v-bind="$attrs"><slot /></button>',
+    });
+    const { emitted } = render(SbaButton, {
+      props: { as: StubComponent },
+      slots: { default: 'Component' },
+    });
+    await userEvent.click(screen.getByRole('button', { name: 'Component' }));
+    expect(emitted().click).toHaveLength(1);
+  });
+
+  it('passes attrs through to a component passed as the as prop', () => {
+    const StubComponent = defineComponent({
+      template: '<span v-bind="$attrs"><slot /></span>',
+    });
+    render(SbaButton, {
+      props: { as: StubComponent, primary: true },
+      slots: { default: 'Component' },
+    });
+    expect(screen.getByText('Component')).toHaveClass('is-primary');
+  });
+
+  it('applies is-primary class when primary prop is true', () => {
+    render(SbaButton, {
+      props: { primary: true },
+      slots: { default: 'Primary' },
+    });
+    expect(screen.getByRole('button', { name: 'Primary' })).toHaveClass(
+      'is-primary',
+    );
+  });
+
+  it('does not apply is-primary class by default', () => {
+    render(SbaButton, { slots: { default: 'Default' } });
+    expect(screen.getByRole('button', { name: 'Default' })).not.toHaveClass(
+      'is-primary',
+    );
+  });
+
+  it.each([
+    ['2xs', 'px-1.5'],
+    ['xs', 'px-2'],
+    ['sm', 'px-3'],
+    ['base', 'px-4'],
+  ])('applies correct padding class for size="%s"', (size, expectedClass) => {
+    render(SbaButton, { props: { size }, slots: { default: 'Btn' } });
+    expect(screen.getByRole('button', { name: 'Btn' })).toHaveClass(
+      expectedClass,
+    );
+  });
+});

spring-boot-admin-server-ui/src/main/frontend/components/sba-button.vue

@@ -19,11 +19,8 @@ const props = defineProps({
     default: '',
   },
   as: {
-    type: String,
+    type: [String, Object, Function],
     default: 'button',
-    validator(value) {
-      return ['a', 'button'].includes(value);
-    },
   },
   href: {
     type: String,
@@ -79,17 +76,16 @@ const componentAttrs = computed(() => {
       type: props.type,
     };
   }
-  return {};
+  return common;
 });
 
 const emit = defineEmits(['click']);
 const handleClick = (event) => {
-  if (props.as === 'button') {
-    emit('click', event);
-  }
   if (props.as === 'a') {
     event.stopPropagation();
+    return;
   }
+  emit('click', event);
 };
 </script>
 

spring-boot-admin-server-ui/src/main/frontend/views/applications/ApplicationListItemAction.vue

@@ -54,7 +54,6 @@
 import {
   faBell,
   faBellSlash,
-  faHistory,
   faPowerOff,
   faScroll,
   faTrash,

spring-boot-admin-server-ui/src/main/frontend/views/applications/i18n.de.json

@@ -40,6 +40,7 @@
   },
   "instances": {
     "shutdown": "Möchten Sie die Instanz <code>{name}</code> herunterfahren?",
+    "open_details": "Instanzdetails öffnen",
     "restart": "Möchten Sie die Instanz <code>{name}</code> neu starten?",
     "restarted": "Die Instanz {name} wurde neu gestartet.",
     "unregister": "Möchten Sie die Instanz <code>{name}</code> deregistrieren?",

spring-boot-admin-server-ui/src/main/frontend/views/applications/i18n.en.json

@@ -46,6 +46,7 @@
     "shutdown": "Shutdown instance <code>{name}</code>?",
     "shutdown_successful": "Successfully shutdown instances {name}.",
     "shutdown_failed": "Failed to shutdown instances {name}.",
+    "open_details": "Open instance details",
     "restart": "Restart instance <code>{name}</code>?",
     "restarted": "Successfully restarted instance {name}.",
     "unregister": "Deregister instance <code>{name}</code>?",

spring-boot-admin-server-ui/src/main/frontend/views/applications/i18n.es.json

@@ -19,6 +19,7 @@
   },
   "instances": {
     "shutdown": "Detener instancia <code>{name}</code>?",
+    "open_details": "Abrir detalles de la instancia",
     "restart": "Reinciar instancia <code>{name}</code>?",
     "restarted": "Instancia reiniciada exitosamente"
   }

spring-boot-admin-server-ui/src/main/frontend/views/applications/i18n.fr.json

@@ -19,6 +19,7 @@
   },
   "instances": {
     "shutdown": "Shutdown instance <code>{name}</code>?",
+    "open_details": "Ouvrir les détails de l'instance",
     "restart": "Restart instance <code>{name}</code>?",
     "restarted": "Successfully restarted instance"
   }

spring-boot-admin-server-ui/src/main/frontend/views/applications/i18n.is.json

@@ -19,6 +19,7 @@
   },
   "instances": {
     "shutdown": "Shutdown instance <code>{name}</code>?",
+    "open_details": "Opna upplýsingar um eintak",
     "restart": "Restart instance <code>{name}</code>?",
     "restarted": "Successfully restarted instance"
   }

spring-boot-admin-server-ui/src/main/frontend/views/applications/i18n.ko.json

@@ -43,6 +43,7 @@
     "shutdown": "<code>{name}</code> 인스턴스를 종료할까요?",
     "shutdown_successful": "{name} 인스턴스를 종료하였습니다.",
     "shutdown_failed": "{name} 인스턴스를 종료하지 못하였습니다.",
+    "open_details": "인스턴스 상세 정보 열기",
     "restart": "<code>{name}</code> 인스턴스를 재시작할까요?",
     "restarted": "{name} 인스턴스를 재시작하였습니다.",
     "unregister": "<code>{name}</code> 인스턴스 등록을 해제할까요?",