grafana/public/app/features/auth-config/components/ProviderCard.tsx
Ashley Harrison 47f8717149
React: Use new JSX transform (#88802)
* update eslint, tsconfig + esbuild to handle new jsx transform

* remove thing that breaks the new jsx transform

* remove react imports

* adjust grafana-icons build

* is this the correct syntax?

* try this

* well this was much easier than expected...

* change grafana-plugin-configs webpack config

* fixes

* fix lockfile

* fix 2 more violations

* use path.resolve instead of require.resolve

* remove react import

* fix react imports

* more fixes

* remove React import

* remove import React from docs

* remove another react import
2024-06-25 12:43:47 +01:00

34 lines
1011 B
TypeScript

import { isIconName } from '@grafana/data';
import { Badge, Card, Icon } from '@grafana/ui';
import { UIMap } from '../constants';
import { getProviderUrl } from '../utils/url';
type Props = {
providerId: string;
enabled: boolean;
configPath?: string;
authType?: string;
onClick?: () => void;
};
export function ProviderCard({ providerId, enabled, configPath, authType, onClick }: Props) {
//@ts-expect-error
const url = getProviderUrl({ configPath, id: providerId });
const [iconName, displayName] = UIMap[providerId] || ['lock', providerId.toUpperCase()];
return (
<Card href={url} onClick={onClick}>
<Card.Heading>{displayName}</Card.Heading>
<Card.Meta>{authType}</Card.Meta>
{isIconName(iconName) && (
<Card.Figure>
<Icon name={iconName} size={'xxxl'} />
</Card.Figure>
)}
<Card.Actions>
<Badge text={enabled ? 'Enabled' : 'Not enabled'} color={enabled ? 'green' : 'blue'} />
</Card.Actions>
</Card>
);
}