Plugins: show signing status on datasources and plugins (#23542)

* show signing status

* show signing status

* Progress on signed badge style

* Progress on signing status look and updated card background

* Updates

* Transforms card tweak

Co-authored-by: Torkel Ödegaard <torkel@grafana.com>

public/app/features/datasources/DataSourcesListPage.tsx

@@ -64,7 +64,6 @@ export class DataSourcesListPage extends PureComponent<Props> {
       layoutMode,
       searchQuery,
       setDataSourcesSearchQuery,
-      setDataSourcesLayoutMode,
       hasFetched,
     } = this.props;
 
@@ -81,9 +80,7 @@ export class DataSourcesListPage extends PureComponent<Props> {
             {hasFetched &&
               dataSourcesCount > 0 && [
                 <OrgActionBar
-                  layoutMode={layoutMode}
                   searchQuery={searchQuery}
-                  onSetLayoutMode={mode => setDataSourcesLayoutMode(mode)}
                   setSearchQuery={query => setDataSourcesSearchQuery(query)}
                   linkButton={linkButton}
                   key="action-bar"

public/app/features/datasources/NewDataSourcePage.tsx

@@ -11,6 +11,7 @@ import { addDataSource, loadDataSourcePlugins } from './state/actions';
 import { getDataSourcePlugins } from './state/selectors';
 import { FilterInput } from 'app/core/components/FilterInput/FilterInput';
 import { setDataSourceTypeSearchQuery } from './state/reducers';
+import { PluginSignatureBadge } from '../plugins/PluginSignatureBadge';
 import { Card } from 'app/core/components/Card/Card';
 
 export interface Props {
@@ -146,7 +147,34 @@ const DataSourceTypeCard: FC<DataSourceTypeCardProps> = props => {
       }
       className={isPhantom && 'add-data-source-item--phantom'}
       onClick={onClick}
-    />
+      aria-label={e2e.pages.AddDataSource.selectors.dataSourcePlugins(plugin.name)}
+    >
+      <img className="add-data-source-item-logo" src={plugin.info.logos.small} />
+      <div className="add-data-source-item-text-wrapper">
+        <span className="add-data-source-item-text">{plugin.name}</span>
+        {plugin.info.description && <span className="add-data-source-item-desc">{plugin.info.description}</span>}
+        {!isPhantom && (
+          <div>
+            <PluginSignatureBadge status={plugin.signature} />
+          </div>
+        )}
+      </div>
+      <div className="add-data-source-item-actions">
+        {learnMoreLink && (
+          <LinkButton
+            variant="secondary"
+            href={`${learnMoreLink.url}?utm_source=grafana_add_ds`}
+            target="_blank"
+            rel="noopener"
+            onClick={onLearnMoreClick}
+            icon="external-link-alt"
+          >
+            {learnMoreLink.name}
+          </LinkButton>
+        )}
+        {!isPhantom && <Button>Select</Button>}
+      </div>
+    </Card>
   );
 };
 

public/app/features/datasources/__snapshots__/DataSourcesListPage.test.tsx.snap

@@ -18,14 +18,12 @@ exports[`Render should render action bar and datasources 1`] = `
   >
     <OrgActionBar
       key="action-bar"
-      layoutMode="grid"
       linkButton={
         Object {
           "href": "datasources/new",
           "title": "Add data source",
         }
       }
-      onSetLayoutMode={[Function]}
       searchQuery=""
       setSearchQuery={[Function]}
     />