feat: frontend support for login rule audit events (#20722)

This PR adds frontend support to nicely display login rule audit events. I followed the guide [here](https://github.com/gravitational/teleport/tree/master/web#adding-an-audit-event) and mostly copied the types used for the role create/delete events.

web/packages/teleport/src/Audit/EventList/EventTypeCell.tsx

@@ -198,6 +198,8 @@ const EventIconMap: Record<EventCode, React.FC> = {
   [eventCodes.SSMRUN_FAIL]: Icons.Info,
   [eventCodes.BOT_JOIN]: Icons.Info,
   [eventCodes.INSTANCE_JOIN]: Icons.Info,
+  [eventCodes.LOGIN_RULE_CREATE]: Icons.Info,
+  [eventCodes.LOGIN_RULE_DELETE]: Icons.Info,
   [eventCodes.UNKNOWN]: Icons.Question,
 };
 

web/packages/teleport/src/Audit/__snapshots__/Audit.story.test.tsx.snap

@@ -358,12 +358,12 @@ exports[`list of all events 1`] = `
           </strong>
            - 
           <strong>
-            165
+            167
           </strong>
            of
            
           <strong>
-            165
+            167
           </strong>
         </div>
         <button
@@ -436,6 +436,80 @@ exports[`list of all events 1`] = `
       </tr>
     </thead>
     <tbody>
+      <tr>
+        <td
+          style="vertical-align: inherit;"
+        >
+          <div
+            class="c14"
+          >
+            <span
+              class="c10 c15 icon icon-info_outline c10 c15"
+              color="light"
+              font-size="3"
+            />
+            Login Rule Deleted
+          </div>
+        </td>
+        <td
+          style="word-break: break-word;"
+        >
+          User [nic] deleted a login rule [test_rule]
+        </td>
+        <td
+          style="min-width: 120px;"
+        >
+          2023-01-25T19:21:36.144Z
+        </td>
+        <td
+          align="right"
+        >
+          <button
+            class="c16"
+            kind="border"
+            width="87px"
+          >
+            Details
+          </button>
+        </td>
+      </tr>
+      <tr>
+        <td
+          style="vertical-align: inherit;"
+        >
+          <div
+            class="c14"
+          >
+            <span
+              class="c10 c15 icon icon-info_outline c10 c15"
+              color="light"
+              font-size="3"
+            />
+            Login Rule Created
+          </div>
+        </td>
+        <td
+          style="word-break: break-word;"
+        >
+          User [nic] created a login rule [test_rule]
+        </td>
+        <td
+          style="min-width: 120px;"
+        >
+          2023-01-25T19:21:36.144Z
+        </td>
+        <td
+          align="right"
+        >
+          <button
+            class="c16"
+            kind="border"
+            width="87px"
+          >
+            Details
+          </button>
+        </td>
+      </tr>
       <tr>
         <td
           style="vertical-align: inherit;"

web/packages/teleport/src/Audit/fixtures/index.ts

@@ -2671,6 +2671,28 @@ export const events = [
       user: 'lisa',
     },
   },
+  {
+    cluster_name: 'im-a-cluster-name',
+    code: 'TLR00I',
+    ei: 0,
+    event: 'login_rule.create',
+    expires: '0001-01-01T00:00:00Z',
+    name: 'test_rule',
+    time: '2023-01-25T19:21:36.144Z',
+    uid: '266e8563-729e-412f-ba26-1050fbec0cd6',
+    user: 'nic',
+  },
+  {
+    cluster_name: 'im-a-cluster-name',
+    code: 'TLR01I',
+    ei: 0,
+    event: 'login_rule.delete',
+    expires: '0001-01-01T00:00:00Z',
+    name: 'test_rule',
+    time: '2023-01-25T19:21:36.144Z',
+    uid: '266e8563-729e-412f-ba26-1050fbec0cd6',
+    user: 'nic',
+  },
 ].map(makeEvent);
 
 // Do not add new events to this array, add it to `events` list.

web/packages/teleport/src/services/audit/makeEvent.ts

@@ -1261,6 +1261,16 @@ export const formatters: Formatters = {
       return `Instance [${node_name}] joined the cluster with the [${role}] role using the [${method}] join method`;
     },
   },
+  [eventCodes.LOGIN_RULE_CREATE]: {
+    type: 'login_rule.create',
+    desc: 'Login Rule Created',
+    format: ({ user, name }) => `User [${user}] created a login rule [${name}]`,
+  },
+  [eventCodes.LOGIN_RULE_DELETE]: {
+    type: 'login_rule.delete',
+    desc: 'Login Rule Deleted',
+    format: ({ user, name }) => `User [${user}] deleted a login rule [${name}]`,
+  },
   [eventCodes.UNKNOWN]: {
     type: 'unknown',
     desc: 'Unknown Event',

web/packages/teleport/src/services/audit/types.ts

@@ -216,6 +216,8 @@ export const eventCodes = {
   UPGRADE_WINDOW_UPDATED: 'TUW01I',
   BOT_JOIN: 'TJ001I',
   INSTANCE_JOIN: 'TJ002I',
+  LOGIN_RULE_CREATE: 'TLR00I',
+  LOGIN_RULE_DELETE: 'TLR01I',
 } as const;
 
 /**
@@ -1113,6 +1115,14 @@ export type RawEvents = {
       role: string;
     }
   >;
+  [eventCodes.LOGIN_RULE_CREATE]: RawEvent<
+    typeof eventCodes.LOGIN_RULE_CREATE,
+    HasName
+  >;
+  [eventCodes.LOGIN_RULE_DELETE]: RawEvent<
+    typeof eventCodes.LOGIN_RULE_DELETE,
+    HasName
+  >;
 };
 
 /**