ref(ts) Convert project service hook to typescript (#22041)

Co-authored-by: Priscila Oliveira <priscilawebdev@gmail.com>

src/sentry/static/sentry/app/views/settings/project/projectCreateServiceHook.jsx

@@ -1,23 +0,0 @@
-import React from 'react';
-
-import {t} from 'app/locale';
-import AsyncView from 'app/views/asyncView';
-import SettingsPageHeader from 'app/views/settings/components/settingsPageHeader';
-import ServiceHookSettingsForm from 'app/views/settings/project/serviceHookSettingsForm';
-
-export default class ProjectCreateServiceHook extends AsyncView {
-  renderBody() {
-    const {orgId, projectId} = this.props.params;
-    return (
-      <div className="ref-project-create-service-hook">
-        <SettingsPageHeader title={t('Create Service Hook')} />
-        <ServiceHookSettingsForm
-          {...this.props}
-          orgId={orgId}
-          projectId={projectId}
-          initialData={{events: []}}
-        />
-      </div>
-    );
-  }
-}

src/sentry/static/sentry/app/views/settings/project/projectCreateServiceHook.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import DocumentTitle from 'react-document-title';
+import {RouteComponentProps} from 'react-router/lib/Router';
+
+import {t} from 'app/locale';
+import SettingsPageHeader from 'app/views/settings/components/settingsPageHeader';
+import ServiceHookSettingsForm from 'app/views/settings/project/serviceHookSettingsForm';
+
+type Props = RouteComponentProps<{orgId: string; projectId: string}, {}>;
+
+function ProjectCreateServiceHook({params}: Props) {
+  const {orgId, projectId} = params;
+  const title = t('Create Service Hook');
+  return (
+    <DocumentTitle title={`${title} - Sentry`}>
+      <React.Fragment>
+        <SettingsPageHeader title={title} />
+        <ServiceHookSettingsForm
+          orgId={orgId}
+          projectId={projectId}
+          initialData={{events: [], isActive: true}}
+        />
+      </React.Fragment>
+    </DocumentTitle>
+  );
+}
+
+export default ProjectCreateServiceHook;

src/sentry/static/sentry/app/views/settings/project/projectServiceHooks.tsx

@@ -30,7 +30,10 @@ function ServiceHookRow({orgId, projectId, hook, onToggleActive}: RowProps) {
   return (
     <Field
       label={
-        <Link to={`/settings/${orgId}/projects/${projectId}/hooks/${hook.id}/`}>
+        <Link
+          data-test-id="project-service-hook"
+          to={`/settings/${orgId}/projects/${projectId}/hooks/${hook.id}/`}
+        >
           <Truncate value={hook.url} />
         </Link>
       }
@@ -143,7 +146,7 @@ export default class ProjectServiceHooks extends AsyncView<Props, State> {
     const access = new Set(this.context.organization.access);
 
     return (
-      <div className="ref-project-service-hooks">
+      <React.Fragment>
         <SettingsPageHeader
           title={t('Service Hooks')}
           action={
@@ -161,7 +164,7 @@ export default class ProjectServiceHooks extends AsyncView<Props, State> {
           }
         />
         <Panel>{body}</Panel>
-      </div>
+      </React.Fragment>
     );
   }
 }

src/sentry/static/sentry/app/views/settings/project/serviceHookSettingsForm.tsx

@@ -15,8 +15,8 @@ const EVENT_CHOICES = ['event.alert', 'event.created'].map(e => [e, e]);
 type Props = {
   orgId: string;
   projectId: string;
-  hookId: string;
   initialData: Partial<ServiceHook> & {isActive: boolean};
+  hookId?: string;
 };
 
 export default class ServiceHookSettingsForm extends React.Component<Props> {

tests/acceptance/test_project_servicehooks.py

@@ -25,7 +25,6 @@ class ProjectServiceHooksTest(AcceptanceTestCase):
         with self.feature("projects:servicehooks"):
             self.browser.get(self.list_hooks_path)
             self.browser.wait_until_not(".loading-indicator")
-            self.browser.wait_until(".ref-project-service-hooks")
             self.browser.snapshot("project settings - service hooks - empty list")
             # click "New"
             self.browser.click('[data-test-id="new-service-hook"]')
@@ -37,7 +36,7 @@ class ProjectServiceHooksTest(AcceptanceTestCase):
             self.browser.snapshot("project settings - service hooks - create")
             self.browser.element('input[name="url"]').send_keys("https://example.com/hook")
             # click "Save Changes"
-            self.browser.click('.ref-project-create-service-hook [data-test-id="form-submit"]')
+            self.browser.click('form [data-test-id="form-submit"]')
 
             self.browser.wait_until_not(".loading-indicator")
             assert self.browser.current_url == u"{}{}".format(
@@ -50,7 +49,7 @@ class ProjectServiceHooksTest(AcceptanceTestCase):
             assert not hook.events
 
             # hopefully click the first service hook
-            self.browser.click(".ref-project-service-hooks label a")
+            self.browser.click('[data-test-id="project-service-hook"]')
             self.browser.wait_until_not(".loading-indicator")
             assert self.browser.current_url == u"{}{}".format(
                 self.browser.live_server_url,