From 04fae8bd4616249739bd2e0f70a261fcce5177c2 Mon Sep 17 00:00:00 2001 From: Alex Khomenko Date: Fri, 11 Apr 2025 08:33:11 +0300 Subject: [PATCH] Provisioning: Update ConfigForm (#103846) * Provisioning: Fix token permissions alignment * Update config form * Extract getDefaultValues --- .../provisioning/Config/ConfigForm.tsx | 34 +---- .../Config/ConfigFormGithubCollapse.tsx | 128 +++++++----------- .../features/provisioning/Config/defaults.ts | 25 ++++ .../Shared/TokenPermissionsInfo.tsx | 2 +- .../Wizard/ProvisioningWizard.tsx | 4 +- public/locales/en-US/grafana.json | 15 +- 6 files changed, 85 insertions(+), 123 deletions(-) create mode 100644 public/app/features/provisioning/Config/defaults.ts diff --git a/public/app/features/provisioning/Config/ConfigForm.tsx b/public/app/features/provisioning/Config/ConfigForm.tsx index 780cdca848e..73eeea1252a 100644 --- a/public/app/features/provisioning/Config/ConfigForm.tsx +++ b/public/app/features/provisioning/Config/ConfigForm.tsx @@ -14,39 +14,19 @@ import { Stack, Switch, } from '@grafana/ui'; -import { Repository, RepositorySpec } from 'app/api/clients/provisioning'; +import { Repository } from 'app/api/clients/provisioning'; import { FormPrompt } from 'app/core/components/FormPrompt/FormPrompt'; import { t, Trans } from 'app/core/internationalization'; import { TokenPermissionsInfo } from '../Shared/TokenPermissionsInfo'; import { useCreateOrUpdateRepository } from '../hooks/useCreateOrUpdateRepository'; import { RepositoryFormData } from '../types'; -import { dataToSpec, specToData } from '../utils/data'; +import { dataToSpec } from '../utils/data'; import { ConfigFormGithubCollapse } from './ConfigFormGithubCollapse'; +import { getDefaultValues } from './defaults'; -export function getDefaultValues(repository?: RepositorySpec): RepositoryFormData { - if (!repository) { - return { - type: 'github', - title: 'Repository', - token: '', - url: '', - branch: 'main', - generateDashboardPreviews: false, - readOnly: false, - prWorkflow: true, - path: 'grafana/', - sync: { - enabled: false, - target: 'instance', - intervalSeconds: 60, - }, - }; - } - return specToData(repository); -} - +// This needs to be a function for translations to work const getOptions = () => { const typeOptions = [ { value: 'github', label: t('provisioning.config-form.option-github', 'GitHub') }, @@ -254,11 +234,7 @@ export function ConfigForm({ data }: ConfigFormProps) { } /> - {type === 'github' && ( - } - /> - )} + {type === 'github' && } ; } -export function ConfigFormGithubCollapse({ previews }: ConfigFormGithubCollapseProps) { - const navigate = useNavigate(); + +export function ConfigFormGithubCollapse({ register }: ConfigFormGithubCollapseProps) { + const isPublic = checkPublicAccess(); + const hasImageRenderer = checkImageRenderer(); return ( -

- Realtime feedback -

- {checkPublicAccess() ? ( -
- - - Changes in git will be quickly pulled into grafana. Pull requests can be processed. - - -
- ) : ( - Instructions} - onRemove={() => navigate(GETTING_STARTED_URL)} - > - - Changes in git will eventually be pulled depending on the synchronization interval. Pull requests will not - be processed - - - )} - -

- - Pull Request image previews - -

