Merge pull request #10944 from growilabs/imprv/180548-audit-log-export-modal

imprv: pre-fill export modal with current filter values

apps/app/src/client/components/Admin/AuditLog/AuditLogExportModal.tsx

@@ -17,12 +17,24 @@ import { useAuditLogExport } from './useAuditLogExport';
 type Props = {
   isOpen: boolean;
   onClose: () => void;
+  initialStartDate?: Date | null;
+  initialEndDate?: Date | null;
+  initialSelectedUsernames?: string[];
+  initialActionMap?: Map<SupportedActionType, boolean>;
 };
 
 const AuditLogExportModalSubstance = ({
   onClose,
+  initialStartDate,
+  initialEndDate,
+  initialSelectedUsernames,
+  initialActionMap,
 }: {
   onClose: () => void;
+  initialStartDate?: Date | null;
+  initialEndDate?: Date | null;
+  initialSelectedUsernames?: string[];
+  initialActionMap?: Map<SupportedActionType, boolean>;
 }): JSX.Element => {
   const { t } = useTranslation('admin');
 
@@ -30,14 +42,19 @@ const AuditLogExportModalSubstance = ({
     auditLogAvailableActionsAtom,
   );
 
-  const [startDate, setStartDate] = useState<Date | null>(null);
-  const [endDate, setEndDate] = useState<Date | null>(null);
-  const [selectedUsernames, setSelectedUsernames] = useState<string[]>([]);
-  const [actionMap, setActionMap] = useState(
-    () =>
-      new Map<SupportedActionType, boolean>(
-        auditLogAvailableActionsData?.map((action) => [action, true]) ?? [],
-      ),
+  const [startDate, setStartDate] = useState<Date | null>(
+    initialStartDate ?? null,
+  );
+  const [endDate, setEndDate] = useState<Date | null>(initialEndDate ?? null);
+  const [selectedUsernames, setSelectedUsernames] = useState<string[]>(
+    initialSelectedUsernames ?? [],
+  );
+  const [actionMap, setActionMap] = useState(() =>
+    initialActionMap != null
+      ? new Map(initialActionMap)
+      : new Map<SupportedActionType, boolean>(
+          auditLogAvailableActionsData?.map((action) => [action, true]) ?? [],
+        ),
   );
 
   const datePickerChangedHandler = useCallback((dateList: Date[] | null[]) => {
@@ -115,7 +132,10 @@ const AuditLogExportModalSubstance = ({
       <ModalBody>
         <div className="mb-3">
           <div className="form-label">{t('audit_log_management.username')}</div>
-          <SearchUsernameTypeahead onChange={setUsernamesHandler} />
+          <SearchUsernameTypeahead
+            onChange={setUsernamesHandler}
+            initialUsernames={initialSelectedUsernames}
+          />
         </div>
 
         <div className="mb-3">
@@ -173,10 +193,22 @@ const AuditLogExportModalSubstance = ({
 export const AuditLogExportModal = ({
   isOpen,
   onClose,
+  initialStartDate,
+  initialEndDate,
+  initialSelectedUsernames,
+  initialActionMap,
 }: Props): JSX.Element => {
   return (
     <Modal isOpen={isOpen} toggle={onClose}>
-      {isOpen && <AuditLogExportModalSubstance onClose={onClose} />}
+      {isOpen && (
+        <AuditLogExportModalSubstance
+          onClose={onClose}
+          initialStartDate={initialStartDate}
+          initialEndDate={initialEndDate}
+          initialSelectedUsernames={initialSelectedUsernames}
+          initialActionMap={initialActionMap}
+        />
+      )}
     </Modal>
   );
 };

apps/app/src/client/components/Admin/AuditLog/SearchUsernameTypeahead.tsx

@@ -29,21 +29,30 @@ type UserDataType = {
 
 type Props = {
   onChange: (text: string[]) => void;
+  initialUsernames?: string[];
 };
 
 const SearchUsernameTypeaheadSubstance: ForwardRefRenderFunction<
   IClearable,
   Props
 > = (props: Props, ref) => {
-  const { onChange } = props;
+  const { onChange, initialUsernames } = props;
   const { t } = useTranslation();
 
   const typeaheadRef = useRef<TypeaheadRef>(null);
 
+  const toUserDataItem = (username: string): UserDataType => ({
+    username,
+    category: Categories.activeUser,
+  });
+
   /*
    * State
    */
   const [searchKeyword, setSearchKeyword] = useState<string>('');
+  const [selectedItems, setSelectedItems] = useState<UserDataType[]>(() =>
+    (initialUsernames ?? []).map(toUserDataItem),
+  );
 
   /*
    * Fetch
@@ -87,6 +96,7 @@ const SearchUsernameTypeaheadSubstance: ForwardRefRenderFunction<
    */
   const changeHandler = useCallback(
     (userData: UserDataType[]) => {
+      setSelectedItems(userData);
       const usernames = userData.map((user) => user.username);
       onChange(usernames);
     },
@@ -148,6 +158,7 @@ const SearchUsernameTypeaheadSubstance: ForwardRefRenderFunction<
         placeholder={t('admin:audit_log_management.username')}
         isLoading={isLoading}
         options={allUser}
+        selected={selectedItems}
         onSearch={searchHandler}
         onChange={changeHandler}
         renderMenu={renderMenu}

apps/app/src/client/components/Admin/AuditLogManagement.tsx

@@ -349,6 +349,10 @@ export const AuditLogManagement: FC = () => {
           <AuditLogExportModal
             isOpen={isExportModalOpen}
             onClose={() => setIsExportModalOpen(false)}
+            initialStartDate={startDate}
+            initialEndDate={endDate}
+            initialSelectedUsernames={selectedUsernames}
+            initialActionMap={actionMap}
           />
         </>
       )}