From 62e0ffafca96ed77af89e2890cd5b23e49d905d0 Mon Sep 17 00:00:00 2001
From: Alex Khomenko <Clarity-89@users.noreply.github.com>
Date: Thu, 28 Nov 2024 12:41:16 +0200
Subject: [PATCH] POC/Provisioning: UI updates (#97139)

* Use configured workflow

* Update config form

* Use configured branch for import

* tweak

* Betterer

* Do not pass ref for import

* Betterer
---
 .betterer.results                             | 15 ++++++++++----
 .../saving/SaveProvisionedDashboard.tsx       | 14 ++++++++-----
 .../app/features/provisioning/ConfigForm.tsx  | 13 ++++++------
 .../provisioning/ImportFromRepository.tsx     | 20 +++++++++++++------
 .../provisioning/RepositoryListPage.tsx       |  2 +-
 .../features/provisioning/api/endpoints.ts    |  2 +-
 6 files changed, 43 insertions(+), 23 deletions(-)

diff --git a/.betterer.results b/.betterer.results
index 1f6dba52b0c..6b99c7357b7 100644
--- a/.betterer.results
+++ b/.betterer.results
@@ -3672,8 +3672,7 @@ exports[`better eslint`] = {
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "6"],
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "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 />", "9"]
     ],
     "public/app/features/provisioning/DeleteRepositoryButton.tsx:5381": [
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]
@@ -3682,6 +3681,9 @@ exports[`better eslint`] = {
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"]
     ],
+    "public/app/features/provisioning/ImportFromRepository.tsx:5381": [
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]
+    ],
     "public/app/features/provisioning/RepositoryListPage.tsx:5381": [
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"],
@@ -3689,7 +3691,10 @@ exports[`better eslint`] = {
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "3"]
     ],
     "public/app/features/provisioning/RepositoryStatusPage.tsx:5381": [
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"],
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "2"],
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "3"]
     ],
     "public/app/features/provisioning/api/index.ts:5381": [
       [0, 0, 0, "Do not use export all (\`export * from ...\`)", "0"]
@@ -3697,7 +3702,9 @@ exports[`better eslint`] = {
     "public/app/features/provisioning/api/types.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.", "2"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "3"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "4"]
     ],
     "public/app/features/query/components/QueryEditorRow.tsx:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"],
diff --git a/public/app/features/dashboard-scene/saving/SaveProvisionedDashboard.tsx b/public/app/features/dashboard-scene/saving/SaveProvisionedDashboard.tsx
index 944815631d8..56b68d7dcf3 100644
--- a/public/app/features/dashboard-scene/saving/SaveProvisionedDashboard.tsx
+++ b/public/app/features/dashboard-scene/saving/SaveProvisionedDashboard.tsx
@@ -39,7 +39,6 @@ function getDefaultValues(meta: DashboardMeta) {
     path,
     repo,
     comment: '',
-    workflow: WorkflowOption.Branch,
   };
 }
 
