ref(grid-emotion): Refactor `<BaseBadge>` (#15132)

src/sentry/static/sentry/app/components/idBadge/baseBadge.jsx

@@ -1,4 +1,3 @@
-import {Flex} from 'grid-emotion';
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'react-emotion';
@@ -72,7 +71,7 @@ class BaseBadge extends React.PureComponent {
     };
 
     return (
-      <Flex align="center" className={className}>
+      <BaseBadgeWrapper className={className}>
         {!hideAvatar && (
           <StyledAvatar
             css={avatarClassName}
@@ -89,11 +88,16 @@ class BaseBadge extends React.PureComponent {
           )}
           {!!description && <Description>{description}</Description>}
         </DisplayNameAndDescription>
-      </Flex>
+      </BaseBadgeWrapper>
     );
   }
 }
 
+const BaseBadgeWrapper = styled('div')`
+  display: flex;
+  align-items: center;
+`;
+
 export default BaseBadge;
 
 const StyledAvatar = styled(Avatar)`
@@ -101,7 +105,8 @@ const StyledAvatar = styled(Avatar)`
   flex-shrink: 0;
 `;
 
-const DisplayNameAndDescription = styled(Flex)`
+const DisplayNameAndDescription = styled('div')`
+  display: flex;
   flex-direction: column;
   line-height: 1;
   overflow: hidden;

tests/js/spec/views/organizationGroupDetails/__snapshots__/groupSimilar.spec.jsx.snap

@@ -1361,19 +1361,25 @@ exports[`Issues Similar View renders with mocked data 1`] = `
                                                 }
                                               }
                                             >
-                                              <Flex
-                                                align="center"
-                                              >
-                                                <Base
-                                                  align="center"
-                                                  className="css-5ipae5"
+                                              <BaseBadgeWrapper>
+                                                <div
+                                                  className="css-td6t8v-BaseBadgeWrapper e165dl3i0"
                                                 >
-                                                  <div
-                                                    className="css-5ipae5"
-                                                    is={null}
+                                                  <StyledAvatar
+                                                    className="css-0"
+                                                    hasTooltip={false}
+                                                    hideName={true}
+                                                    project={
+                                                      Object {
+                                                        "id": "123",
+                                                        "name": "Internal",
+                                                        "slug": "project-slug",
+                                                      }
+                                                    }
+                                                    size={14}
                                                   >
-                                                    <StyledAvatar
-                                                      className="css-0"
+                                                    <Avatar
+                                                      className="css-f5iyic-StyledAvatar e165dl3i1"
                                                       hasTooltip={false}
                                                       hideName={true}
                                                       project={
@@ -1385,8 +1391,8 @@ exports[`Issues Similar View renders with mocked data 1`] = `
                                                       }
                                                       size={14}
                                                     >
-                                                      <Avatar
-                                                        className="css-f5iyic-StyledAvatar e165dl3i0"
+                                                      <ProjectAvatar
+                                                        className="css-f5iyic-StyledAvatar e165dl3i1"
                                                         hasTooltip={false}
                                                         hideName={true}
                                                         project={
@@ -1398,91 +1404,72 @@ exports[`Issues Similar View renders with mocked data 1`] = `
                                                         }
                                                         size={14}
                                                       >
-                                                        <ProjectAvatar
-                                                          className="css-f5iyic-StyledAvatar e165dl3i0"
+                                                        <PlatformList
+                                                          className="css-f5iyic-StyledAvatar e165dl3i1"
+                                                          consistentWidth={false}
+                                                          direction="right"
                                                           hasTooltip={false}
                                                           hideName={true}
-                                                          project={
-                                                            Object {
-                                                              "id": "123",
-                                                              "name": "Internal",
-                                                              "slug": "project-slug",
-                                                            }
-                                                          }
+                                                          max={1}
+                                                          platforms={Array []}
                                                           size={14}
                                                         >
