ref(ts): convert components/settings/text/textBlock (#14715)

src/sentry/static/sentry/app/views/settings/components/text/textBlock.jsx → src/sentry/static/sentry/app/views/settings/components/text/textBlock.tsx

@@ -1,8 +1,11 @@
-import React from 'react';
 import styled from 'react-emotion';
 import space from 'app/styles/space';
 
-const TextBlock = styled(({noMargin, ...props}) => <div {...props} />)`
+type Props = {
+  noMargin?: boolean;
+};
+
+const TextBlock = styled('div')<Props>`
   line-height: 1.5;
   ${p => (p.noMargin ? '' : 'margin-bottom:' + space(3))};
 `;

tests/js/spec/components/__snapshots__/confirmDelete.spec.jsx.snap

@@ -45,15 +45,11 @@ exports[`ConfirmDelete renders 1`] = `
                 type="error"
               >
                 <StyledTextBlock>
-                  <Component
+                  <div
                     className="css-1h3n7tg-TextBlock-StyledTextBlock e1xb5l7j2"
                   >
-                    <div
-                      className="css-1h3n7tg-TextBlock-StyledTextBlock e1xb5l7j2"
-                    >
-                      Are you sure?
-                    </div>
-                  </Component>
+                    Are you sure?
+                  </div>
                 </StyledTextBlock>
               </div>
             </AlertWrapper>

tests/js/spec/components/events/__snapshots__/sdkUpdates.spec.jsx.snap

@@ -70,122 +70,118 @@ exports[`EventSdkUpdates renders a suggestion to update the sdk and then enable
             </ForwardRef>
           </StyledInlineSvg>
           <StyledTextBlock>
-            <Component
+            <div
               className="css-1h3n7tg-TextBlock-StyledTextBlock e1xb5l7j2"
             >
-              <div
-                className="css-1h3n7tg-TextBlock-StyledTextBlock e1xb5l7j2"
-              >
-                We recommend you 
-                <EventSdkUpdateSuggestion
-                  event={
-                    Object {
-                      "id": "123",
-                      "sdk": Object {
-                        "name": "sentry.python",
-                        "version": "0.1.0",
+              We recommend you 
+              <EventSdkUpdateSuggestion
+                event={
+                  Object {
+                    "id": "123",
+                    "sdk": Object {
+                      "name": "sentry.python",
+                      "version": "0.1.0",
+                    },
+                    "sdkUpdates": Array [
+                      Object {
+                        "enables": Array [
+                          Object {
+                            "enables": Array [],
+                            "integrationName": "django",
+                            "integrationUrl": "https://docs.sentry.io/platforms/python/django/",
+                            "type": "enableIntegration",
+                          },
+                        ],
+                        "newSdkVersion": "0.9.0",
+                        "sdkName": "sentry.python",
+                        "sdkUrl": null,
+                        "type": "updateSdk",
                       },
-                      "sdkUpdates": Array [
-                        Object {
-                          "enables": Array [
-                            Object {
-                              "enables": Array [],
-                              "integrationName": "django",
-                              "integrationUrl": "https://docs.sentry.io/platforms/python/django/",
-                              "type": "enableIntegration",
-                            },
-                          ],
-                          "newSdkVersion": "0.9.0",
-                          "sdkName": "sentry.python",
-                          "sdkUrl": null,
-                          "type": "updateSdk",
-                        },
-                      ],
-                    }
+                    ],
                   }
-                  suggestion={
-                    Object {
-                      "enables": Array [
-                        Object {
-                          "enables": Array [],
-                          "integrationName": "django",
-                          "integrationUrl": "https://docs.sentry.io/platforms/python/django/",
-                          "type": "enableIntegration",
-                        },
-                      ],
-                      "newSdkVersion": "0.9.0",
-                      "sdkName": "sentry.python",
-                      "sdkUrl": null,
-                      "type": "updateSdk",
-                    }
+                }
+                suggestion={
+                  Object {
+                    "enables": Array [
+                      Object {
+                        "enables": Array [],
+                        "integrationName": "django",
+                        "integrationUrl": "https://docs.sentry.io/platforms/python/django/",
+                        "type": "enableIntegration",
+                      },
+                    ],
+                    "newSdkVersion": "0.9.0",
+                    "sdkName": "sentry.python",
+                    "sdkUrl": null,
+                    "type": "updateSdk",
                   }
-                >
-                  <span>
-                    update your SDK from version 0.1.0 to version 0.9.0
-                     so you can
-                    <AlertUl>
-                      <ul
-                        className="css-j5zjp6-AlertUl emcdiy70"
+                }
+              >
+                <span>
+                  update your SDK from version 0.1.0 to version 0.9.0
+                   so you can
+                  <AlertUl>
+                    <ul
+                      className="css-j5zjp6-AlertUl emcdiy70"
+                    >
+                      <li
+                        key="{\\"enables\\":[],\\"integrationName\\":\\"django\\",\\"integrationUrl\\":\\"https://docs.sentry.io/platforms/python/django/\\",\\"type\\":\\"enableIntegration\\"}"
                       >
-                        <li
-                          key="{\\"enables\\":[],\\"integrationName\\":\\"django\\",\\"integrationUrl\\":\\"https://docs.sentry.io/platforms/python/django/\\",\\"type\\":\\"enableIntegration\\"}"
-                        >
-                          <EventSdkUpdateSuggestion
-                            event={
-                              Object {
-                                "id": "123",
-                                "sdk": Object {
-                                  "name": "sentry.python",
-                                  "version": "0.1.0",
+                        <EventSdkUpdateSuggestion
+                          event={
+                            Object {
+                              "id": "123",
+                              "sdk": Object {
+                                "name": "sentry.python",
+                                "version": "0.1.0",
+                              },
+                              "sdkUpdates": Array [
+                                Object {
+                                  "enables": Array [
+                                    Object {
+                                      "enables": Array [],
+                                      "integrationName": "django",
+                                      "integrationUrl": "https://docs.sentry.io/platforms/python/django/",
+                                      "type": "enableIntegration",
+                                    },
+                                  ],
+                                  "newSdkVersion": "0.9.0",
+                                  "sdkName": "sentry.python",
+                                  "sdkUrl": null,
+                                  "type": "updateSdk",
                                 },
-                                "sdkUpdates": Array [
-                                  Object {
-                                    "enables": Array [
-                                      Object {
-                                        "enables": Array [],
-                                        "integrationName": "django",
-                                        "integrationUrl": "https://docs.sentry.io/platforms/python/django/",
-                                        "type": "enableIntegration",
-                                      },
-                                    ],
-                                    "newSdkVersion": "0.9.0",
-                                    "sdkName": "sentry.python",
-                                    "sdkUrl": null,
-                                    "type": "updateSdk",
-                                  },
-                                ],
-                              }
+                              ],
                             }
-                            suggestion={
-                              Object {
-                                "enables": Array [],
-                                "integrationName": "django",
-                                "integrationUrl": "https://docs.sentry.io/platforms/python/django/",
-                                "type": "enableIntegration",
-                              }
+                          }
+                          suggestion={
+                            Object {
+                              "enables": Array [],
+                              "integrationName": "django",
+                              "integrationUrl": "https://docs.sentry.io/platforms/python/django/",
+                              "type": "enableIntegration",
                             }
+                          }
+                        >
+                          <ForwardRef
+                            href="https://docs.sentry.io/platforms/python/django/"
+                            rel="noreferrer noopener"
+                            target="_blank"
                           >
-                            <ForwardRef
+                            <a
                               href="https://docs.sentry.io/platforms/python/django/"
                               rel="noreferrer noopener"
                               target="_blank"
                             >
-                              <a
-                                href="https://docs.sentry.io/platforms/python/django/"
-                                rel="noreferrer noopener"
-                                target="_blank"
-                              >
-                                enable the 'django' integration
-                              </a>
-                            </ForwardRef>
-                          </EventSdkUpdateSuggestion>
-                        </li>
-                      </ul>
-                    </AlertUl>
-                  </span>
-                </EventSdkUpdateSuggestion>
-              </div>
-            </Component>
+                              enable the 'django' integration
+                            </a>
+                          </ForwardRef>
+                        </EventSdkUpdateSuggestion>
+                      </li>
+                    </ul>
+                  </AlertUl>
+                </span>
+              </EventSdkUpdateSuggestion>
+            </div>
           </StyledTextBlock>
         </div>
       </AlertWrapper>

tests/js/spec/components/modals/__snapshots__/integrationDetailsModal.spec.jsx.snap

@@ -341,21 +341,17 @@ exports[`IntegrationDetailsModal renders simple integration 1`] = `
         type="warning"
       >
         <StyledTextBlock>
-          <Component
+          <div
             className="css-1h3n7tg-TextBlock-StyledTextBlock e1xb5l7j2"
           >
-            <div
-              className="css-1h3n7tg-TextBlock-StyledTextBlock e1xb5l7j2"
-            >
-              <span
-                dangerouslySetInnerHTML={
-                  Object {
-                    "__html": "This is a an alert example",
-                  }
+            <span
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "This is a an alert example",
                 }
-              />
-            </div>
-          </Component>
+              }
+            />
+          </div>
         </StyledTextBlock>
       </div>
     </AlertWrapper>

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

@@ -91,26 +91,18 @@ exports[`AccountSubscriptions renders list and can toggle 1`] = `
           </Wrapper>
         </SettingsPageHeading>
         <TextBlock>
-          <Component
-            className="css-1geyb25-TextBlock ec8ep340"
+          <div
+            className="css-1geyb25-TextBlock e1x1lar10"
           >
-            <div
-              className="css-1geyb25-TextBlock ec8ep340"
-            >
-              Sentry is committed to respecting your inbox. Our goal is to provide useful content and resources that make fixing errors less painful. Enjoyable even.
-            </div>
-          </Component>
+            Sentry is committed to respecting your inbox. Our goal is to provide useful content and resources that make fixing errors less painful. Enjoyable even.
+          </div>
         </TextBlock>
         <TextBlock>
-          <Component
-            className="css-1geyb25-TextBlock ec8ep340"
+          <div
+            className="css-1geyb25-TextBlock e1x1lar10"
           >
-            <div
-              className="css-1geyb25-TextBlock ec8ep340"
-            >
-              As part of our compliance with the EU’s General Data Protection Regulation (GDPR), starting on 25 May 2018, we’ll only email you according to the marketing categories to which you’ve explicitly opted-in.
-            </div>
-          </Component>
+            As part of our compliance with the EU’s General Data Protection Regulation (GDPR), starting on 25 May 2018, we’ll only email you according to the marketing categories to which you’ve explicitly opted-in.
+          </div>
         </TextBlock>
         <Panel>
           <Component
@@ -373,32 +365,24 @@ exports[`AccountSubscriptions renders list and can toggle 1`] = `
           </Component>
         </Panel>
         <TextBlock>
-          <Component
-            className="css-1geyb25-TextBlock ec8ep340"
+          <div
+            className="css-1geyb25-TextBlock e1x1lar10"
           >
-            <div
-              className="css-1geyb25-TextBlock ec8ep340"
-            >
-              We’re applying GDPR consent and privacy policies to all Sentry contacts, regardless of location. You’ll be able to manage your subscriptions here and from an Unsubscribe link in the footer of all marketing emails.
-            </div>
-          </Component>
+            We’re applying GDPR consent and privacy policies to all Sentry contacts, regardless of location. You’ll be able to manage your subscriptions here and from an Unsubscribe link in the footer of all marketing emails.
+          </div>
         </TextBlock>
         <TextBlock>
-          <Component
-            className="css-1geyb25-TextBlock ec8ep340"
+          <div
+            className="css-1geyb25-TextBlock e1x1lar10"
           >
-            <div
-              className="css-1geyb25-TextBlock ec8ep340"
+            Please contact 
+            <a
+              href="mailto:learn@sentry.io"
             >
-              Please contact 
-              <a
-                href="mailto:learn@sentry.io"
-              >
-                learn@sentry.io
-              </a>
-               with any questions or suggestions.
-            </div>
-          </Component>
+              learn@sentry.io
+            </a>
+             with any questions or suggestions.
+          </div>
         </TextBlock>
       </div>
     </DocumentTitle>

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

@@ -60,30 +60,22 @@ exports[`ProjectDebugFiles renders 1`] = `
     </Wrapper>
   </SettingsPageHeading>
   <TextBlock>
-    <Component
-      className="css-1geyb25-TextBlock ec8ep340"
+    <div
+      className="css-1geyb25-TextBlock e1x1lar10"
     >
-      <div
-        className="css-1geyb25-TextBlock ec8ep340"
-      >
-        
+      
             Debug information files are used to convert addresses and minified
             function names from native crash reports into function names and
             locations.
           
-      </div>
-    </Component>
+    </div>
   </TextBlock>
   <TextBlock>
-    <Component
-      className="css-1geyb25-TextBlock ec8ep340"
+    <div
+      className="css-1geyb25-TextBlock e1x1lar10"
     >
-      <div
-        className="css-1geyb25-TextBlock ec8ep340"
-      >
-        This list contains all uploaded debug information files:
-      </div>
-    </Component>
+      This list contains all uploaded debug information files:
+    </div>
   </TextBlock>
   <Panel>
     <Component

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

@@ -181,47 +181,43 @@ exports[`ProjectTags renders 1`] = `
         </withConfig(AccessContainer)>
       </PermissionAlert>
       <TextBlock>
-        <Component
-          className="css-1geyb25-TextBlock ec8ep340"
+        <div
+          className="css-1geyb25-TextBlock e1x1lar10"
         >
-          <div
-            className="css-1geyb25-TextBlock ec8ep340"
+          <span
+            key="5"
           >
             <span
-              key="5"
+              key="0"
             >
-              <span
-                key="0"
-              >
-                Each event in Sentry may be annotated with various tags (key and value pairs).
+              Each event in Sentry may be annotated with various tags (key and value pairs).
                  Learn how to 
-              </span>
-              <ForwardRef
+            </span>
+            <ForwardRef
+              href="https://docs.sentry.io/hosted/learn/context/"
+              key="2"
+              rel="noreferrer noopener"
+              target="_blank"
+            >
+              <a
                 href="https://docs.sentry.io/hosted/learn/context/"
-                key="2"
                 rel="noreferrer noopener"
                 target="_blank"
               >
-                <a
-                  href="https://docs.sentry.io/hosted/learn/context/"
-                  rel="noreferrer noopener"
-                  target="_blank"
+                <span
+                  key="1"
                 >
-                  <span
-                    key="1"
-                  >
-                    add custom tags
-                  </span>
-                </a>
-              </ForwardRef>
-              <span
-                key="3"
-              >
-                .
-              </span>
+                  add custom tags
+                </span>
+              </a>
+            </ForwardRef>
+            <span
+              key="3"
+            >
+              .
             </span>
-          </div>
-        </Component>
+          </span>
+        </div>
       </TextBlock>
       <Panel>
         <Component

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

@@ -123,15 +123,11 @@ exports[`InviteMember should render roles when available and allowed, and handle
       </Wrapper>
     </SettingsPageHeading>
     <TextBlock>
-      <Component
-        className="css-1geyb25-TextBlock ec8ep340"
+      <div
+        className="css-1geyb25-TextBlock e1x1lar10"
       >
-        <div
-          className="css-1geyb25-TextBlock ec8ep340"
-        >
-          Invite a member to join this organization via their email address. If they do not already have an account, they will first be asked to create one. Multiple emails delimited by commas.
-        </div>
-      </Component>
+        Invite a member to join this organization via their email address. If they do not already have an account, they will first be asked to create one. Multiple emails delimited by commas.
+      </div>
     </TextBlock>
     <div>
       <div
@@ -292,19 +288,15 @@ exports[`InviteMember should render roles when available and allowed, and handle
                               <TextBlock
                                 className="css-gx0lhm"
                               >
-                                <Component
-                                  className="css-1ai2po6-TextBlock ec8ep340"
+                                <div
+                                  className="css-1ai2po6-TextBlock e1x1lar10"
                                 >
                                   <div
-                                    className="css-1ai2po6-TextBlock ec8ep340"
+                                    className="help-block"
                                   >
-                                    <div
-                                      className="help-block"
-                                    >
-                                      a normal member
-                                    </div>
+                                    a normal member
                                   </div>
-                                </Component>
+                                </div>
                               </TextBlock>
                             </div>
                           </label>
@@ -369,19 +361,15 @@ exports[`InviteMember should render roles when available and allowed, and handle
                               <TextBlock
                                 className="css-gx0lhm"
                               >
-                                <Component
-                                  className="css-1ai2po6-TextBlock ec8ep340"
+                                <div
+                                  className="css-1ai2po6-TextBlock e1x1lar10"
                                 >
                                   <div
-                                    className="css-1ai2po6-TextBlock ec8ep340"
+                                    className="help-block"
                                   >
-                                    <div
-                                      className="help-block"
-                                    >
-                                      another role
-                                    </div>
+                                    another role
                                   </div>
-                                </Component>
+                                </div>
                               </TextBlock>
                             </div>
                           </label>
@@ -733,16 +721,11 @@ exports[`InviteMember should render roles when available and allowed, and handle
                           <Description
                             noMargin={true}
                           >
-                            <Component
+                            <div
                               className="css-pwn5v-TextBlock-Description-MarginStyles e1h3yfdx0"
-                              noMargin={true}
                             >
-                              <div
-                                className="css-pwn5v-TextBlock-Description-MarginStyles e1h3yfdx0"
-                              >
-                                No Teams assigned
-                              </div>
-                            </Component>
+                              No Teams assigned
+                            </div>
                           </Description>
                         </div>
                       </Component>

tests/js/spec/views/settings/__snapshots__/organizationApiKeysList.spec.jsx.snap

@@ -200,48 +200,44 @@ exports[`OrganizationApiKeysList renders 1`] = `
       </Wrapper>
     </SettingsPageHeading>
     <TextBlock>
-      <Component
-        className="css-1geyb25-TextBlock ec8ep340"
+      <div
+        className="css-1geyb25-TextBlock e1x1lar10"
       >
-        <div
-          className="css-1geyb25-TextBlock ec8ep340"
+        <span
+          key="5"
         >
           <span
-            key="5"
+            key="0"
           >
-            <span
-              key="0"
-            >
-              API keys grant access to the 
-            </span>
-            <ForwardRef
+            API keys grant access to the 
+          </span>
+          <ForwardRef
+            href="https://docs.sentry.io/hosted/api/"
+            key="2"
+            rel="noreferrer noopener"
+            target="_blank"
+          >
+            <a
               href="https://docs.sentry.io/hosted/api/"
-              key="2"
               rel="noreferrer noopener"
               target="_blank"
             >
-              <a
-                href="https://docs.sentry.io/hosted/api/"
-                rel="noreferrer noopener"
-                target="_blank"
+              <span
+                key="1"
               >
-                <span
-                  key="1"
-                >
-                  developer web API
-                </span>
-              </a>
-            </ForwardRef>
-            <span
-              key="3"
-            >
-              .
+                developer web API
+              </span>
+            </a>
+          </ForwardRef>
+          <span
+            key="3"
+          >
+            .
           If you're looking to configure a Sentry client, you'll need a
           client key which is available in your project settings.
-            </span>
           </span>
-        </div>
-      </Component>
+        </span>
+      </div>
     </TextBlock>
     <div
       className="alert alert-block alert-info"

tests/js/spec/views/settings/__snapshots__/organizationRateLimits.spec.jsx.snap

@@ -4,42 +4,38 @@ exports[`Organization Rate Limits renders with maxRate and maxRateInterval set 1
 <TextBlock
   className="css-gx0lhm"
 >
-  <Component
-    className="css-1ai2po6-TextBlock ec8ep340"
+  <div
+    className="css-1ai2po6-TextBlock e1x1lar10"
   >
-    <div
-      className="css-1ai2po6-TextBlock ec8ep340"
+    <span
+      key="8"
     >
       <span
-        key="8"
+        key="0"
       >
-        <span
-          key="0"
-        >
-          Your account is limited to a maximum of 
-        </span>
-        <span
-          key="2"
-        >
-          100
-        </span>
-        <span
-          key="3"
-        >
-           events per 
-        </span>
-        <span
-          key="5"
-        >
-          60
-        </span>
-        <span
-          key="6"
-        >
-           seconds.
-        </span>
+        Your account is limited to a maximum of 
       </span>
-    </div>
-  </Component>
+      <span
+        key="2"
+      >
+        100
+      </span>
+      <span
+        key="3"
+      >
+         events per 
+      </span>
+      <span
+        key="5"
+      >
+        60
+      </span>
+      <span
+        key="6"
+      >
+         seconds.
+      </span>
+    </span>
+  </div>
 </TextBlock>
 `;