ref(ui): Remove <DynamicWrapper>

docs-ui/components/dynamicWrapper.stories.js → docs-ui/components/getDynamicText.stories.js

@@ -2,10 +2,10 @@ import React from 'react';
 import {storiesOf} from '@storybook/react';
 import {withInfo} from '@storybook/addon-info';
 
-import DynamicWrapper from 'app/components/dynamicWrapper';
+import getDynamicText from 'app/utils/getDynamicText';
 
-storiesOf('Utility|DynamicWrapper', module).add(
-  'DynamicWrapper',
+storiesOf('Utility|getDynamicText', module).add(
+  'getDynamicText',
   withInfo(
     `
     Use this to wrap dynamic content (i.e. dates) for acceptance/snapshot tests.
@@ -14,7 +14,12 @@ storiesOf('Utility|DynamicWrapper', module).add(
     `
   )(() => {
     return (
-      <DynamicWrapper fixed="Fixed Content" value="Pretend this is a dynamic value" />
+      <React.Fragment>
+        {getDynamicText({
+          fixed: 'Fixed Content',
+          value: 'Pretend this is a dynamic value',
+        })}
+      </React.Fragment>
     );
   })
 );

src/sentry/static/sentry/app/components/footer.jsx

@@ -2,8 +2,8 @@ import React from 'react';
 
 import {t} from 'app/locale';
 import ConfigStore from 'app/stores/configStore';
-import DynamicWrapper from 'app/components/dynamicWrapper';
 import Hook from 'app/components/hook';
+import getDynamicText from 'app/utils/getDynamicText';
 
 const Footer = () => {
   const config = ConfigStore.getConfig();
@@ -31,7 +31,10 @@ const Footer = () => {
         {config.isOnPremise && (
           <div className="version pull-left">
             {'Sentry '}
-            <DynamicWrapper fixed="Acceptance Test" value={config.version.current} />
+            {getDynamicText({
+              fixed: 'Acceptance Test',
+              value: config.version.current,
+            })}
           </div>
         )}
         <a href="/" className="icon-sentry-logo" />

src/sentry/static/sentry/app/views/organizationEventsV2/data.jsx

@@ -2,17 +2,17 @@ import React from 'react';
 import styled from 'react-emotion';
 
 import {deepFreeze} from 'app/utils';
+import {t} from 'app/locale';
 import Count from 'app/components/count';
-import DynamicWrapper from 'app/components/dynamicWrapper';
+import DateTime from 'app/components/dateTime';
 import Link from 'app/components/links/link';
-import overflowEllipsis from 'app/styles/overflowEllipsis';
-import space from 'app/styles/space';
 import ProjectBadge from 'app/components/idBadge/projectBadge';
 import UserBadge from 'app/components/idBadge/userBadge';
-import DateTime from 'app/components/dateTime';
+import getDynamicText from 'app/utils/getDynamicText';
+import overflowEllipsis from 'app/styles/overflowEllipsis';
 import pinIcon from 'app/../images/location-pin.png';
+import space from 'app/styles/space';
 
-import {t} from 'app/locale';
 import {QueryLink} from './styles';
 
 export const MODAL_QUERY_KEYS = ['eventSlug', 'groupSlug', 'transactionSlug'];
@@ -197,9 +197,12 @@ export const SPECIAL_FIELDS = {
     sortField: 'timestamp',
     renderFunc: data => (
       <Container>
-        {data.timestamp ? (
-          <DynamicWrapper value={<StyledDateTime date={data.timestamp} />} fixed="time" />
-        ) : null}
+        {data.timestamp
+          ? getDynamicText({
+              value: <StyledDateTime date={data.timestamp} />,
+              fixed: 'time',
+            })
+          : null}
       </Container>
     ),
   },
@@ -271,10 +274,10 @@ export const SPECIAL_FIELDS = {
       return (
         <Container>
           {data.last_seen ? (
-            <DynamicWrapper
-              value={<StyledDateTime date={data.last_seen} />}
-              fixed="time"
-            />
+            getDynamicText({
+              value: <StyledDateTime date={data.last_seen} />,
+              fixed: 'time',
+            })
           ) : (
             <span>n/a</span>
           )}

src/sentry/static/sentry/app/views/projectsDashboard/deploys.jsx

@@ -1,15 +1,15 @@
-import React from 'react';
-import styled from 'react-emotion';
 import {Flex, Box} from 'grid-emotion';
+import React from 'react';
 import moment from 'moment-timezone';
+import styled from 'react-emotion';
 
-import SentryTypes from 'app/sentryTypes';
+import {getShortVersion} from 'app/utils';
+import {t} from 'app/locale';
 import Button from 'app/components/button';
 import Link from 'app/components/links/link';
-import {t} from 'app/locale';
+import SentryTypes from 'app/sentryTypes';
 import TextOverflow from 'app/components/textOverflow';
-import DynamicWrapper from 'app/components/dynamicWrapper';
-import {getShortVersion} from 'app/utils';
+import getDynamicText from 'app/utils/getDynamicText';
 
 const DEPLOY_COUNT = 2;
 
@@ -74,10 +74,12 @@ class Deploy extends React.Component {
           </StyledLink>
         </Version>
         <Flex w={90} justify="flex-end">
-          <StyledDynamicWrapper
-            value={moment(deploy.dateFinished).fromNow()}
-            fixed="3 hours ago"
-          />
+          <DeployTimeWrapper>
+            {getDynamicText({
+              value: moment(deploy.dateFinished).fromNow(),
+              fixed: '3 hours ago',
+            })}
+          </DeployTimeWrapper>
         </Flex>
       </DeployRow>
     );
@@ -113,7 +115,7 @@ const StyledLink = styled(Link)`
   white-space: nowrap;
 `;
 
-const StyledDynamicWrapper = styled(DynamicWrapper)`
+const DeployTimeWrapper = styled('div')`
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;

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

@@ -9,7 +9,6 @@ import AsyncView from 'app/views/asyncView';
 import AutoSelectText from 'app/components/autoSelectText';
 import Button from 'app/components/button';
 import Confirm from 'app/components/confirm';
-import DynamicWrapper from 'app/components/dynamicWrapper';
 import Field from 'app/views/settings/components/forms/field';
 import LoadingIndicator from 'app/components/loadingIndicator';
 import PluginList from 'app/components/pluginList';
@@ -202,21 +201,21 @@ class ProjectReleaseTracking extends AsyncView {
               )}
             </p>
 
-            <DynamicWrapper
-              value={
+            {getDynamicText({
+              value: (
                 <AutoSelectText>
                   <pre>{this.getReleaseWebhookIntructions()}</pre>
                 </AutoSelectText>
-              }
-              fixed={
+              ),
+              fixed: (
                 <pre>
                   {`curl __WEBHOOK_URL__ \\
   -X POST \\
   -H 'Content-Type: application/json' \\
   -d \'{"version": "abcdefg"}\'`}
                 </pre>
-              }
-            />
+              ),
+            })}
           </PanelBody>
         </Panel>
 

src/sentry/static/sentry/app/views/settings/projectPlugins/projectPluginRow.jsx

@@ -5,12 +5,12 @@ import React from 'react';
 import styled, {css} from 'react-emotion';
 
 import {t} from 'app/locale';
-import DynamicWrapper from 'app/components/dynamicWrapper';
 import ExternalLink from 'app/components/links/externalLink';
 import Access from 'app/components/acl/access';
 import PluginIcon from 'app/plugins/components/pluginIcon';
 import SentryTypes from 'app/sentryTypes';
 import Switch from 'app/components/switch';
+import getDynamicText from 'app/utils/getDynamicText';
 import recreateRoute from 'app/utils/recreateRoute';
 
 const grayText = css`
@@ -53,12 +53,12 @@ class ProjectPluginRow extends React.PureComponent {
                 <Flex justify="center" direction="column">
                   <PluginName>
                     {`${name} `}
-                    <DynamicWrapper
-                      value={
+                    {getDynamicText({
+                      value: (
                         <Version>{version ? `v${version}` : <em>{t('n/a')}</em>}</Version>
-                      }
-                      fixed={<Version>v10</Version>}
-                    />
+                      ),
+                      fixed: <Version>v10</Version>,
+                    })}
                   </PluginName>
                   <div>
                     {author && (

tests/js/spec/utils/getDynamicText.spec.jsx

@@ -0,0 +1,25 @@
+import getDynamicText from 'app/utils/getDynamicText';
+
+describe('getDynamicText', function() {
+  it('renders actual value', function() {
+    expect(
+      getDynamicText({
+        fixed: 'Text',
+        value: 'Dynamic Content',
+      })
+    ).toEqual('Dynamic Content');
+  });
+
+  it('renders fixed content when `process.env.IS_PERCY` is true', function() {
+    // eslint-disable-next-line no-undef
+    process.env.IS_PERCY = true;
+    expect(
+      getDynamicText({
+        fixed: 'Text',
+        value: 'Dynamic Content',
+      })
+    ).toEqual('Text');
+    // eslint-disable-next-line no-undef
+    process.env.IS_PERCY = null;
+  });
+});

tests/js/spec/views/projectPlugins/__snapshots__/projectPluginsRow.spec.jsx.snap

@@ -179,28 +179,13 @@ exports[`ProjectPluginRow renders 1`] = `
                             className="css-36lssg-PluginName e1y7j6vq1"
                           >
                             Amazon SQS 
-                            <DynamicWrapper
-                              fixed={
-                                <Version>
-                                  v10
-                                </Version>
-                              }
-                              value={
-                                <Version>
-                                  v8.23.0.dev0
-                                </Version>
-                              }
-                            >
-                              <span>
-                                <Version>
-                                  <span
-                                    className="css-1det7j8-Version e1y7j6vq3"
-                                  >
-                                    v8.23.0.dev0
-                                  </span>
-                                </Version>
+                            <Version>
+                              <span
+                                className="css-1det7j8-Version e1y7j6vq3"
+                              >
+                                v8.23.0.dev0
                               </span>
-                            </DynamicWrapper>
+                            </Version>
                           </div>
                         </PluginName>
                         <div>