-                                                          <PlatformList
-                                                            className="css-f5iyic-StyledAvatar e165dl3i0"
+                                                          <PlatformIcons
+                                                            className="css-f5iyic-StyledAvatar e165dl3i1"
                                                             consistentWidth={false}
                                                             direction="right"
-                                                            hasTooltip={false}
-                                                            hideName={true}
                                                             max={1}
-                                                            platforms={Array []}
                                                             size={14}
                                                           >
-                                                            <PlatformIcons
-                                                              className="css-f5iyic-StyledAvatar e165dl3i0"
-                                                              consistentWidth={false}
+                                                            <div
+                                                              className="e165dl3i1 css-7hp7lr-PlatformIcons-StyledAvatar ezvce7z0"
                                                               direction="right"
                                                               max={1}
                                                               size={14}
                                                             >
-                                                              <div
-                                                                className="e165dl3i0 css-7hp7lr-PlatformIcons-StyledAvatar ezvce7z0"
-                                                                direction="right"
-                                                                max={1}
+                                                              <StyledPlatformIcon
+                                                                platform="default"
                                                                 size={14}
                                                               >
-                                                                <StyledPlatformIcon
+                                                                <Component
+                                                                  className="css-15yyc0n-StyledPlatformIcon ezvce7z1"
                                                                   platform="default"
                                                                   size={14}
                                                                 >
-                                                                  <Component
+                                                                  <Platformicon
                                                                     className="css-15yyc0n-StyledPlatformIcon ezvce7z1"
                                                                     platform="default"
-                                                                    size={14}
+                                                                    size="14px"
                                                                   >
-                                                                    <Platformicon
+                                                                    <img
                                                                       className="css-15yyc0n-StyledPlatformIcon ezvce7z1"
-                                                                      platform="default"
-                                                                      size="14px"
-                                                                    >
-                                                                      <img
-                                                                        className="css-15yyc0n-StyledPlatformIcon ezvce7z1"
-                                                                        height="14px"
-                                                                        src={
-                                                                          Object {
-                                                                            "default": Object {
-                                                                              "id": "test",
-                                                                              "viewBox": Object {},
-                                                                            },
-                                                                          }
+                                                                      height="14px"
+                                                                      src={
+                                                                        Object {
+                                                                          "default": Object {
+                                                                            "id": "test",
+                                                                            "viewBox": Object {},
+                                                                          },
                                                                         }
-                                                                        width="14px"
-                                                                      />
-                                                                    </Platformicon>
-                                                                  </Component>
-                                                                </StyledPlatformIcon>
-                                                              </div>
-                                                            </PlatformIcons>
-                                                          </PlatformList>
-                                                        </ProjectAvatar>
-                                                      </Avatar>
-                                                    </StyledAvatar>
-                                                    <DisplayNameAndDescription>
-                                                      <Base
-                                                        className="css-1h9j57p-DisplayNameAndDescription e165dl3i1"
-                                                      >
-                                                        <div
-                                                          className="css-1h9j57p-DisplayNameAndDescription e165dl3i1"
-                                                          is={null}
-                                                        />
-                                                      </Base>
-                                                    </DisplayNameAndDescription>
-                                                  </div>
-                                                </Base>
-                                              </Flex>
+                                                                      }
+                                                                      width="14px"
+                                                                    />
+                                                                  </Platformicon>
+                                                                </Component>
+                                                              </StyledPlatformIcon>
+                                                            </div>
+                                                          </PlatformIcons>
+                                                        </PlatformList>
+                                                      </ProjectAvatar>
+                                                    </Avatar>
+                                                  </StyledAvatar>
+                                                  <DisplayNameAndDescription>
+                                                    <div
+                                                      className="css-1yzfvrt-DisplayNameAndDescription e165dl3i2"
+                                                    />
+                                                  </DisplayNameAndDescription>
+                                                </div>
+                                              </BaseBadgeWrapper>
                                             </BaseBadge>
                                           </ProjectBadge>
                                           <StyledAutoSelectText

tests/js/spec/views/projectsDashboard/__snapshots__/projectCard.spec.jsx.snap

@@ -233,20 +233,42 @@ exports[`ProjectCard renders 1`] = `
                               }
                             }
                           >
-                            <Flex
-                              align="center"
+                            <BaseBadgeWrapper
                               className="css-1gy4gs4-StyledIdBadge e1o95it05"
                             >
-                              <Base
-                                align="center"
-                                className="e1o95it05 css-v2wlq8-StyledIdBadge"
+                              <div
+                                className="e1o95it05 css-18f42c1-BaseBadgeWrapper-StyledIdBadge e165dl3i0"
                               >
-                                <div
-                                  className="e1o95it05 css-v2wlq8-StyledIdBadge"
-                                  is={null}
+                                <StyledAvatar
+                                  className="css-0"
+                                  hasTooltip={false}
+                                  project={
+                                    Object {
+                                      "environments": Array [],
+                                      "hasAccess": true,
+                                      "id": "2",
+                                      "isBookmarked": false,
+                                      "isMember": true,
+                                      "name": "Project Name",
+                                      "platform": "javascript",
+                                      "slug": "project-slug",
+                                      "stats": Array [
+                                        Array [
+                                          1525042800,
+                                          1,
+                                        ],
+                                        Array [
+                                          1525046400,
+                                          2,
+                                        ],
+                                      ],
+                                      "teams": Array [],
+                                    }
+                                  }
+                                  size={18}
                                 >
-                                  <StyledAvatar
-                                    className="css-0"
+                                  <Avatar
+                                    className="css-robds0-StyledAvatar e165dl3i1"
                                     hasTooltip={false}
                                     project={
                                       Object {
@@ -273,8 +295,8 @@ exports[`ProjectCard renders 1`] = `
                                     }
                                     size={18}
                                   >
