Change badge and fix select

src/web/components/badge/__tests__/badge.jsx

@@ -3,14 +3,12 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-
 import {describe, test, expect} from '@gsa/testing';
 import ReportIcon from 'web/components/icon/reporticon';
 import {render} from 'web/utils/testing';
 
 import Badge from '../badge';
 
-
 describe('Badge tests', () => {
   test('should render badge', () => {
     const {element} = render(
@@ -46,13 +44,13 @@ describe('Badge tests', () => {
     const {getByTestId} = render(<Badge content="1" position="bottom" />);
     const icon = getByTestId('badge-icon');
 
-    expect(icon).toHaveStyleRule('bottom', '-8px');
+    expect(icon).toHaveStyleRule('bottom', '0');
   });
 
   test('should not be dynamic', () => {
     const {getByTestId} = render(<Badge content="1" dynamic={false} />);
 
     const icon = getByTestId('badge-icon');
-    expect(icon).toHaveStyleRule('right', '-8px');
+    expect(icon).toHaveStyleRule('right', '0');
   });
 });

src/web/components/badge/badge.jsx

@@ -18,23 +18,22 @@ const BadgeContainer = styled.div`
 BadgeContainer.displayName = 'BadgeContainer';
 
 const BadgeIcon = styled.span`
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
+  display: inline-flex;
   justify-content: center;
-  align-content: center;
   align-items: center;
   position: absolute;
-  font-size: 10px;
+  font-size: 0.75em;
   font-weight: bold;
-  border-radius: 10px;
+  border-radius: 50%;
   min-width: 10px;
-  padding: 3px 5px;
+  padding: 0.25em 0.5em;
   z-index: ${Theme.Layers.higher};
   background-color: ${({$backgroundColor = Theme.green}) => $backgroundColor};
   color: ${({$color = Theme.white}) => $color};
-  ${({$position = 'bottom'}) => $position}: ${({radius = 8}) => -radius}px;
-  right: ${({$margin = 8}) => -$margin}px;
+  top: ${({$position}) => ($position === 'top' ? '0' : 'auto')};
+  bottom: ${({$position}) => ($position === 'bottom' ? '0' : 'auto')};
+  right: 0;
+  transform: translate(80%, -50%);
 `;
 
 BadgeIcon.displayName = 'BadgeIcon';

src/web/components/form/__tests__/select.jsx

@@ -210,6 +210,38 @@ describe('Select component tests', () => {
 
     expect(getSelectItemElements().length).toEqual(1);
   });
+
+  test('should not call onChange handler when newValue is null or undefined', async () => {
+    const items = [
+      {
+        value: 'bar',
+        label: 'Bar',
+      },
+      {
+        value: 'foo',
+        label: 'Foo',
+      },
+    ];
+
+    const onChange = testing.fn();
+
+    render(<Select items={items} value="bar" onChange={onChange} />);
+
+    const input = getSelectElement();
+
+    await openSelectElement(input);
+
+    const domItems = getSelectItemElements();
+
+    await clickElement(domItems[0]);
+
+    expect(onChange).not.toHaveBeenCalled();
+
+    await clickElement(domItems[1]);
+
+    expect(onChange).toHaveBeenCalledWith('foo', undefined);
+  });
+
   describe('SelectItemRaw', () => {
     test.each([
       {

src/web/components/form/select.jsx

@@ -93,7 +93,7 @@ const Select = ({
 
   const handleChange = useCallback(
     newValue => {
-      if (isDefined(onChange)) {
+      if (isDefined(onChange) && Boolean(newValue)) {
         onChange(newValue, name);
       }
     },

src/web/components/structure/footer.jsx

@@ -28,7 +28,7 @@ const GreenboneFooter = () => {
     <Footer>
       Copyright © 2009-2025 by Greenbone AG,&nbsp;
       <Link
-        href="http://www.greenbone.net"
+        href="https://www.greenbone.net"
         rel="noopener noreferrer"
         target="_blank"
       >