Add dashboard-specific secret and secret import audit logs, re-touch audit logs v2 UI

frontend/src/views/DashboardPage/DashboardPage.tsx

@@ -149,7 +149,7 @@ export const DashboardPage = () => {
   const [snapshotId, setSnaphotId] = useState<string | null>(null);
   const [selectedEnv, setSelectedEnv] = useState<WorkspaceEnv | null>(null);
   const [sortDir, setSortDir] = useState<"asc" | "desc">("asc");
-  const deletedSecretIds = useRef<string[]>([]);
+  const deletedSecretIds = useRef<{ id: string; secretName: string; }[]>([]);
   const { hasUnsavedChanges, setHasUnsavedChanges } = useLeaveConfirm({ initialValue: false });
 
   const folderId = router.query.folderId as string;
@@ -498,9 +498,15 @@ export const DashboardPage = () => {
 
   // record all deleted ids
   // This will make final deletion easier
-  const onSecretDelete = useCallback((index: number, id?: string, overrideId?: string) => {
-    if (id) deletedSecretIds.current.push(id);
-    if (overrideId) deletedSecretIds.current.push(overrideId);
+  const onSecretDelete = useCallback((index: number, secretName: string, id?: string, overrideId?: string) => {
+    if (id) deletedSecretIds.current.push({
+      id,
+      secretName
+    });
+    if (overrideId) deletedSecretIds.current.push({
+      id: overrideId,
+      secretName
+    });
     remove(index);
     // just the case if this is called from drawer
     handlePopUpClose("secretDetails");

frontend/src/views/DashboardPage/DashboardPage.utils.ts

@@ -182,15 +182,18 @@ const deepCompareSecrets = (lhs: DecryptedSecret, rhs: any) =>
   JSON.stringify(lhs.tags) === JSON.stringify(rhs.tags);
 
 export const transformSecretsToBatchSecretReq = (
-  deletedSecretIds: string[],
+  deletedSecretIds: { id: string; secretName: string; }[],
   latestFileKey: any,
   secrets: FormData["secrets"],
   intialValues: DecryptedSecret[] = []
 ) => {
   // deleted secrets
-  const secretsToBeDeleted: BatchSecretDTO["requests"] = deletedSecretIds.map((id) => ({
+  const secretsToBeDeleted: BatchSecretDTO["requests"] = deletedSecretIds.map(({ id, secretName }) => ({
     method: "DELETE",
-    secret: { _id: id }
+    secret: { 
+      _id: id,
+      secretName
+    }
   }));
 
   const secretsToBeUpdated: BatchSecretDTO["requests"] = [];
@@ -261,7 +264,7 @@ export const transformSecretsToBatchSecretReq = (
     if (idOverride) {
       // if action is deleted meaning override has been removed but id is kept to collect at this point
       if (overrideAction === SecretActionType.Deleted) {
-        secretsToBeDeleted.push({ method: "DELETE", secret: { _id: idOverride } });
+        secretsToBeDeleted.push({ method: "DELETE", secret: { _id: idOverride, secretName: key } });
       } else {
         // if not deleted action then as id is there its an updated
         const initialSecretValue = intialValues?.find(({ _id: secId }) => secId === _id)!;

frontend/src/views/DashboardPage/components/SecretInputRow/SecretInputRow.tsx

@@ -67,7 +67,7 @@ type Props = {
   isSecretValueHidden: boolean;
   searchTerm: string;
   // to record the ids of deleted ones
-  onSecretDelete: (index: number, id?: string, overrideId?: string) => void;
+  onSecretDelete: (index: number, secretName: string, id?: string, overrideId?: string) => void;
   // sidebar control props
   onRowExpand: (secId: string | undefined, index: number) => void;
   // tag props
@@ -495,7 +495,9 @@ export const SecretInputRow = memo(
                     colorSchema="danger"
                     ariaLabel="delete"
                     isDisabled={isReadOnly || isRollbackMode}
-                    onClick={() => onSecretDelete(index, secId, idOverride)}
+                    onClick={() => {
+                      onSecretDelete(index, secKey, secId, idOverride);
+                    }}
                   >
                     <FontAwesomeIcon icon={faXmark} />
                   </IconButton>

frontend/src/views/Project/LogsPage/components/LogsFilter.tsx

@@ -73,7 +73,7 @@ export const LogsFilter = ({
                             className="w-40 mr-4"
                         >
                             <Select
-                                defaultValue={field.value}
+                                {...(field.value ? { value: field.value } : { placeholder: "Select" })}
                                 {...field}
                                 onValueChange={(e) => onChange(e)}
                                 className="w-full"
@@ -99,7 +99,7 @@ export const LogsFilter = ({
                                 className="w-40 mr-4"
                             >
                                 <Select
-                                    defaultValue={field.value}
+                                    {...(field.value ? { value: field.value } : { placeholder: "Select" })}
                                     {...field}
                                     onValueChange={(e) => onChange(e)}
                                     className="w-full"
@@ -121,7 +121,7 @@ export const LogsFilter = ({
                             className="w-40 mr-4"
                         >
                             <Select
-                                defaultValue={field.value}
+                                {...(field.value ? { value: field.value } : { placeholder: "Select" })}
                                 {...field}
                                 onValueChange={(e) => onChange(e)}
                                 className="w-full"
@@ -189,7 +189,7 @@ export const LogsFilter = ({
                     }}
                 />
             </div>
-            <div>
+            {/* <div>
                 <Button
                     isLoading={false}
                     colorSchema="primary"
@@ -198,15 +198,15 @@ export const LogsFilter = ({
                     leftIcon={<FontAwesomeIcon icon={faFilterCircleXmark} className="mr-2" />}
                     onClick={() => reset({
                         eventType: undefined,
-                        actor: "",
-                        userAgentType: "",
+                        actor: undefined,
+                        userAgentType: undefined,
                         startDate: undefined,
                         endDate: undefined
                     })}
                 >
                     Clear filters
                 </Button>
-            </div>
+            </div> */}
         </div>
     );
 }

frontend/src/views/Project/LogsPage/components/LogsSection.tsx

@@ -32,12 +32,14 @@ export const LogsSection = () => {
     const perPage = watch("perPage") as number;
     
     return (
-        <div className="p-4 bg-mineshaft-900 mb-6 rounded-lg border border-mineshaft-600">
-            <div className="flex items-center mb-8">
+        <div 
+            // className="p-4 bg-mineshaft-900 mb-6 rounded-lg border border-mineshaft-600"
+        >
+            {/* <div className="flex items-center mb-8">
                 <h2 className="text-xl font-semibold flex-1 text-white">
                     Audit Logs
                 </h2>
-            </div>
+            </div> */}
             <LogsFilter 
                 control={control} 
                 reset={reset}

frontend/src/views/Project/LogsPage/components/LogsTableRow.tsx

@@ -100,6 +100,9 @@ export const LogsTableRow = ({
                         {event.metadata.app && (
                             <p>{`Target app: ${event.metadata.app}`}</p>
                         )}
+                        {event.metadata.appId && (
+                            <p>{`Target app: ${event.metadata.appId}`}</p>
+                        )}
                         {event.metadata.targetEnvironment && (
                             <p>{`Target environment: ${event.metadata.targetEnvironment}`}</p>
                         )}
@@ -117,6 +120,9 @@ export const LogsTableRow = ({
                         {event.metadata.app && (
                             <p>{`Target App: ${event.metadata.app}`}</p>
                         )}
+                        {event.metadata.appId && (
+                            <p>{`Target app: ${event.metadata.appId}`}</p>
+                        )}
                         {event.metadata.targetEnvironment && (
                             <p>{`Target environment: ${event.metadata.targetEnvironment}`}</p>
                         )}
@@ -219,7 +225,7 @@ export const LogsTableRow = ({
                 return (
                     <Td>
                         <p>{`Environment: ${event.metadata.environment}`}</p>
-                        <p>{`Secret Path: ${event.metadata.secretPath}`}</p>
+                        <p>{`Secret path: ${event.metadata.secretPath}`}</p>
                         <p>{`Webhook URL: ${event.metadata.webhookUrl}`}</p>
                         <p>{`Disabled: ${event.metadata.isDisabled}`}</p>
                     </Td>
@@ -228,7 +234,7 @@ export const LogsTableRow = ({
                 return (
                     <Td>
                         <p>{`Environment: ${event.metadata.environment}`}</p>
-                        <p>{`Secret Path: ${event.metadata.secretPath}`}</p>
+                        <p>{`Secret path: ${event.metadata.secretPath}`}</p>
                         <p>{`Webhook URL: ${event.metadata.webhookUrl}`}</p>
                         <p>{`Disabled: ${event.metadata.isDisabled}`}</p>
                     </Td>
@@ -237,14 +243,42 @@ export const LogsTableRow = ({
                 return (
                     <Td>
                         <p>{`Environment: ${event.metadata.environment}`}</p>
-                        <p>{`Secret Path: ${event.metadata.secretPath}`}</p>
+                        <p>{`Secret path: ${event.metadata.secretPath}`}</p>
                         <p>{`Webhook URL: ${event.metadata.webhookUrl}`}</p>
                         <p>{`Disabled: ${event.metadata.isDisabled}`}</p>
                     </Td>
                 );
+            case EventType.GET_SECRET_IMPORTS:
+                return (
+                    <Td>
+                        <p>{`Environment: ${event.metadata.environment}`}</p>
+                        <p>{`# Imported paths: ${event.metadata.numberOfImports}`}</p>
+                    </Td>
+                );
+            case EventType.CREATE_SECRET_IMPORT:
+                return (
+                    <Td>
+                        <p>{`Environment: ${event.metadata.environment}`}</p>
+                        <p>{`Imported path: ${event.metadata.importSecretPath}`}</p>
+                    </Td>
+                );
+            case EventType.UPDATE_SECRET_IMPORT:
+                return (
+                    <Td>
+                        <p>{`Environment: ${event.metadata.environment}`}</p>
+                        <p>{`# Imported path: ${event.metadata.numberOfImports}`}</p>
+                    </Td>
+                );
+            case EventType.DELETE_SECRET_IMPORT:
+                return (
+                    <Td>
+                        <p>{`Environment: ${event.metadata.environment}`}</p>
+                        <p>{`Imported path: ${event.metadata.importSecretPath}`}</p>
+                    </Td>
+                );
             default:
                 return (
-                    <Td>Test</Td>
+                    <Td></Td>
                 ); 
         }
     }