Cleanup

Author: linuspahl

graylog2-web-interface/src/components/bootstrap/Tabs.tsx

@@ -18,28 +18,40 @@ import React from 'react';
 import { Tabs as MantineTabs } from '@mantine/core';
 import styled, { css } from 'styled-components';
 
-type TabsProps = {
-  children: React.ReactNode;
+const StyledTab = styled(MantineTabs.Tab)`
+  height: 40px;
+`;
+
+const StyledPanel = styled(MantineTabs.Panel)(
+  ({ theme }) => css`
+    padding: ${theme.spacings.sm};
+  `,
+);
+
+type Props = React.PropsWithChildren<{
   defaultValue?: string;
   value?: string | null;
   onChange?: (value: string | null) => void;
   variant?: 'default' | 'outline' | 'pills';
   className?: string;
-};
+}>;
 
-const StyledTabsBase = styled(MantineTabs)(
-  () => css`
-    .mantine-Tabs-tab {
-      height: 40px;
-    }
-  `,
+const Tabs = ({
+  children = undefined,
+  defaultValue = undefined,
+  value = undefined,
+  onChange = undefined,
+  variant = 'outline',
+  className,
+}: Props) => (
+  <MantineTabs defaultValue={defaultValue} value={value} onChange={onChange} variant={variant} className={className}>
+    {children}
+  </MantineTabs>
 );
 
-const Tabs = ({ variant = 'outline', ...props }: TabsProps) => <StyledTabsBase variant={variant} {...props} />;
-
 Tabs.List = MantineTabs.List;
-Tabs.Tab = MantineTabs.Tab;
-Tabs.Panel = MantineTabs.Panel;
+Tabs.Tab = StyledTab;
+Tabs.Panel = StyledPanel;
 
 /** @component */
 export default Tabs;

graylog2-web-interface/src/views/components/time-range-picker/TimeRangePickerTabs.tsx

@@ -142,24 +142,22 @@ const TimeRangeTabs = ({ limitDuration, validTypes }: Props) => {
   const defaultRanges = useMemo(() => createDefaultRanges(formatTime), [formatTime]);
 
   const onSelect = useCallback(
-    (nextTab: string | null) => {
+    (nextTab: AbsoluteTimeRange['type'] | RelativeTimeRange['type'] | KeywordTimeRange['type'] | 'disabled' | null) => {
       if (!nextTab || nextTab === 'disabled') return;
 
-      const typedNextTab = nextTab as AbsoluteTimeRange['type'] | RelativeTimeRange['type'] | KeywordTimeRange['type'];
-
       setValues({
         timeRangeTabs: {
           ...timeRangeTabs,
-          [typedNextTab]: newTabTimeRange({
+          [nextTab]: newTabTimeRange({
             activeTab,
-            nextTab: typedNextTab,
+            nextTab,
             timeRangeTabs,
             formatTime,
             defaultRanges,
             userTimezone,
           }),
         },
-        activeTab: typedNextTab,
+        activeTab: nextTab,
       });
 
       sendTelemetry(TELEMETRY_EVENT_TYPE.SEARCH_TIMERANGE_PICKER_TAB_SELECTED, {