Segment Story Component: Removed any type from Segment story component (#71043)

* Removed any type from Segment story component

* Updated the component with the suggested changes

.betterer.results

@@ -463,8 +463,7 @@ exports[`better eslint`] = {
     ],
     "packages/grafana-data/src/types/select.ts:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "1"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "1"]
-      [0, 0, 0, "Unexpected any. Specify a different type.", "2"]
     ],
     "packages/grafana-data/src/types/templateVars.ts:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
@@ -1063,16 +1062,6 @@ exports[`better eslint`] = {
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
       [0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "1"]
     ],
-    "packages/grafana-ui/src/components/Segment/Segment.story.tsx:5381": [
-      [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "1"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "2"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "3"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "4"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "5"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "6"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "7"]
-    ],
     "packages/grafana-ui/src/components/Segment/SegmentAsync.story.tsx:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "1"],

packages/grafana-data/src/types/select.ts

@@ -12,7 +12,7 @@ export interface SelectableValue<T = any> {
   // Adds a simple native title attribute to each option.
   title?: string;
   // Optional component that will be shown together with other options. Does not get past any props.
-  component?: React.ComponentType<any>;
+  component?: React.ComponentType;
   isDisabled?: boolean;
   [key: string]: any;
 }

packages/grafana-ui/src/components/Segment/Segment.story.tsx

@@ -2,6 +2,7 @@ import { action } from '@storybook/addon-actions';
 import { Meta, StoryFn } from '@storybook/react';
 import React, { useState } from 'react';
 
+import { SelectableValue } from '@grafana/data';
 import { Segment, Icon, SegmentSection } from '@grafana/ui';
 
 import { SegmentSyncProps } from './Segment';
@@ -12,14 +13,25 @@ const AddButton = (
   </span>
 );
 
-const toOption = (value: any) => ({ label: value, value: value });
+function toOption<T>(value: T) {
+  return {
+    label: `${value}`,
+    value: value,
+  };
+}
 const options = ['Option1', 'Option2', 'OptionWithLooongLabel', 'Option4'].map(toOption);
 const groupedOptions = [
   { label: 'Names', options: ['Jane', 'Tom', 'Lisa'].map(toOption) },
   { label: 'Prime', options: [2, 3, 5, 7, 11, 13].map(toOption) },
 ];
 
-const SegmentFrame = ({ options, children }: any) => (
+const SegmentFrame = ({
+  options,
+  children,
+}: {
+  options: Array<SelectableValue<string | number>>;
+  children: React.ReactNode;
+}) => (
   <>
     <SegmentSection label="Segment Name">
       {children}
@@ -29,7 +41,7 @@ const SegmentFrame = ({ options, children }: any) => (
 );
 
 export const ArrayOptions = () => {
-  const [value, setValue] = useState<any>(options[0]);
+  const [value, setValue] = useState<SelectableValue<string>>(options[0]);
   return (
     <SegmentFrame options={options}>
       <Segment
@@ -50,7 +62,7 @@ const meta: Meta<typeof Segment> = {
 };
 
 export const ArrayOptionsWithPrimitiveValue = () => {
-  const [value, setValue] = useState('Option1');
+  const [value, setValue] = useState<string | undefined>('Option1');
   return (
     <SegmentFrame options={options}>
       <Segment
@@ -66,7 +78,7 @@ export const ArrayOptionsWithPrimitiveValue = () => {
 };
 
 export const ArrayOptionsWithPlaceholder = () => {
-  const [value, setValue] = useState<any>(undefined);
+  const [value, setValue] = useState<SelectableValue<string>>();
   return (
     <SegmentFrame options={options}>
       <Segment
@@ -83,9 +95,9 @@ export const ArrayOptionsWithPlaceholder = () => {
 };
 
 export const GroupedArrayOptions = () => {
-  const [value, setValue] = useState<any>(groupedOptions[0].options[0]);
+  const [value, setValue] = useState<SelectableValue<string | number>>(groupedOptions[0].options[0]);
   return (
-    <SegmentFrame options={options}>
+    <SegmentFrame options={groupedOptions}>
       <Segment
         value={value}
         options={groupedOptions}
@@ -99,14 +111,14 @@ export const GroupedArrayOptions = () => {
 };
 
 export const CustomOptionsAllowed = () => {
-  const [value, setValue] = useState(options[0]);
+  const [value, setValue] = useState<SelectableValue<string | number>>(options[0]);
   return (
     <SegmentFrame options={options}>
       <Segment
         allowCustomValue
         value={value}
         options={options}
-        onChange={({ value }) => {
+        onChange={(value) => {
           setValue(value);
           action('Segment value changed')(value);
         }}
@@ -115,13 +127,15 @@ export const CustomOptionsAllowed = () => {
   );
 };
 
-const CustomLabelComponent = ({ value }: any) => <div className="gf-form-label">custom({value})</div>;
+const CustomLabelComponent = ({ value }: SelectableValue<string | number>) => (
+  <div className="gf-form-label">custom({value})</div>
+);
 
 export const CustomLabelField = () => {
-  const [value, setValue] = useState<any>(groupedOptions[0].options[0].value);
+  const [value, setValue] = useState<string | number | undefined>(groupedOptions[0].options[0].value);
   return (
-    <SegmentFrame options={options}>
+    <SegmentFrame options={groupedOptions}>
-      <Segment
+      <Segment<string>
         Component={<CustomLabelComponent value={value} />}
         options={groupedOptions}
         onChange={({ value }) => {
@@ -134,15 +148,15 @@ export const CustomLabelField = () => {
 };
 
 export const HtmlAttributes = () => {
-  const [value, setValue] = useState<any>(options[0]);
+  const [value, setValue] = useState<SelectableValue<string | number>>(groupedOptions[0].options[0]);
   return (
-    <SegmentFrame options={options}>
+    <SegmentFrame options={groupedOptions}>
       <Segment
         data-testid="segment-test"
         id="segment-id"
         value={value}
         options={groupedOptions}
-        onChange={({ value }) => {
+        onChange={(value) => {
           setValue(value);
           action('Segment value changed')(value);
         }}