Add minor webhook edit flow improvements (#178)

web/src/framework/strings/stringTypes.ts

@@ -123,6 +123,7 @@ export interface StringsMap {
   ok: string
   on: string
   onDate: string
+  oneMustBeSelected: string
   open: string
   optional: string
   optionalExtendedDescription: string
@@ -207,10 +208,14 @@ export interface StringsMap {
   viewCommitDetails: string
   viewed: string
   webhook: string
+  webhookBranchCreated: string
+  webhookBranchDeleted: string
+  webhookBranchUpdated: string
   webhookDeleted: string
   webhookDetails: string
   webhookEventsLabel: string
   webhookListingContent: string
+  webhookUpdated: string
   webhooks: string
   write: string
   yourBranches: string

web/src/i18n/strings.en.yaml

@@ -214,3 +214,8 @@ webhookDeleted: Webhook deleted.
 failedToDeleteWebhook: Failed to delete Webhook. Please try again.
 webhookDetails: Webhook Details
 updateWebhook: Update Webhook
+webhookUpdated: Webhook updated successfully.
+oneMustBeSelected: At least one event must be selected
+webhookBranchCreated: Branch created
+webhookBranchUpdated: Branch updated
+webhookBranchDeleted: Branch deleted

web/src/pages/WebhookDetails/WebhookDetails.tsx

@@ -6,10 +6,12 @@ import type { OpenapiWebhookType } from 'services/code'
 import { useStrings } from 'framework/strings'
 import { RepositoryPageHeader } from 'components/RepositoryPageHeader/RepositoryPageHeader'
 import { WehookForm } from 'pages/WebhookNew/WehookForm'
+import { useAppContext } from 'AppContext'
 
 export default function WebhookDetails() {
   const { getString } = useStrings()
-  const { repoMetadata, error, loading, webhookId } = useGetRepositoryMetadata()
+  const { routes } = useAppContext()
+  const { repoMetadata, error, loading, webhookId, refetch: refreshMetadata } = useGetRepositoryMetadata()
   const {
     data,
     loading: webhookLoading,
@@ -26,13 +28,19 @@ export default function WebhookDetails() {
         repoMetadata={repoMetadata}
         title={getString('webhookDetails')}
         dataTooltipId="webhookDetails"
+        extraBreadcrumbLinks={
+          repoMetadata && [
+            {
+              label: getString('webhooks'),
+              url: routes.toCODEWebhooks({ repoPath: repoMetadata.path as string })
+            }
+          ]
+        }
       />
       <PageBody
         loading={loading || webhookLoading}
         error={error || webhookError}
-        retryOnError={() => {
+        retryOnError={() => (repoMetadata ? refetchWebhook() : refreshMetadata())}>
-          refetchWebhook()
-        }}>
         {repoMetadata && data && <WehookForm isEdit webhook={data} repoMetadata={repoMetadata} />}
       </PageBody>
     </Container>

web/src/pages/WebhookNew/WehookForm.tsx

@@ -30,7 +30,8 @@ enum WebhookEventType {
 }
 
 enum WebhookIndividualEvent {
-  BRANCH_PUSHED = 'branch_pushed',
+  BRANCH_CREATED = 'branch_created',
+  BRANCH_UPDATED = 'branch_updated',
   BRANCH_DELETED = 'branch_deleted'
 }
 
@@ -40,8 +41,9 @@ interface FormData {
   enabled: boolean
   secure: boolean
   events: WebhookEventType
-  branchPush: boolean
+  branchCreated: boolean
-  branchDeletion: boolean
+  branchUpdated: boolean
+  branchDeleted: boolean
 }
 
 interface WebHookFormProps extends Pick<GitInfoProps, 'repoMetadata'> {
@@ -52,7 +54,7 @@ interface WebHookFormProps extends Pick<GitInfoProps, 'repoMetadata'> {
 export function WehookForm({ repoMetadata, isEdit, webhook }: WebHookFormProps) {
   const history = useHistory()
   const { getString } = useStrings()
-  const { showError } = useToaster()
+  const { showError, showSuccess } = useToaster()
   const { routes } = useAppContext()
   const { mutate, loading } = useMutate<OpenapiWebhookType>({
     verb: isEdit ? 'PATCH' : 'POST',
@@ -68,8 +70,9 @@ export function WehookForm({ repoMetadata, isEdit, webhook }: WebHookFormProps)
             secret: isEdit ? '***' : '',
             enabled: webhook ? (webhook?.enabled as boolean) : true,
             secure: webhook?.insecure === false || false,
-            branchPush: webhook?.triggers?.includes(WebhookIndividualEvent.BRANCH_PUSHED) || false,
+            branchCreated: webhook?.triggers?.includes(WebhookIndividualEvent.BRANCH_CREATED) || false,
-            branchDeletion: webhook?.triggers?.includes(WebhookIndividualEvent.BRANCH_DELETED) || false,
+            branchUpdated: webhook?.triggers?.includes(WebhookIndividualEvent.BRANCH_UPDATED) || false,
+            branchDeleted: webhook?.triggers?.includes(WebhookIndividualEvent.BRANCH_DELETED) || false,
             events: WebhookEventType.INDIVIDUAL
           }}
           formName="create-webhook-form"
@@ -83,16 +86,20 @@ export function WehookForm({ repoMetadata, isEdit, webhook }: WebHookFormProps)
           onSubmit={formData => {
             const triggers: OpenapiWebhookTrigger[] = []
 
-            if (formData.branchPush) {
+            if (formData.branchCreated) {
-              triggers.push(WebhookIndividualEvent.BRANCH_PUSHED)
+              triggers.push(WebhookIndividualEvent.BRANCH_CREATED)
             }
 
-            if (formData.branchDeletion) {
+            if (formData.branchUpdated) {
+              triggers.push(WebhookIndividualEvent.BRANCH_UPDATED)
+            }
+
+            if (formData.branchDeleted) {
               triggers.push(WebhookIndividualEvent.BRANCH_DELETED)
             }
 
             if (!triggers.length) {
-              return showError('At least one event must be selected')
+              return showError(getString('oneMustBeSelected'))
             }
 
             const data: OpenapiUpdateWebhookRequest = {
@@ -105,12 +112,21 @@ export function WehookForm({ repoMetadata, isEdit, webhook }: WebHookFormProps)
 
             mutate(data)
               .then((response: OpenapiWebhookType) => {
-                history.push(
+                if (isEdit) {
-                  routes.toCODEWebhookDetails({
+                  showSuccess(getString('webhookUpdated'))
-                    repoPath: repoMetadata.path as string,
+                  history.push(
-                    webhookId: String(response.id)
+                    routes.toCODEWebhooks({
-                  })
+                      repoPath: repoMetadata.path as string
-                )
+                    })
+                  )
+                } else {
+                  history.push(
+                    routes.toCODEWebhookDetails({
+                      repoPath: repoMetadata.path as string,
+                      webhookId: String(response.id)
+                    })
+                  )
+                }
               })
               .catch(exception => {
                 showError(getErrorMessage(exception))
@@ -152,8 +168,21 @@ export function WehookForm({ repoMetadata, isEdit, webhook }: WebHookFormProps)
                     <article
                       style={{ display: 'flex', gap: '6rem', flexWrap: 'wrap', marginLeft: '30px', marginTop: '10px' }}>
                       <section>
-                        <FormInput.CheckBox label={'Branch push'} name="branchPush" className={css.checkbox} />
+                        <FormInput.CheckBox
-                        <FormInput.CheckBox label={'Branch deletion'} name="branchDeletion" className={css.checkbox} />
+                          label={getString('webhookBranchCreated')}
+                          name="branchCreated"
+                          className={css.checkbox}
+                        />
+                        <FormInput.CheckBox
+                          label={getString('webhookBranchUpdated')}
+                          name="branchUpdated"
+                          className={css.checkbox}
+                        />
+                        <FormInput.CheckBox
+                          label={getString('webhookBranchDeleted')}
+                          name="branchDeleted"
+                          className={css.checkbox}
+                        />
                       </section>
                     </article>
                   ) : null}