@@ -60,16 +59,21 @@ export interface Props {
 export function SaveProvisionedDashboard({ meta, drawer, changeInfo, dashboard }: Props) {
   const [saveDashboard, request] = useUpdateRepositoryFilesMutation();
   const defaultValues = getDefaultValues(meta);
+  const repositoryConfigQuery = useGetRepositoryQuery({ name: defaultValues.repo });
+  const repositoryConfig = repositoryConfigQuery?.data?.spec;
+  const isGitHub = repositoryConfig?.type === 'github';
   const {
     register,
     handleSubmit,
     watch,
     formState: { errors },
     control,
-  } = useForm({ defaultValues });
-  const repositoryConfigQuery = useGetRepositoryQuery({ name: defaultValues.repo });
-  const repositoryConfig = repositoryConfigQuery?.data?.spec;
-  const isGitHub = repositoryConfig?.type === 'github';
+  } = useForm({
+    defaultValues: {
+      ...defaultValues,
+      workflow: repositoryConfig?.github?.branchWorkflow ? WorkflowOption.Branch : WorkflowOption.PullRequest,
+    },
+  });
   const [repo, ref, workflow] = watch(['repo', 'ref', 'workflow']);
   const href = createPRLink(repositoryConfig, repo, ref);
   const { isDirty } = dashboard.state;
diff --git a/public/app/features/provisioning/ConfigForm.tsx b/public/app/features/provisioning/ConfigForm.tsx
index 065d6e036d9..acce8e08e99 100644
--- a/public/app/features/provisioning/ConfigForm.tsx
+++ b/public/app/features/provisioning/ConfigForm.tsx
@@ -64,7 +64,8 @@ export function ConfigForm({ data }: ConfigFormProps) {
     watch,
     getValues,
   } = useForm<RepositoryFormData>({ defaultValues: getDefaultValues(data?.spec) });
-  const [tokenConfigured, setTokenConfigured] = useState(Boolean(data?.metadata?.name));
+  const isEdit = Boolean(data?.metadata?.name);
+  const [tokenConfigured, setTokenConfigured] = useState(isEdit);
   const navigate = useNavigate();
   const type = watch('type');
 
@@ -142,7 +143,7 @@ export function ConfigForm({ data }: ConfigFormProps) {
             <Controller
               name={'token'}
               control={control}
-              rules={{ required: 'This field is required.' }}
+              rules={{ required: isEdit ? false : 'This field is required.' }}
               render={({ field: { ref, ...field } }) => {
                 return (
                   <SecretInput
@@ -194,9 +195,7 @@ export function ConfigForm({ data }: ConfigFormProps) {
         <Controller
           control={control}
           name={'folder'}
-          render={({ field: { ref, ...field } }) => {
-            return <FolderPicker {...field} />;
-          }}
+          render={({ field: { ref, ...field } }) => <FolderPicker {...field} />}
         />
       </Field>
       <FieldSet label={'Editing options'}>
@@ -211,7 +210,9 @@ export function ConfigForm({ data }: ConfigFormProps) {
         </Field>
       </FieldSet>
       <Stack gap={2}>
-        <Button type={'submit'}>Save</Button>
+        <Button type={'submit'} disabled={request.isLoading}>
+          {request.isLoading ? 'Saving...' : 'Save'}
+        </Button>
       </Stack>
     </form>
   );
diff --git a/public/app/features/provisioning/ImportFromRepository.tsx b/public/app/features/provisioning/ImportFromRepository.tsx
index 03559ae1c5b..9f18fba47e1 100644
--- a/public/app/features/provisioning/ImportFromRepository.tsx
+++ b/public/app/features/provisioning/ImportFromRepository.tsx
@@ -6,20 +6,23 @@ import { AppEvents } from '@grafana/data';
 import { config, getAppEvents, getBackendSrv } from '@grafana/runtime';
 import { Button, ConfirmModal } from '@grafana/ui';
 
+import { Resource } from '../apiserver/types';
 import { Loader } from '../plugins/admin/components/Loader';
 
 import { useCreateRepositoryImportMutation, useListRepositoryQuery } from './api';
+import { RepositorySpec } from './api/types';
 
 interface Props {
-  name?: string;
-  folder?: string;
+  repository: Resource<RepositorySpec>;
 }
 
-export function ImportFromRepository({ name, folder }: Props) {
+export function ImportFromRepository({ repository }: Props) {
   const query = useListRepositoryQuery();
   const [importResource, importQuery] = useCreateRepositoryImportMutation();
   const [isModalOpen, setIsModalOpen] = useState(false);
   const navigate = useNavigate();
+  const name = repository.metadata?.name;
+  const folder = repository.spec?.folder;
 
   // TODO generate endpoints for this
   const { value } = useAsync(async () => {
@@ -48,22 +51,27 @@ export function ImportFromRepository({ name, folder }: Props) {
       return;
     }
 
-    importResource({ name, ref: 'main' });
+    importResource({ name });
   };
 
   if (query.isLoading) {
     return <Loader />;
   }
+
+  if (repository.spec?.type !== 'github') {
+    return null;
+  }
+
   return (
     <>
       <Button variant={'secondary'} onClick={() => setIsModalOpen(true)} disabled={importQuery.isLoading || !name}>
-        {importQuery.isLoading ? 'Importing...' : 'Import from repository'}
+        Import from repository
       </Button>
       <ConfirmModal
         isOpen={isModalOpen}
         title={'Import resources from repository'}
         body={`This will pull all resources from the repository into your instance into the "${value?.spec?.title}" folder. Existing dashboards with the same UID will be overwritten. Proceed?`}
-        confirmText={'Import'}
+        confirmText={importQuery.isLoading ? 'Importing...' : 'Import'}
         onConfirm={onClick}
         onDismiss={() => setIsModalOpen(false)}
       />
diff --git a/public/app/features/provisioning/RepositoryListPage.tsx b/public/app/features/provisioning/RepositoryListPage.tsx
index 7dfe14f235f..0d7ab69109d 100644
--- a/public/app/features/provisioning/RepositoryListPage.tsx
+++ b/public/app/features/provisioning/RepositoryListPage.tsx
@@ -64,7 +64,7 @@ function RepositoryListPageContent({ items }: { items?: Array<Resource<Repositor
                   <LinkButton variant="secondary" href={`${PROVISIONING_URL}/${item.metadata.name}/edit`}>
                     Edit
                   </LinkButton>
-                  <ImportFromRepository name={item?.metadata.name} folder={item.spec.folder} />
+                  <ImportFromRepository repository={item} />
                   <DeleteRepositoryButton name={item.metadata.name} />
                 </Stack>
               </Card>
diff --git a/public/app/features/provisioning/api/endpoints.ts b/public/app/features/provisioning/api/endpoints.ts
index 6fa5a6580c4..c776564cf56 100644
--- a/public/app/features/provisioning/api/endpoints.ts
+++ b/public/app/features/provisioning/api/endpoints.ts
@@ -104,7 +104,7 @@ const injectedRtkApi = api.injectEndpoints({
         params: { whom },
       }),
     }),
-    createRepositoryImport: build.mutation<ResourceWrapper, { name: string; ref: string }>({
+    createRepositoryImport: build.mutation<ResourceWrapper, { name: string; ref?: string }>({
       query: ({ name, ref }) => ({
         url: `${BASE_PATH}/${name}/import`,
         method: 'POST',