IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* Removed any type from Segment story component

* Updated the component with the suggested changes
This commit is contained in:
RoxanaAnamariaTurc 2023-07-05 09:27:03 +01:00 committed by GitHub
parent 9a8125ca3b
commit 7fed3f84f6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 32 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
.betterer.results
View File

@ -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.", "2"]
[0, 0, 0, "Unexpected any. Specify a different type.", "1"]
],
"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"],

2
packages/grafana-data/src/types/select.ts
View File

@ -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;
}

46
packages/grafana-ui/src/components/Segment/Segment.story.tsx
View File

@ -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}>
<Segment
<SegmentFrame options={groupedOptions}>
<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);
}}