From f0dc718a67a7c82bcbc39682819dedca2c6c0cf4 Mon Sep 17 00:00:00 2001
From: Ryan McKinley <ryantxu@gmail.com>
Date: Wed, 18 Dec 2024 12:37:45 +0300
Subject: [PATCH] POC/Provisioning: Use cards layout to show more status info
 (#98155)

---
 .betterer.results                             |  40 ++++---
 .../provisioning/repository_controller.go     |   4 +-
 .../provisioning/testdata/github-example.yaml |   1 -
 .../provisioning/DeleteRepositoryButton.tsx   |  11 +-
 .../provisioning/RepositoryListPage.tsx       | 110 +++++++++++++-----
 5 files changed, 110 insertions(+), 56 deletions(-)

diff --git a/.betterer.results b/.betterer.results
index 147b121ab9f..59316c4a97e 100644
--- a/.betterer.results
+++ b/.betterer.results
@@ -5330,8 +5330,7 @@ exports[`better eslint`] = {
       [0, 0, 0, "No untranslated strings in text props. Wrap text with <Trans /> or use t()", "42"]
     ],
     "public/app/features/provisioning/DeleteRepositoryButton.tsx:5381": [
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
-      [0, 0, 0, "No untranslated strings in text props. Wrap text with <Trans /> or use t()", "1"]
+      [0, 0, 0, "No untranslated strings in text props. Wrap text with <Trans /> or use t()", "0"]
     ],
     "public/app/features/provisioning/EditRepositoryPage.tsx:5381": [
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
@@ -5360,8 +5359,11 @@ exports[`better eslint`] = {
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
       [0, 0, 0, "No untranslated strings in text props. Wrap text with <Trans /> or use t()", "1"],
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "2"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "3"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "4"]
+      [0, 0, 0, "No untranslated strings in text props. Wrap text with <Trans /> or use t()", "3"],
+      [0, 0, 0, "No untranslated strings in text props. Wrap text with <Trans /> or use t()", "4"],
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "5"],
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "6"],
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "7"]
     ],
     "public/app/features/provisioning/RepositorySelect.tsx:5381": [
       [0, 0, 0, "No untranslated strings in text props. Wrap text with <Trans /> or use t()", "0"]
@@ -5372,26 +5374,30 @@ exports[`better eslint`] = {
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "2"],
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "3"],
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "4"],
-      [0, 0, 0, "Do not use any type assertions.", "5"],
-      [0, 0, 0, "Do not use any type assertions.", "6"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "7"],
-      [0, 0, 0, "No untranslated strings in text props. Wrap text with <Trans /> or use t()", "8"],
-      [0, 0, 0, "No untranslated strings in text props. Wrap text with <Trans /> or use t()", "9"],
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "5"],
+      [0, 0, 0, "No untranslated strings in text props. Wrap text with <Trans /> or use t()", "6"],
+      [0, 0, 0, "No untranslated strings in text props. Wrap text with <Trans /> or use t()", "7"],
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "8"],
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "9"],
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "10"],
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "11"],
-      [0, 0, 0, "No untranslated strings in text props. Wrap text with <Trans /> or use t()", "12"],
-      [0, 0, 0, "No untranslated strings in text props. Wrap text with <Trans /> or use t()", "13"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "14"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "15"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "16"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "17"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "18"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "19"]
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "12"],
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "13"]
     ],
     "public/app/features/provisioning/SyncRepository.tsx:5381": [
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
       [0, 0, 0, "No untranslated strings in text props. Wrap text with <Trans /> or use t()", "1"]
     ],
+    "public/app/features/provisioning/api/endpoints.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.", "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"]
+    ],
     "public/app/features/provisioning/api/index.ts:5381": [
       [0, 0, 0, "Do not use export all (\`export * from ...\`)", "0"]
     ],
