org auth tokens: show creation time (#57125)

We already expose `dateCreated` field via API. Now rendering it in the
"Created" column which could help with token management:
<img width="1165" alt="image"
src="https://github.com/getsentry/sentry/assets/1127549/e6584b97-aad0-4de6-bdd1-4c0ff4faaca7">

static/app/views/settings/organizationAuthTokens/authTokenRow.tsx

@@ -112,7 +112,22 @@ export function OrganizationAuthTokensAuthTokenRow({
         )}
       </div>
 
-      <LastUsedDate>
+      <DateTime>
+        {isProjectLoading ? (
+          <Placeholder height="1.25em" />
+        ) : (
+          <Fragment>
+            <TimeSince
+              date={getDynamicText({
+                value: token.dateCreated,
+                fixed: new Date(1508208080000), // National Pasta Day
+              })}
+            />
+          </Fragment>
+        )}
+      </DateTime>
+
+      <DateTime>
         {isProjectLoading ? (
           <Placeholder height="1.25em" />
         ) : (
@@ -122,7 +137,7 @@ export function OrganizationAuthTokensAuthTokenRow({
             organization={organization}
           />
         )}
-      </LastUsedDate>
+      </DateTime>
 
       <Actions>
         <Tooltip
@@ -166,7 +181,7 @@ const Actions = styled('div')`
   justify-content: flex-end;
 `;
 
-const LastUsedDate = styled('div')`
+const DateTime = styled('div')`
   display: flex;
   align-items: center;
   gap: ${space(0.5)};

static/app/views/settings/organizationAuthTokens/index.tsx

@@ -187,7 +187,7 @@ export function OrganizationAuthTokensIndex({
               ) : undefined
             }
             emptyMessage={t("You haven't created any authentication tokens yet.")}
-            headers={[t('Auth token'), t('Last access'), '']}
+            headers={[t('Auth token'), t('Created'), t('Last access'), '']}
           >
             {!isError && !isLoading && !!tokenList?.length && (
               <TokenList
@@ -214,7 +214,8 @@ const ResponsivePanelTable = styled(PanelTable)`
   @media (max-width: ${p => p.theme.breakpoints.small}) {
     grid-template-columns: 1fr 1fr;
 
-    > *:nth-child(3n + 2) {
+    > *:nth-child(4n + 2),
+    *:nth-child(4n + 3) {
       display: none;
     }
   }