feat: use common component for ip address display (#4042)

framework/core/js/src/common/compat.ts

@@ -91,6 +91,7 @@ import AlertManagerState from './states/AlertManagerState';
 import ModalManagerState from './states/ModalManagerState';
 import PageState from './states/PageState';
 import LabelValue from './components/LabelValue';
+import IPAddress from './components/IPAddress';
 
 export default {
   extenders,
@@ -169,6 +170,7 @@ export default {
   'components/Tooltip': Tooltip,
   'components/EditUserModal': EditUserModal,
   'components/LabelValue': LabelValue,
+  'components/IPAddress': IPAddress,
   Model: Model,
   Application: Application,
   'helpers/fullTime': fullTime,

framework/core/js/src/common/components/IPAddress.tsx

@@ -0,0 +1,38 @@
+import Component, { ComponentAttrs } from '../Component';
+import type Mithril from 'mithril';
+import ItemList from '../utils/ItemList';
+
+export interface IIPAddressAttrs extends ComponentAttrs {
+  ip: string | undefined | null;
+}
+
+/**
+ * A component to wrap an IP address for display.
+ * Designed to be customizable for different use cases.
+ *
+ * @example
+ * <IPAddress ip="127.0.0.1" />
+ * @example
+ * <IPAddress ip={post.data.attributes.ipAddress} />
+ */
+export default class IPAddress<CustomAttrs extends IIPAddressAttrs = IIPAddressAttrs> extends Component<CustomAttrs> {
+  ip!: string;
+
+  oninit(vnode: Mithril.Vnode<CustomAttrs, this>) {
+    super.oninit(vnode);
+
+    this.ip = this.attrs.ip || '';
+  }
+
+  view() {
+    return <span className="IPAddress">{this.viewItems().toArray()}</span>;
+  }
+
+  viewItems(): ItemList<Mithril.Children> {
+    const items = new ItemList<Mithril.Children>();
+
+    items.add('ip', <span>{this.ip}</span>, 100);
+
+    return items;
+  }
+}

framework/core/js/src/forum/components/AccessTokensList.tsx

@@ -11,6 +11,7 @@ import Tooltip from '../../common/components/Tooltip';
 import type Mithril from 'mithril';
 import type AccessToken from '../../common/models/AccessToken';
 import { NestedStringArray } from '@askvortsov/rich-icu-message-formatter';
+import IPAddress from '../../common/components/IPAddress';
 
 export interface IAccessTokensListAttrs extends ComponentAttrs {
   tokens: AccessToken[];
@@ -100,7 +101,12 @@ export default class AccessTokensList<CustomAttrs extends IAccessTokensListAttrs
             token.lastActivityAt() ? (
               <>
                 {humanTime(token.lastActivityAt())}
-                {token.lastIpAddress() && ` — ${token.lastIpAddress()}`}
+                {token.lastIpAddress() && (
+                  <span>
+                    {' '}
+                    — <IPAddress ip={token.lastIpAddress()} />
+                  </span>
+                )}
                 {this.attrs.type === 'developer_token' && token.device() && (
                   <>
                     {' '}

framework/core/js/src/forum/components/PostMeta.js

@@ -3,6 +3,7 @@ import Component from '../../common/Component';
 import humanTime from '../../common/helpers/humanTime';
 import fullTime from '../../common/helpers/fullTime';
 import ItemList from '../../common/utils/ItemList';
+import IPAddress from '../../common/components/IPAddress';
 
 /**
  * The `PostMeta` component displays the time of a post, and when clicked, shows
@@ -78,7 +79,13 @@ export default class PostMeta extends Component {
 
     items.add('post-time', <span className="PostMeta-time">{fullTime(time)}</span>, 90);
 
-    items.add('post-ip', <span className="PostMeta-ip">{post.data.attributes.ipAddress}</span>, 80);
+    items.add(
+      'post-ip',
+      <span className="PostMeta-ip">
+        <IPAddress ip={post.data.attributes.ipAddress} />
+      </span>,
+      80
+    );
 
     items.add(
       'permalink',