- {!config.rendererAvailable && ( - Instructions} - onRemove={() => window.open('https://grafana.com/grafana/plugins/grafana-image-renderer/', '_blank')} - > - - When the image renderer is configured, pull requests can see preview images - - - )} - - - - Render before/after images and link them to the pull request. -
- NOTE: This will render dashboards into an image that can be access by a public URL - - - } - > - {previews} + + + + Adds an image preview of dashboard changes in pull requests. Images of your Grafana dashboards will be + shared in your Git repository and visible to anyone with repository access. + {' '} + + + Requires image rendering.{' '} + + Set up image rendering + + + + + } + {...register('generateDashboardPreviews')} + /> + + {!isPublic && ( + + + + + Configure webhooks + {' '} + to get instant updates in Grafana as soon as changes are committed. Review and approve changes using pull + requests before they go live. + + + + )} ); } diff --git a/public/app/features/provisioning/Config/defaults.ts b/public/app/features/provisioning/Config/defaults.ts new file mode 100644 index 00000000000..4c7d77731ef --- /dev/null +++ b/public/app/features/provisioning/Config/defaults.ts @@ -0,0 +1,25 @@ +import { RepositorySpec } from '../../../api/clients/provisioning'; +import { RepositoryFormData } from '../types'; +import { specToData } from '../utils/data'; + +export function getDefaultValues(repository?: RepositorySpec): RepositoryFormData { + if (!repository) { + return { + type: 'github', + title: 'Repository', + token: '', + url: '', + branch: 'main', + generateDashboardPreviews: false, + readOnly: false, + prWorkflow: true, + path: 'grafana/', + sync: { + enabled: false, + target: 'instance', + intervalSeconds: 60, + }, + }; + } + return specToData(repository); +} diff --git a/public/app/features/provisioning/Shared/TokenPermissionsInfo.tsx b/public/app/features/provisioning/Shared/TokenPermissionsInfo.tsx index c97bea79c18..2c995490821 100644 --- a/public/app/features/provisioning/Shared/TokenPermissionsInfo.tsx +++ b/public/app/features/provisioning/Shared/TokenPermissionsInfo.tsx @@ -11,7 +11,7 @@ export function TokenPermissionsInfo() {
{/* GitHub UI is English only, so these strings are not translated */} {/* eslint-disable-next-line @grafana/no-untranslated-strings */} - + Go to GitHub Personal Access Tokens diff --git a/public/app/features/provisioning/Wizard/ProvisioningWizard.tsx b/public/app/features/provisioning/Wizard/ProvisioningWizard.tsx index dd0d5f167dd..bdc91f790f1 100644 --- a/public/app/features/provisioning/Wizard/ProvisioningWizard.tsx +++ b/public/app/features/provisioning/Wizard/ProvisioningWizard.tsx @@ -10,7 +10,7 @@ import { useDeleteRepositoryMutation, useGetFrontendSettingsQuery } from 'app/ap import { FormPrompt } from 'app/core/components/FormPrompt/FormPrompt'; import { t } from 'app/core/internationalization'; -import { getDefaultValues } from '../Config/ConfigForm'; +import { getDefaultValues } from '../Config/defaults'; import { PROVISIONING_URL } from '../constants'; import { useCreateOrUpdateRepository } from '../hooks/useCreateOrUpdateRepository'; import { dataToSpec } from '../utils/data'; @@ -41,7 +41,7 @@ const getSteps = (): Array> => { }, { id: 'synchronize', - name: t('provisioning.wizard.step-synchronize', 'Synchronize'), + name: t('provisioning.wizard.step-synchronize', 'Synchronize with external storage'), title: t('provisioning.wizard.title-synchronize', 'Synchronize with external storage'), submitOnNext: false, }, diff --git a/public/locales/en-US/grafana.json b/public/locales/en-US/grafana.json index c2ecec89b32..d9037ed2ddd 100644 --- a/public/locales/en-US/grafana.json +++ b/public/locales/en-US/grafana.json @@ -6476,18 +6476,9 @@ "placeholder-select-repository-type": "Select repository type" }, "config-form-github-collapse": { - "description-attach-dashboard-previews": "Render before/after images and link them to the pull request.<1>NOTE: This will render dashboards into an image that can be access by a public URL", - "instructions": "Instructions", - "label-attach-dashboard-previews": "Attach dashboard previews to pull requests", + "description-realtime-feedback": "<0>Configure webhooks to get instant updates in Grafana as soon as changes are committed. Review and approve changes using pull requests before they go live.", "label-git-hub-features": "GitHub features", - "pull-request-image-previews": "Pull Request image previews", - "realtime-feedback": "Realtime feedback", - "text-changes-in-git-eventually-pulled": "Changes in git will eventually be pulled depending on the synchronization interval. Pull requests will not be processed", - "text-changes-in-git-quick-pull": "Changes in git will be quickly pulled into grafana. Pull requests can be processed.", - "text-when-image-renderer-configured": "When the image renderer is configured, pull requests can see preview images", - "title-image-renderer-not-configured": "Image renderer not configured", - "title-public-url-not-configured": "Public URL not configured", - "title-webhook-will-be-created": "Webhook will be created" + "label-realtime-feedback": "Realtime feedback" }, "connect-repository-button": { "configure": "Configure", @@ -6777,7 +6768,7 @@ "step-bootstrap": "Choose what to synchronize", "step-connect": "Connect", "step-finish": "Choose additional settings", - "step-synchronize": "Synchronize", + "step-synchronize": "Synchronize with external storage", "sync-description": "Sync resources with external storage. After this one-time step, all future updates will be automatically saved to the repository and provisioned back into the instance.", "sync-option-history": "History", "title-bootstrap": "Choose what to synchronize",