diff --git a/pkg/registry/apis/provisioning/repository_controller.go b/pkg/registry/apis/provisioning/repository_controller.go
index 42048b5091a..7c0e08045f4 100644
--- a/pkg/registry/apis/provisioning/repository_controller.go
+++ b/pkg/registry/apis/provisioning/repository_controller.go
@@ -232,12 +232,12 @@ func (rc *RepositoryController) sync(key string) error {
 		if cachedRepo.Status.Initialized {
 			status, err = repo.OnUpdate(ctx, logger)
 			if err != nil {
-				return fmt.Errorf("on create repository: %w", err)
+				rc.logger.Error("OnUpdate", "error", err)
 			}
 		} else {
 			status, err = repo.OnCreate(ctx, logger)
 			if err != nil {
-				return fmt.Errorf("on create repository: %w", err)
+				rc.logger.Error("OnCreate", "error", err)
 			}
 		}
 
diff --git a/pkg/tests/apis/provisioning/testdata/github-example.yaml b/pkg/tests/apis/provisioning/testdata/github-example.yaml
index 4f0732c2294..9fa9dadbc74 100644
--- a/pkg/tests/apis/provisioning/testdata/github-example.yaml
+++ b/pkg/tests/apis/provisioning/testdata/github-example.yaml
@@ -19,4 +19,3 @@ spec:
     generateDashboardPreviews: true
     pullRequestLinter: true
     token: "github_pat_dummy"
-    webhookSecret: "dummyWebhookSecret"
diff --git a/public/app/features/provisioning/DeleteRepositoryButton.tsx b/public/app/features/provisioning/DeleteRepositoryButton.tsx
index a1724d00814..8faf0ea7b19 100644
--- a/public/app/features/provisioning/DeleteRepositoryButton.tsx
+++ b/public/app/features/provisioning/DeleteRepositoryButton.tsx
@@ -2,7 +2,7 @@ import { useCallback, useEffect, useState } from 'react';
 
 import { AppEvents } from '@grafana/data';
 import { getAppEvents } from '@grafana/runtime';
-import { Button, ConfirmModal } from '@grafana/ui';
+import { Button, ConfirmModal, IconButton } from '@grafana/ui';
 
 import { useDeleteRepositoryMutation } from './api';
 
@@ -26,14 +26,13 @@ export function DeleteRepositoryButton({ name }: { name: string }) {
 
   return (
     <>
-      <Button
-        variant="destructive"
+      <IconButton
+        name="trash-alt"
+        tooltip="Delete this repository"
         onClick={() => {
           setShowModal(true);
         }}
-      >
-        Delete
-      </Button>
+      />
       <ConfirmModal
         isOpen={showModal}
         title={'Delete repository config'}
diff --git a/public/app/features/provisioning/RepositoryListPage.tsx b/public/app/features/provisioning/RepositoryListPage.tsx
index b9b697a1187..504a2c2760b 100644
--- a/public/app/features/provisioning/RepositoryListPage.tsx
+++ b/public/app/features/provisioning/RepositoryListPage.tsx
@@ -1,7 +1,20 @@
 import { css } from '@emotion/css';
-import { useState } from 'react';
+import { ReactNode, useState } from 'react';
 
-import { Alert, Card, EmptySearchResult, EmptyState, FilterInput, LinkButton, Stack, TextLink } from '@grafana/ui';
+import {
+  Alert,
+  Button,
+  Card,
+  EmptySearchResult,
+  EmptyState,
+  FilterInput,
+  Icon,
+  IconButton,
+  IconName,
+  LinkButton,
+  Stack,
+  TextLink,
+} from '@grafana/ui';
 import { Page } from 'app/core/components/Page/Page';
 
 import { DeleteRepositoryButton } from './DeleteRepositoryButton';
@@ -51,36 +64,73 @@ function RepositoryListPageContent({ items }: { items?: Repository[] }) {
         {!!filteredItems.length ? (
           filteredItems.map((item) => {
             const name = item.metadata?.name ?? '';
-            const healthy = Boolean(item.status?.health.healthy)
+            const healthy = Boolean(item.status?.health.healthy);
+            let icon: IconName = 'database'; // based on type
+            let meta: ReactNode[] = [
+              // TODO... add counts? and sync info
+            ];
+            switch (item.spec?.type) {
+              case 'github':
+                icon = 'github';
+                const spec = item.spec.github;
+                let url = `https://github.com/${spec?.owner}/${spec?.repository}/`;
+                if (spec?.branch) {
+                  url += `tree/` + spec?.branch;
+                }
+                meta.push(<a href={url}>{url}</a>);
+                break;
+
+              case 'local':
+                meta.push(item.spec.local?.path);
+                break;
+            }
             return (
-              <Card key={item.metadata?.name} className={css({ alignItems: 'center' })}>
-                <Stack direction={'column'}>
-                  <Card.Heading>
-                    <TextLink href={`${PROVISIONING_URL}/${name}`}>{item.spec?.title}</TextLink>
-                  </Card.Heading>
-                  <Card.Meta>{item.spec?.type}</Card.Meta>
-                </Stack>
-                <Stack>
-                  {healthy ? <>
-                    <LinkButton variant="secondary" href={`${PROVISIONING_URL}/${name}/edit`}>
-                      Edit
+              <Card key={item.metadata?.name}>
+                <Card.Figure>
+                  <Icon name={icon} width={40} height={40} />
+                </Card.Figure>
+                <Card.Heading>{item.spec?.title}</Card.Heading>
+                <Card.Description>
+                  {item.spec?.description}
+
+                  {item.status ? (
+                    <>
+                      {!healthy && (
+                        <Alert
+                          title="Repository is unhealthy"
+                          children={item.status?.health?.message?.map((v) => (
+                            <div>
+                              {v}
+                              <br />
+                              <br />
+                            </div>
+                          ))}
+                        ></Alert>
+                      )}
+                    </>
+                  ) : (
+                    <div>
+                      <Alert severity="warning" title="repository initializing" />
+                    </div>
+                  )}
+                </Card.Description>
+                <Card.Meta>{meta}</Card.Meta>
+                <Card.Actions>
+                  <LinkButton href={`${PROVISIONING_URL}/${name}`} variant="secondary">
+                    Manage
+                  </LinkButton>
+                  {item.spec?.folder && (
+                    <LinkButton href={`/dashboards/f/${item.spec?.folder}/`} variant="secondary">
+                      View
                     </LinkButton>
-                    <SyncRepository repository={item} />
-                    <DeleteRepositoryButton name={name} />
-                  </> : <>
-                    <Alert title='Repository is unhealthy'>
-                      <>
-                        {item.status?.health.message && item.status.health.message.map(v => <div>{v}<br/><br/></div>)}
-                        <div>
-                          <LinkButton variant="secondary" href={`${PROVISIONING_URL}/${name}/edit`}>
-                            Edit
-                          </LinkButton>
-                          <DeleteRepositoryButton name={name} />
-                        </div>
-                      </>
-                    </Alert>
-                  </>}
-                </Stack>
+                  )}
+                  {healthy && <SyncRepository repository={item} />}
+                </Card.Actions>
+                <Card.SecondaryActions>
+                  {/* <IconButton key="comment-alt" name="comment-alt" tooltip="Tooltip content" />
+                  <IconButton key="copy" name="copy" tooltip="Tooltip content" /> */}
+                  <DeleteRepositoryButton name={name} />
+                </Card.SecondaryActions>
               </Card>
             );
           })