ref(ts): Convert `<SettingsPageHeader>` to typescript (#14706)

typescript me

src/sentry/static/sentry/app/views/settings/components/settingsPageHeader.tsx

@@ -1,23 +1,32 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import styled from 'react-emotion';
-import {Flex, Box} from 'grid-emotion';
 
 import space from 'app/styles/space';
 import {HeaderTitle} from 'app/styles/organization';
 
 type Props = {
+  // The title
+  title: React.ReactNode;
+
+  // Disables font styles in the title. Allows for more custom titles.
+  noTitleStyles?: boolean;
+
+  className?: string;
+
+  // Icon left of title
   icon?: React.ReactNode;
-  title?: React.ReactNode;
+
+  // Actions on opposite end of title bar from the title
   action?: React.ReactNode;
+
   tabs?: React.ReactNode;
-  noTitleStyles?: boolean;
 };
 
 class SettingsPageHeading extends React.Component<Props> {
   static propTypes = {
     icon: PropTypes.node,
-    title: PropTypes.node,
+    title: PropTypes.node.isRequired,
     action: PropTypes.node,
     tabs: PropTypes.node,
     // Disables font styles in the title. Allows for more custom titles.
@@ -29,30 +38,36 @@ class SettingsPageHeading extends React.Component<Props> {
   };
 
   render() {
+    const {icon, title, action, tabs, noTitleStyles, ...props} = this.props;
     return (
-      <Wrapper>
-        <Flex align="center">
-          {this.props.icon && <Box pr={1}>{this.props.icon}</Box>}
-          {this.props.title && (
-            <Title tabs={this.props.tabs} styled={this.props.noTitleStyles}>
-              <HeaderTitle>{this.props.title}</HeaderTitle>
+      <div {...props}>
+        <TitleAndActions>
+          {icon && <Icon>{icon}</Icon>}
+          {title && (
+            <Title tabs={tabs} styled={noTitleStyles}>
+              <HeaderTitle>{title}</HeaderTitle>
             </Title>
           )}
-          {this.props.action && (
-            <Action tabs={!!this.props.tabs}>{this.props.action}</Action>
-          )}
-        </Flex>
+          {action && <Action tabs={tabs}>{action}</Action>}
+        </TitleAndActions>
 
-        {this.props.tabs && <div>{this.props.tabs}</div>}
-      </Wrapper>
+        {tabs && <div>{tabs}</div>}
+      </div>
     );
   }
 }
 
-const Title = styled(Flex, {shouldForwardProp: p => p !== 'styled'})<{
-  styled: boolean;
-  tabs: boolean;
-}>`
+type TitleProps = {
+  styled?: boolean;
+  tabs?: React.ReactNode;
+};
+
+const TitleAndActions = styled('div')`
+  display: flex;
+  align-items: center;
+`;
+
+const Title = styled('div')<TitleProps & React.HTMLProps<HTMLDivElement>>`
   ${p =>
     !p.styled &&
     `
@@ -62,13 +77,19 @@ const Title = styled(Flex, {shouldForwardProp: p => p !== 'styled'})<{
   flex: 1;
 `;
 
-const Action = styled('div')<{tabs: boolean}>`
+const Icon = styled('div')`
+  margin-right: ${space(1)};
+`;
+
+const Action = styled('div')<{tabs?: React.ReactNode}>`
   ${p => (p.tabs ? `margin-top: ${space(2)}` : null)};
 `;
 
-const Wrapper = styled('div')`
+const StyledSettingsPageHeading = styled(SettingsPageHeading)<
+  Omit<React.HTMLProps<HTMLDivElement>, keyof Props> & Props
+>`
   font-size: 14px;
   margin-top: -${space(4)};
 `;
 
-export default SettingsPageHeading;
+export default StyledSettingsPageHeading;

tests/js/spec/views/__snapshots__/accountAuthorization.spec.jsx.snap

@@ -5,7 +5,7 @@ exports[`AccountAuthorizations renders empty 1`] = `
   title="Approved Applications - Sentry"
 >
   <div>
-    <SettingsPageHeading
+    <StyledSettingsPageHeading
       noTitleStyles={false}
       title="Authorized Applications"
     />

tests/js/spec/views/__snapshots__/accountEmails.spec.jsx.snap

@@ -5,7 +5,7 @@ exports[`AccountEmails renders with emails 1`] = `
   title="Emails - Sentry"
 >
   <div>
-    <SettingsPageHeading
+    <StyledSettingsPageHeading
       noTitleStyles={false}
       title="Emails"
     />

tests/js/spec/views/__snapshots__/accountIdentities.spec.jsx.snap

@@ -5,7 +5,7 @@ exports[`AccountIdentities renders empty 1`] = `
   title="Identities - Sentry"
 >
   <div>
-    <SettingsPageHeading
+    <StyledSettingsPageHeading
       noTitleStyles={false}
       title="Identities"
     />
@@ -38,7 +38,7 @@ exports[`AccountIdentities renders list 1`] = `
   title="Identities - Sentry"
 >
   <div>
-    <SettingsPageHeading
+    <StyledSettingsPageHeading
       noTitleStyles={false}
       title="Identities"
     />

tests/js/spec/views/__snapshots__/accountSubscriptions.spec.jsx.snap

@@ -5,7 +5,7 @@ exports[`AccountSubscriptions renders empty 1`] = `
   title="Subscriptions - Sentry"
 >
   <div>
-    <SettingsPageHeading
+    <StyledSettingsPageHeading
       noTitleStyles={false}
       title="Subscriptions"
     />
@@ -45,51 +45,42 @@ exports[`AccountSubscriptions renders list and can toggle 1`] = `
       title="Subscriptions - Sentry"
     >
       <div>
-        <SettingsPageHeading
+        <StyledSettingsPageHeading
           noTitleStyles={false}
           title="Subscriptions"
         >
-          <Wrapper>
+          <SettingsPageHeading
+            className="css-1fvvoq2-StyledSettingsPageHeading e1uay4fd4"
+            noTitleStyles={false}
+            title="Subscriptions"
+          >
             <div
-              className="css-1r5ylk7-Wrapper e1uay4fd2"
+              className="css-1fvvoq2-StyledSettingsPageHeading e1uay4fd4"
             >
-              <Flex
-                align="center"
-              >
-                <Base
-                  align="center"
-                  className="css-5ipae5"
+              <TitleAndActions>
+                <div
+                  className="css-b5tiyd-TitleAndActions e1uay4fd0"
                 >
-                  <div
-                    className="css-5ipae5"
-                    is={null}
+                  <Title
+                    styled={false}
                   >
-                    <Title
-                      styled={false}
+                    <div
+                      className="css-2kvddg-Title e1uay4fd1"
                     >
-                      <Base
-                        className="css-1ky52ze-Title e1uay4fd0"
-                      >
-                        <div
-                          className="css-1ky52ze-Title e1uay4fd0"
-                          is={null}
+                      <HeaderTitle>
+                        <h4
+                          className="css-u1l4am-HeaderTitle eqkydle2"
                         >
-                          <HeaderTitle>
-                            <h4
-                              className="css-u1l4am-HeaderTitle eqkydle2"
-                            >
-                              Subscriptions
-                            </h4>
-                          </HeaderTitle>
-                        </div>
-                      </Base>
-                    </Title>
-                  </div>
-                </Base>
-              </Flex>
+                          Subscriptions
+                        </h4>
+                      </HeaderTitle>
+                    </div>
+                  </Title>
+                </div>
+              </TitleAndActions>
             </div>
-          </Wrapper>
-        </SettingsPageHeading>
+          </SettingsPageHeading>
+        </StyledSettingsPageHeading>
         <TextBlock>
           <div
             className="css-1geyb25-TextBlock e1x1lar10"

tests/js/spec/views/__snapshots__/apiTokens.spec.jsx.snap

@@ -5,7 +5,7 @@ exports[`ApiTokens renders empty result 1`] = `
   title="API Tokens - Sentry"
 >
   <div>
-    <SettingsPageHeading
+    <StyledSettingsPageHeading
       action={
         <Button
           align="center"
@@ -98,7 +98,7 @@ exports[`ApiTokens renders with result 1`] = `
   title="API Tokens - Sentry"
 >
   <div>
-    <SettingsPageHeading
+    <StyledSettingsPageHeading
       action={
         <Button
           align="center"

tests/js/spec/views/__snapshots__/projectDebugFiles.spec.jsx.snap

@@ -14,51 +14,42 @@ exports[`ProjectDebugFiles renders 1`] = `
     }
   }
 >
-  <SettingsPageHeading
+  <StyledSettingsPageHeading
     noTitleStyles={false}
     title="Debug Information Files"
   >
-    <Wrapper>
+    <SettingsPageHeading
+      className="css-1fvvoq2-StyledSettingsPageHeading e1uay4fd4"
+      noTitleStyles={false}
+      title="Debug Information Files"
+    >
       <div
-        className="css-1r5ylk7-Wrapper e1uay4fd2"
+        className="css-1fvvoq2-StyledSettingsPageHeading e1uay4fd4"
       >
-        <Flex
-          align="center"
-        >
-          <Base
-            align="center"
-            className="css-5ipae5"
+        <TitleAndActions>
+          <div
+            className="css-b5tiyd-TitleAndActions e1uay4fd0"
           >
-            <div
-              className="css-5ipae5"
-              is={null}
+            <Title
+              styled={false}
             >
-              <Title
-                styled={false}
+              <div
+                className="css-2kvddg-Title e1uay4fd1"
               >
-                <Base
-                  className="css-1ky52ze-Title e1uay4fd0"
-                >
-                  <div
-                    className="css-1ky52ze-Title e1uay4fd0"
-                    is={null}
+                <HeaderTitle>
+                  <h4
+                    className="css-1w8ttcn-HeaderTitle eqkydle2"
                   >
-                    <HeaderTitle>
-                      <h4
-                        className="css-1w8ttcn-HeaderTitle eqkydle2"
-                      >
-                        Debug Information Files
-                      </h4>
-                    </HeaderTitle>
-                  </div>
-                </Base>
-              </Title>
-            </div>
-          </Base>
-        </Flex>
+                    Debug Information Files
+                  </h4>
+                </HeaderTitle>
+              </div>
+            </Title>
+          </div>
+        </TitleAndActions>
       </div>
-    </Wrapper>
-  </SettingsPageHeading>
+    </SettingsPageHeading>
+  </StyledSettingsPageHeading>
   <TextBlock>
     <div
       className="css-1geyb25-TextBlock e1x1lar10"
@@ -305,7 +296,7 @@ exports[`ProjectDebugFiles renders 1`] = `
 
 exports[`ProjectDebugFiles renders empty 1`] = `
 <Fragment>
-  <SettingsPageHeading
+  <StyledSettingsPageHeading
     noTitleStyles={false}
     title="Debug Information Files"
   />

tests/js/spec/views/__snapshots__/projectOwnership.spec.jsx.snap

@@ -5,7 +5,7 @@ exports[`ProjectTeamsSettings render() renders 1`] = `
   title="Ownership - Sentry"
 >
   <div>
-    <SettingsPageHeading
+    <StyledSettingsPageHeading
       noTitleStyles={false}
       title="Issue Owners"
     />

tests/js/spec/views/__snapshots__/projectPluginDetails.spec.jsx.snap

@@ -236,7 +236,7 @@ exports[`ProjectPluginDetails renders 1`] = `
             title="Sentry - Sentry"
           >
             <div>
-              <SettingsPageHeading
+              <StyledSettingsPageHeading
                 action={
                   <div
                     className="pull-right"
@@ -267,54 +267,84 @@ exports[`ProjectPluginDetails renders 1`] = `
                 noTitleStyles={false}
                 title="Amazon SQS"
               >
-                <Wrapper>
-                  <div
-                    className="css-1r5ylk7-Wrapper e1uay4fd2"
-                  >
-                    <Flex
-                      align="center"
+                <SettingsPageHeading
+                  action={
+                    <div
+                      className="pull-right"
                     >
-                      <Base
+                      <Button
                         align="center"
-                        className="css-5ipae5"
+                        disabled={false}
+                        onClick={[Function]}
+                        size="small"
+                        style={
+                          Object {
+                            "marginRight": "6px",
+                          }
+                        }
+                      >
+                        Enable Plugin
+                      </Button>
+                      <Button
+                        align="center"
+                        disabled={false}
+                        onClick={[Function]}
+                        size="small"
+                      >
+                        Reset Configuration
+                      </Button>
+                    </div>
+                  }
+                  className="css-1fvvoq2-StyledSettingsPageHeading e1uay4fd4"
+                  noTitleStyles={false}
+                  title="Amazon SQS"
+                >
+                  <div
+                    className="css-1fvvoq2-StyledSettingsPageHeading e1uay4fd4"
+                  >
+                    <TitleAndActions>
+                      <div
+                        className="css-b5tiyd-TitleAndActions e1uay4fd0"
                       >
-                        <div
-                          className="css-5ipae5"
-                          is={null}
+                        <Title
+                          styled={false}
                         >
-                          <Title
-                            styled={false}
+                          <div
+                            className="css-2kvddg-Title e1uay4fd1"
                           >
-                            <Base
-                              className="css-1ky52ze-Title e1uay4fd0"
-                            >
-                              <div
-                                className="css-1ky52ze-Title e1uay4fd0"
-                                is={null}
+                            <HeaderTitle>
+                              <h4
+                                className="css-1w8ttcn-HeaderTitle eqkydle2"
                               >
-                                <HeaderTitle>
-                                  <h4
-                                    className="css-1w8ttcn-HeaderTitle eqkydle2"
-                                  >
-                                    Amazon SQS
-                                  </h4>
-                                </HeaderTitle>
-                              </div>
-                            </Base>
-                          </Title>
-                          <Action
-                            tabs={false}
+                                Amazon SQS
+                              </h4>
+                            </HeaderTitle>
+                          </div>
+                        </Title>
+                        <Action>
+                          <div
+                            className="css-18luhfc-Action e1uay4fd3"
                           >
                             <div
-                              className="css-18luhfc-Action e1uay4fd1"
+                              className="pull-right"
                             >
-                              <div
-                                className="pull-right"
+                              <Button
+                                align="center"
+                                disabled={false}
+                                onClick={[Function]}
+                                size="small"
+                                style={
+                                  Object {
+                                    "marginRight": "6px",
+                                  }
+                                }
                               >
-                                <Button
-                                  align="center"
+                                <StyledButton
+                                  aria-disabled={false}
+                                  aria-label="Enable Plugin"
                                   disabled={false}
                                   onClick={[Function]}
+                                  role="button"
                                   size="small"
                                   style={
                                     Object {
@@ -322,9 +352,10 @@ exports[`ProjectPluginDetails renders 1`] = `
                                     }
                                   }
                                 >
-                                  <StyledButton
+                                  <ForwardRef
                                     aria-disabled={false}
                                     aria-label="Enable Plugin"
+                                    className="css-z6hjis-StyledButton-getColors edwq9my0"
                                     disabled={false}
                                     onClick={[Function]}
                                     role="button"
@@ -335,11 +366,10 @@ exports[`ProjectPluginDetails renders 1`] = `
                                       }
                                     }
                                   >
-                                    <ForwardRef
+                                    <button
                                       aria-disabled={false}
                                       aria-label="Enable Plugin"
                                       className="css-z6hjis-StyledButton-getColors edwq9my0"
-                                      disabled={false}
                                       onClick={[Function]}
                                       role="button"
                                       size="small"
@@ -349,99 +379,85 @@ exports[`ProjectPluginDetails renders 1`] = `
                                         }
                                       }
                                     >
-                                      <button
-                                        aria-disabled={false}
-                                        aria-label="Enable Plugin"
-                                        className="css-z6hjis-StyledButton-getColors edwq9my0"
-                                        onClick={[Function]}
-                                        role="button"
+                                      <ButtonLabel
+                                        align="center"
                                         size="small"
-                                        style={
-                                          Object {
-                                            "marginRight": "6px",
-                                          }
-                                        }
                                       >
-                                        <ButtonLabel
+                                        <Component
                                           align="center"
+                                          className="css-1h693nz-ButtonLabel edwq9my1"
                                           size="small"
                                         >
-                                          <Component
-                                            align="center"
+                                          <span
                                             className="css-1h693nz-ButtonLabel edwq9my1"
-                                            size="small"
                                           >
-                                            <span
-                                              className="css-1h693nz-ButtonLabel edwq9my1"
-                                            >
-                                              Enable Plugin
-                                            </span>
-                                          </Component>
-                                        </ButtonLabel>
-                                      </button>
-                                    </ForwardRef>
-                                  </StyledButton>
-                                </Button>
-                                <Button
-                                  align="center"
+                                            Enable Plugin
+                                          </span>
+                                        </Component>
+                                      </ButtonLabel>
+                                    </button>
+                                  </ForwardRef>
+                                </StyledButton>
+                              </Button>
+                              <Button
+                                align="center"
+                                disabled={false}
+                                onClick={[Function]}
+                                size="small"
+                              >
+                                <StyledButton
+                                  aria-disabled={false}
+                                  aria-label="Reset Configuration"
                                   disabled={false}
                                   onClick={[Function]}
+                                  role="button"
                                   size="small"
                                 >
-                                  <StyledButton
+                                  <ForwardRef
                                     aria-disabled={false}
                                     aria-label="Reset Configuration"
+                                    className="css-z6hjis-StyledButton-getColors edwq9my0"
                                     disabled={false}
                                     onClick={[Function]}
                                     role="button"
                                     size="small"
                                   >
-                                    <ForwardRef
+                                    <button
                                       aria-disabled={false}
                                       aria-label="Reset Configuration"
                                       className="css-z6hjis-StyledButton-getColors edwq9my0"
-                                      disabled={false}
                                       onClick={[Function]}
                                       role="button"
                                       size="small"
                                     >
-                                      <button
-                                        aria-disabled={false}
-                                        aria-label="Reset Configuration"
-                                        className="css-z6hjis-StyledButton-getColors edwq9my0"
-                                        onClick={[Function]}
-                                        role="button"
+                                      <ButtonLabel
+                                        align="center"
                                         size="small"
                                       >
-                                        <ButtonLabel
+                                        <Component
                                           align="center"
+                                          className="css-1h693nz-ButtonLabel edwq9my1"
                                           size="small"
                                         >
-                                          <Component
-                                            align="center"
+                                          <span
                                             className="css-1h693nz-ButtonLabel edwq9my1"
-                                            size="small"
                                           >
-                                            <span
-                                              className="css-1h693nz-ButtonLabel edwq9my1"
-                                            >
-                                              Reset Configuration
-                                            </span>
-                                          </Component>
-                                        </ButtonLabel>
-                                      </button>
-                                    </ForwardRef>
-                                  </StyledButton>
-                                </Button>
-                              </div>
+                                            Reset Configuration
+                                          </span>
+                                        </Component>
+                                      </ButtonLabel>
+                                    </button>
+                                  </ForwardRef>
+                                </StyledButton>
+                              </Button>
                             </div>
-                          </Action>
-                        </div>
-                      </Base>
-                    </Flex>
+                          </div>
+                        </Action>
+                      </div>
+                    </TitleAndActions>
                   </div>
-                </Wrapper>
-              </SettingsPageHeading>
+                </SettingsPageHeading>
+              </StyledSettingsPageHeading>
               <div
                 className="row"
               >

tests/js/spec/views/__snapshots__/projectTags.spec.jsx.snap

@@ -15,51 +15,42 @@ exports[`ProjectTags renders 1`] = `
     <DocumentTitle
       title="Sentry"
     >
-      <SettingsPageHeading
+      <StyledSettingsPageHeading
         noTitleStyles={false}
         title="Tags"
       >
-        <Wrapper>
+        <SettingsPageHeading
+          className="css-1fvvoq2-StyledSettingsPageHeading e1uay4fd4"
+          noTitleStyles={false}
+          title="Tags"
+        >
           <div
-            className="css-1r5ylk7-Wrapper e1uay4fd2"
+            className="css-1fvvoq2-StyledSettingsPageHeading e1uay4fd4"
           >
-            <Flex
-              align="center"
-            >
-              <Base
-                align="center"
-                className="css-5ipae5"
+            <TitleAndActions>
+              <div
+                className="css-b5tiyd-TitleAndActions e1uay4fd0"
               >
-                <div
-                  className="css-5ipae5"
-                  is={null}
+                <Title
+                  styled={false}
                 >
-                  <Title
-                    styled={false}
+                  <div
+                    className="css-2kvddg-Title e1uay4fd1"
                   >
-                    <Base
-                      className="css-1ky52ze-Title e1uay4fd0"
-                    >
-                      <div
-                        className="css-1ky52ze-Title e1uay4fd0"
-                        is={null}
+                    <HeaderTitle>
+                      <h4
+                        className="css-1w8ttcn-HeaderTitle eqkydle2"
                       >
-                        <HeaderTitle>
-                          <h4
-                            className="css-1w8ttcn-HeaderTitle eqkydle2"
-                          >
-                            Tags
-                          </h4>
-                        </HeaderTitle>
-                      </div>
-                    </Base>
-                  </Title>
-                </div>
-              </Base>
-            </Flex>
+                        Tags
+                      </h4>
+                    </HeaderTitle>
+                  </div>
+                </Title>
+              </div>
+            </TitleAndActions>
           </div>
-        </Wrapper>
-      </SettingsPageHeading>
+        </SettingsPageHeading>
+      </StyledSettingsPageHeading>
       <PermissionAlert
         access={
           Array [