POC/Provisioning: Update repository sync status (#99816)

public/app/features/provisioning/ConfigForm.tsx

@@ -43,8 +43,8 @@ function getDefaultValues(repository?: RepositorySpec): RepositoryFormData {
       branch: '',
       branchWorkflow: true,
       sync: {
-        enabled: false, // we should explicitly enabled!
-        target: 'instance', // 'instance' | 'mirror';
+        enabled: false,
+        target: 'instance',
       },
       editing: {
         create: true,
@@ -203,19 +203,13 @@ export function ConfigForm({ data }: ConfigFormProps) {
           </Field>
         </>
       )}
-      <Field label={'Sync target'}>
+      <Field label={'Sync target'} required error={errors?.sync?.target?.message} invalid={!!errors?.sync?.target}>
         <Controller
           name={'sync.target'}
           control={control}
+          rules={{ required: 'This field is required.' }}
           render={({ field: { ref, onChange, ...field } }) => {
-            return (
-              <RadioButtonGroup
-                options={targetOptions}
-                onChange={onChange}
-                //  disabled={!!data?.spec}
-                {...field}
-              />
-            );
+            return <RadioButtonGroup options={targetOptions} onChange={onChange} disabled={!!data?.spec} {...field} />;
           }}
         />
       </Field>

public/app/features/provisioning/RepositoryListPage.tsx

@@ -10,6 +10,7 @@ import {
   LinkButton,
   Stack,
   TextLink,
+  Text,
 } from '@grafana/ui';
 import { Page } from 'app/core/components/Page/Page';
 
@@ -66,9 +67,7 @@ function RepositoryListPageContent({ items }: { items?: Repository[] }) {
             const name = item.metadata?.name ?? '';
 
             let icon: IconName = 'database'; // based on type
-            let meta: ReactNode[] = [
-              // TODO... add counts? and sync info
-            ];
+            let meta: ReactNode[] = [];
             switch (item.spec?.type) {
               case 'github':
                 icon = 'github';
@@ -95,7 +94,11 @@ function RepositoryListPageContent({ items }: { items?: Repository[] }) {
                 break;
 
               case 'local':
-                meta.push(<span key={'path'}>{item.spec.local?.path}</span>);
+                meta.push(
+                  <Text element={'p'} key={'path'}>
+                    {item.spec.local?.path ?? ''}
+                  </Text>
+                );
                 break;
             }
 
@@ -106,7 +109,12 @@ function RepositoryListPageContent({ items }: { items?: Repository[] }) {
                 </Card.Figure>
                 <Card.Heading>
                   <Stack>
-                    {item.spec?.title} <StatusBadge state={item.status?.sync?.state} name={name} />
+                    {item.spec?.title}{' '}
+                    <StatusBadge
+                      enabled={Boolean(item.spec?.sync?.enabled)}
+                      state={item.status?.sync?.state}
+                      name={name}
+                    />
                   </Stack>
                 </Card.Heading>
                 <Card.Description>

public/app/features/provisioning/RepositoryStatusPage.tsx

@@ -385,7 +385,7 @@ export function RepositoryHealth({ repo }: { repo: Repository }) {
       )}
 
       <Text element={'h2'}>Sync Status</Text>
-      <StatusBadge state={status?.sync?.state} name={name} />
+      <StatusBadge enabled={Boolean(repo.spec?.sync?.enabled)} state={status?.sync?.state} name={name} />
       <ul style={{ listStyle: 'none' }}>
         <li>
           Job ID: <b>{status?.sync.job ?? 'N/A'}</b>

public/app/features/provisioning/StatusBadge.tsx

@@ -6,10 +6,11 @@ import { PROVISIONING_URL } from './constants';
 interface StatusBadgeProps {
   state?: string;
   name: string;
+  enabled: boolean;
 }
 
-export function StatusBadge({ state, name }: StatusBadgeProps) {
-  if (state == null) {
+export function StatusBadge({ enabled, state, name }: StatusBadgeProps) {
+  if (state === null || state === undefined) {
     return null;
   }
 
@@ -45,6 +46,12 @@ export function StatusBadge({ state, name }: StatusBadgeProps) {
     default:
       break;
   }
+
+  if (!enabled) {
+    color = 'red';
+    text = 'Sync disabled';
+    icon = 'info-circle';
+  }
   return (
     <Badge
       color={color}