Show when an event was triggered via the API directly

Author: DaneEveritt

resources/scripts/api/definitions/user/models.d.ts

@@ -23,6 +23,7 @@ interface ActivityLog extends Model<'actor'> {
     batch: UUID | null;
     event: string;
     ip: string;
+    isApi: boolean;
     description: string | null;
     properties: Record<string, string | unknown>;
     hasAdditionalMetadata: boolean;

resources/scripts/api/definitions/user/transformers.ts

@@ -34,6 +34,7 @@ export default class Transformers {
             batch: attributes.batch,
             event: attributes.event,
             ip: attributes.ip,
+            isApi: attributes.is_api,
             description: attributes.description,
             properties: attributes.properties,
             hasAdditionalMetadata: attributes.has_additional_metadata ?? false,

resources/scripts/components/dashboard/activity/ActivityLogContainer.tsx

@@ -55,7 +55,7 @@ export default () => {
                         <ActivityLogEntry key={activity.timestamp.toString() + activity.event} activity={activity}>
                             {typeof activity.properties.useragent === 'string' &&
                                 <Tooltip content={activity.properties.useragent} placement={'top'}>
-                                    <DesktopComputerIcon className={'ml-2 w-4 h-4 cursor-pointer'}/>
+                                    <span><DesktopComputerIcon/></span>
                                 </Tooltip>
                             }
                         </ActivityLogEntry>

resources/scripts/components/elements/activity/ActivityLogEntry.tsx

@@ -7,6 +7,9 @@ import { format, formatDistanceToNowStrict } from 'date-fns';
 import { ActivityLog } from '@definitions/user';
 import { useLocation } from 'react-router';
 import ActivityLogMetaButton from '@/components/elements/activity/ActivityLogMetaButton';
+import { TerminalIcon } from '@heroicons/react/solid';
+import classNames from 'classnames';
+import style from './style.module.css';
 
 interface Props {
     activity: ActivityLog;
@@ -48,7 +51,14 @@ export default ({ activity, children }: Props) => {
                         >
                             {activity.event}
                         </Link>
-                        {children}
+                        <div className={classNames(style.icons, 'group-hover:text-gray-300')}>
+                            {activity.isApi &&
+                                <Tooltip placement={'top'} content={'Performed using API Key'}>
+                                    <span><TerminalIcon/></span>
+                                </Tooltip>
+                            }
+                            {children}
+                        </div>
                     </div>
                     <p className={'mt-1 text-sm break-words line-clamp-2 pr-4'}>
                         <Translate ns={'activity'} values={activity.properties}>

resources/scripts/components/elements/activity/ActivityLogMetaButton.tsx

@@ -22,6 +22,7 @@ export default ({ meta }: { meta: Record<string, unknown> }) => {
                 </Dialog.Buttons>
             </Dialog>
             <button
+                aria-describedby={'View additional event metadata'}
                 className={'p-2 transition-colors duration-100 text-gray-400 group-hover:text-gray-300 group-hover:hover:text-gray-50'}
                 onClick={() => setOpen(true)}
             >

resources/scripts/components/elements/activity/style.module.css

@@ -0,0 +1,11 @@
+.icons {
+    @apply flex space-x-1 mx-2 transition-colors duration-100 text-gray-400;
+
+    & > span {
+        @apply px-1 py-px cursor-pointer hover:text-gray-50;
+    }
+
+    & svg {
+        @apply w-4 h-4;
+    }
+}