-                                    <Avatar
-                                      className="css-robds0-StyledAvatar e165dl3i0"
+                                    <ProjectAvatar
+                                      className="css-robds0-StyledAvatar e165dl3i1"
                                       hasTooltip={false}
                                       project={
                                         Object {
@@ -301,123 +323,89 @@ exports[`ProjectCard renders 1`] = `
                                       }
                                       size={18}
                                     >
-                                      <ProjectAvatar
-                                        className="css-robds0-StyledAvatar e165dl3i0"
+                                      <PlatformList
+                                        className="css-robds0-StyledAvatar e165dl3i1"
+                                        consistentWidth={false}
+                                        direction="right"
                                         hasTooltip={false}
-                                        project={
-                                          Object {
-                                            "environments": Array [],
-                                            "hasAccess": true,
-                                            "id": "2",
-                                            "isBookmarked": false,
-                                            "isMember": true,
-                                            "name": "Project Name",
-                                            "platform": "javascript",
-                                            "slug": "project-slug",
-                                            "stats": Array [
-                                              Array [
-                                                1525042800,
-                                                1,
-                                              ],
-                                              Array [
-                                                1525046400,
-                                                2,
-                                              ],
-                                            ],
-                                            "teams": Array [],
-                                          }
+                                        max={1}
+                                        platforms={
+                                          Array [
+                                            "javascript",
+                                          ]
                                         }
                                         size={18}
                                       >
-                                        <PlatformList
-                                          className="css-robds0-StyledAvatar e165dl3i0"
+                                        <PlatformIcons
+                                          className="css-robds0-StyledAvatar e165dl3i1"
                                           consistentWidth={false}
                                           direction="right"
-                                          hasTooltip={false}
                                           max={1}
-                                          platforms={
-                                            Array [
-                                              "javascript",
-                                            ]
-                                          }
                                           size={18}
                                         >
-                                          <PlatformIcons
-                                            className="css-robds0-StyledAvatar e165dl3i0"
-                                            consistentWidth={false}
+                                          <div
+                                            className="e165dl3i1 css-1cou1l3-PlatformIcons-StyledAvatar ezvce7z0"
                                             direction="right"
                                             max={1}
                                             size={18}
                                           >
-                                            <div
-                                              className="e165dl3i0 css-1cou1l3-PlatformIcons-StyledAvatar ezvce7z0"
-                                              direction="right"
-                                              max={1}
+                                            <StyledPlatformIcon
+                                              key="javascript"
+                                              platform="javascript"
                                               size={18}
                                             >
-                                              <StyledPlatformIcon
-                                                key="javascript"
+                                              <Component
+                                                className="css-13qi1e0-StyledPlatformIcon ezvce7z1"
                                                 platform="javascript"
                                                 size={18}
                                               >
-                                                <Component
+                                                <Platformicon
                                                   className="css-13qi1e0-StyledPlatformIcon ezvce7z1"
                                                   platform="javascript"
-                                                  size={18}
+                                                  size="18px"
                                                 >
-                                                  <Platformicon
+                                                  <img
                                                     className="css-13qi1e0-StyledPlatformIcon ezvce7z1"
-                                                    platform="javascript"
-                                                    size="18px"
-                                                  >
-                                                    <img
-                                                      className="css-13qi1e0-StyledPlatformIcon ezvce7z1"
-                                                      height="18px"
-                                                      src={
-                                                        Object {
-                                                          "default": Object {
-                                                            "id": "test",
-                                                            "viewBox": Object {},
-                                                          },
-                                                        }
+                                                    height="18px"
+                                                    src={
+                                                      Object {
+                                                        "default": Object {
+                                                          "id": "test",
+                                                          "viewBox": Object {},
+                                                        },
                                                       }
-                                                      width="18px"
-                                                    />
-                                                  </Platformicon>
-                                                </Component>
-                                              </StyledPlatformIcon>
-                                            </div>
-                                          </PlatformIcons>
-                                        </PlatformList>
-                                      </ProjectAvatar>
-                                    </Avatar>
-                                  </StyledAvatar>
-                                  <DisplayNameAndDescription>
-                                    <Base
-                                      className="css-1h9j57p-DisplayNameAndDescription e165dl3i1"
+                                                    }
+                                                    width="18px"
+                                                  />
+                                                </Platformicon>
+                                              </Component>
+                                            </StyledPlatformIcon>
+                                          </div>
+                                        </PlatformIcons>
+                                      </PlatformList>
+                                    </ProjectAvatar>
+                                  </Avatar>
+                                </StyledAvatar>
+                                <DisplayNameAndDescription>
+                                  <div
+                                    className="css-1yzfvrt-DisplayNameAndDescription e165dl3i2"
+                                  >
+                                    <DisplayName
+                                      data-test-id="badge-display-name"
                                     >
-                                      <div
-                                        className="css-1h9j57p-DisplayNameAndDescription e165dl3i1"
-                                        is={null}
+                                      <span
+                                        className="css-d0rtl9-DisplayName e165dl3i3"
+                                        data-test-id="badge-display-name"
                                       >
-                                        <DisplayName
-                                          data-test-id="badge-display-name"
-                                        >
-                                          <span
-                                            className="css-d0rtl9-DisplayName e165dl3i2"
-                                            data-test-id="badge-display-name"
-                                          >
-                                            <span>
-                                              project-slug
-                                            </span>
-                                          </span>
-                                        </DisplayName>
-                                      </div>
-                                    </Base>
-                                  </DisplayNameAndDescription>
-                                </div>
-                              </Base>
-                            </Flex>
+                                        <span>
+                                          project-slug
+                                        </span>
+                                      </span>
+                                    </DisplayName>
+                                  </div>
+                                </DisplayNameAndDescription>
+                              </div>
+                            </BaseBadgeWrapper>
                           </BaseBadge>
                         </ProjectBadge>
                       </ErrorBoundary>