feat(audit-logs): shared secrets audit logs

frontend/src/pages/organization/AuditLogsPage/components/LogsFilter.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable no-nested-ternary */
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { Control, Controller, UseFormReset, UseFormSetValue, UseFormWatch } from "react-hook-form";
 import { faCaretDown, faCheckCircle, faFilterCircleXmark } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -49,7 +49,6 @@ export const LogsFilter = ({
   isOrgAuditLogs,
   className,
   control,
-  setValue,
   reset,
   watch
 }: Props) => {
@@ -63,12 +62,6 @@ export const LogsFilter = ({
 
   const { data, isPending } = useGetAuditLogActorFilterOpts(workspaces?.[0]?.id ?? "");
 
-  useEffect(() => {
-    if (workspacesInOrg.length) {
-      setValue("project", workspacesInOrg[0]);
-    }
-  }, [workspaces]);
-
   const renderActorSelectItem = (actor: Actor) => {
     switch (actor.type) {
       case ActorType.USER:
@@ -129,6 +122,7 @@ export const LogsFilter = ({
             >
               <FilterableSelect
                 value={value}
+                isClearable
                 onChange={onChange}
                 placeholder="Select a project..."
                 options={workspacesInOrg.map(({ name, id }) => ({ name, id }))}

frontend/src/pages/organization/AuditLogsPage/components/LogsTableRow.tsx

@@ -1,4 +1,7 @@
-import { Td, Tr } from "@app/components/v2";
+import { faQuestionCircle } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { Td, Tooltip, Tr } from "@app/components/v2";
 import { eventToNameMap, userAgentTTypeoNameMap } from "@app/hooks/api/auditLogs/constants";
 import { ActorType, EventType } from "@app/hooks/api/auditLogs/enums";
 import { Actor, AuditLog } from "@app/hooks/api/auditLogs/types";
@@ -37,6 +40,17 @@ export const LogsTableRow = ({ auditLog, isOrgAuditLogs, showActorColumn }: Prop
             <p>Machine Identity</p>
           </Td>
         );
+      case ActorType.UNKNOWN_USER:
+        return (
+          <Td>
+            <div className="flex items-center gap-2">
+              <p>Unknown User</p>
+              <Tooltip content="This action was performed by a user who was not authenticated at the time.">
+                <FontAwesomeIcon className="text-mineshaft-400" icon={faQuestionCircle} />
+              </Tooltip>
+            </div>
+          </Td>
+        );
       default:
         return <Td />;
     }