ref(ts): Convert sessionHistory to typescript - Part 2 (#22021)

src/sentry/static/sentry/app/routes.jsx

@@ -119,7 +119,7 @@ function routes() {
             name="Session History"
             componentPromise={() =>
               import(
-                /* webpackChunkName: "AccountSecuritySessionHistory" */ 'app/views/settings/account/accountSecurity/accountSecuritySessionHistory'
+                /* webpackChunkName: "SessionHistory" */ 'app/views/settings/account/accountSecurity/sessionHistory'
               )
             }
             component={errorHandler(LazyLoad)}

src/sentry/static/sentry/app/types/index.tsx

@@ -1686,3 +1686,12 @@ export type Identity = {
 
 //taken from https://stackoverflow.com/questions/46634876/how-can-i-change-a-readonly-property-in-typescript
 export type Writable<T> = {-readonly [K in keyof T]: T[K]};
+
+export type InternetProtocol = {
+  id: string;
+  ipAddress: string;
+  lastSeen: string;
+  firstSeen: string;
+  countryCode: string | null;
+  regionCode: string | null;
+};

src/sentry/static/sentry/app/views/settings/account/accountSecurity/accountSecuritySessionHistory.tsx → src/sentry/static/sentry/app/views/settings/account/accountSecurity/sessionHistory/index.tsx

@@ -2,47 +2,17 @@ import React from 'react';
 import styled from '@emotion/styled';
 import {RouteComponentProps} from 'react-router/lib/Router';
 
-import {Panel, PanelBody, PanelHeader, PanelItem} from 'app/components/panels';
+import {Panel, PanelBody, PanelHeader} from 'app/components/panels';
 import {t} from 'app/locale';
 import AsyncView from 'app/views/asyncView';
 import ListLink from 'app/components/links/listLink';
 import NavTabs from 'app/components/navTabs';
 import SettingsPageHeader from 'app/views/settings/components/settingsPageHeader';
-import TimeSince from 'app/components/timeSince';
 import recreateRoute from 'app/utils/recreateRoute';
-import space from 'app/styles/space';
+import {InternetProtocol} from 'app/types';
 
-type InternetProtocol = {
-  id: string;
-  ipAddress: string;
-  lastSeen: string;
-  firstSeen: string;
-  countryCode: string | null;
-  regionCode: string | null;
-};
-
-function SessionRow({
-  ipAddress,
-  lastSeen,
-  firstSeen,
-  countryCode,
-  regionCode,
-}: Omit<InternetProtocol, 'id'>) {
-  return (
-    <SessionPanelItem>
-      <IpAndLocation>
-        <div>
-          <IpAddress>{ipAddress}</IpAddress>
-          {countryCode && regionCode && (
-            <CountryCode>{`${countryCode} (${regionCode})`}</CountryCode>
-          )}
-        </div>
-      </IpAndLocation>
-      <StyledTimeSince date={firstSeen} />
-      <StyledTimeSince date={lastSeen} />
-    </SessionPanelItem>
-  );
-}
+import SessionRow from './sessionRow';
+import {tableLayout} from './utils';
 
 type Props = RouteComponentProps<{}, {}>;
 
@@ -50,7 +20,7 @@ type State = {
   ipList: Array<InternetProtocol> | null;
 } & AsyncView['state'];
 
-class AccountSecuritySessionHistory extends AsyncView<Props, State> {
+class SessionHistory extends AsyncView<Props, State> {
   getTitle() {
     return t('Session History');
   }
@@ -94,9 +64,10 @@ class AccountSecuritySessionHistory extends AsyncView<Props, State> {
             <div>{t('First Seen')}</div>
             <div>{t('Last Seen')}</div>
           </SessionPanelHeader>
+
           <PanelBody>
-            {ipList.map(({id, ...ip}) => (
-              <SessionRow key={id} {...ip} />
+            {ipList.map(({id, ...ipObj}) => (
+              <SessionRow key={id} {...ipObj} />
             ))}
           </PanelBody>
         </Panel>
@@ -105,39 +76,9 @@ class AccountSecuritySessionHistory extends AsyncView<Props, State> {
   }
 }
 
-export default AccountSecuritySessionHistory;
-
-const IpAddress = styled('div')`
-  margin-bottom: ${space(0.5)};
-  font-weight: bold;
-`;
-
-const CountryCode = styled('div')`
-  font-size: ${p => p.theme.fontSizeRelativeSmall};
-`;
-
-const StyledTimeSince = styled(TimeSince)`
-  font-size: ${p => p.theme.fontSizeRelativeSmall};
-`;
-
-const IpAndLocation = styled('div')`
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-`;
-
-const getTableLayout = `
-  display: grid;
-  grid-template-columns: auto 140px 140px;
-  grid-gap ${space(1)};
-  align-items: center;
-`;
+export default SessionHistory;
 
 const SessionPanelHeader = styled(PanelHeader)`
-  ${getTableLayout}
+  ${tableLayout}
   justify-content: initial;
 `;
-
-const SessionPanelItem = styled(PanelItem)`
-  ${getTableLayout}
-`;

src/sentry/static/sentry/app/views/settings/account/accountSecurity/sessionHistory/sessionRow.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import styled from '@emotion/styled';
+
+import {PanelItem} from 'app/components/panels';
+import TimeSince from 'app/components/timeSince';
+import space from 'app/styles/space';
+import {InternetProtocol} from 'app/types';
+
+import {tableLayout} from './utils';
+
+function SessionRow({
+  ipAddress,
+  lastSeen,
+  firstSeen,
+  countryCode,
+  regionCode,
+}: Omit<InternetProtocol, 'id'>) {
+  return (
+    <SessionPanelItem>
+      <IpAndLocation>
+        <IpAddress>{ipAddress}</IpAddress>
+        {countryCode && regionCode && (
+          <CountryCode>{`${countryCode} (${regionCode})`}</CountryCode>
+        )}
+      </IpAndLocation>
+      <StyledTimeSince date={firstSeen} />
+      <StyledTimeSince date={lastSeen} />
+    </SessionPanelItem>
+  );
+}
+
+export default SessionRow;
+
+const IpAddress = styled('div')`
+  margin-bottom: ${space(0.5)};
+  font-weight: bold;
+`;
+const CountryCode = styled('div')`
+  font-size: ${p => p.theme.fontSizeRelativeSmall};
+`;
+
+const StyledTimeSince = styled(TimeSince)`
+  font-size: ${p => p.theme.fontSizeRelativeSmall};
+`;
+
+const IpAndLocation = styled('div')`
+  flex: 1;
+`;
+
+const SessionPanelItem = styled(PanelItem)`
+  ${tableLayout};
+`;

src/sentry/static/sentry/app/views/settings/account/accountSecurity/sessionHistory/utils.tsx

@@ -0,0 +1,8 @@
+import space from 'app/styles/space';
+
+export const tableLayout = `
+  display: grid;
+  grid-template-columns: auto 140px 140px;
+  grid-gap ${space(1)};
+  align-items: center;
+`;

tests/js/spec/views/accountSecuritySessionHistory.spec.jsx

@@ -3,7 +3,7 @@ import React from 'react';
 import {mount} from 'sentry-test/enzyme';
 
 import {Client} from 'app/api';
-import AccountSecuritySessionHistory from 'app/views/settings/account/accountSecurity/accountSecuritySessionHistory';
+import SessionHistory from 'app/views/settings/account/accountSecurity/sessionHistory';
 
 const ENDPOINT = '/users/me/ips/';
 const ORG_ENDPOINT = '/organizations/';
@@ -40,7 +40,7 @@ describe('AccountSecuritySessionHistory', function () {
       ],
     });
 
-    const wrapper = mount(<AccountSecuritySessionHistory />, TestStubs.routerContext());
+    const wrapper = mount(<SessionHistory />, TestStubs.routerContext());
 
     wrapper.update();
     await tick();