mirror of
https://github.com/grafana/grafana.git
synced 2025-02-20 11:48:34 -06:00
a4e66a2a01
* remove Plugins and CloudIntegrations tab and add ConnectData tab * ConnectData: add Search component and use it * ConnectData: add DataSourcePluginList component * add CardGrid component * add CategoryHeader component * ConnectData: restructure content DataSourcePluginList is removed, because its responsibilities are actually the same as ConnectData's responsibilities. NoResults was added as a reusable component, and was moved out of CardGrid, since there could be more CardGrid on one page, but only one NoResults. * fix spacer * use LoadingPlaceholder * CardGrid: add margin * generalize CardGridProps * move isLoading and error into CardGrid We'd like CardGrid to be reusable, even multiple times within a page. In this case, it's better UX if we show the loading or error states per card grid, not for the whole page. * ConnectData: fix NoResults condition * fix and add meaningful tests * fix indentation * move isLoading and error back to ConnectData * make `url` required for CardGrid items
68 lines
1.6 KiB
TypeScript
68 lines
1.6 KiB
TypeScript
import { css } from '@emotion/css';
|
|
import React, { FC } from 'react';
|
|
|
|
import { GrafanaTheme2 } from '@grafana/data';
|
|
import { Card, useStyles2 } from '@grafana/ui';
|
|
|
|
const getStyles = (theme: GrafanaTheme2) => ({
|
|
sourcesList: css`
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
|
gap: 12px;
|
|
list-style: none;
|
|
margin-bottom: 80px;
|
|
`,
|
|
card: css`
|
|
height: 90px;
|
|
padding: 0px 24px;
|
|
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.6);
|
|
`,
|
|
cardContent: css`
|
|
display: flex;
|
|
align-items: center;
|
|
`,
|
|
logoWrapper: css`
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-right: 8px;
|
|
width: 32px;
|
|
height: 32px;
|
|
img {
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
align-self: center;
|
|
}
|
|
`,
|
|
label: css`
|
|
color: ${theme.colors.text.primary};
|
|
margin-bottom: 0;
|
|
`,
|
|
});
|
|
|
|
export interface CardGridProps {
|
|
items: Array<{ id: string; name: string; url: string; logo?: string }>;
|
|
}
|
|
|
|
export const CardGrid: FC<CardGridProps> = ({ items }) => {
|
|
const styles = useStyles2(getStyles);
|
|
|
|
return (
|
|
<ul className={styles.sourcesList}>
|
|
{items.map((item) => (
|
|
<Card key={item.id} className={styles.card} href={item.url}>
|
|
<Card.Heading>
|
|
<div className={styles.cardContent}>
|
|
{item.logo && (
|
|
<div className={styles.logoWrapper}>
|
|
<img src={item.logo} alt={`logo of ${item.name}`} />
|
|
</div>
|
|
)}
|
|
<h4 className={styles.label}>{item.name}</h4>
|
|
</div>
|
|
</Card.Heading>
|
|
</Card>
|
|
))}
|
|
</ul>
|
|
);
|
|
};
|