fix: #1657 move the add permission button (#1671)

frontend/src/components/ManagePermissionsTable/index.vue

@@ -27,21 +27,17 @@ import {
     TABLE_PAGINATOR_TEMPLATE,
     TABLE_ROWS_PER_PAGE,
 } from "@/constants/constants";
-import {
-    AddAppPermissionRoute,
-    AddFamPermissionRoute,
-    UserDetailsRoute,
-} from "@/router/routes";
+import { UserDetailsRoute } from "@/router/routes";
 import {
     AdminMgmtApiService,
     AppActlApiService,
 } from "@/services/ApiServiceFactory";
-import { EnvironmentSettings } from "@/services/EnvironmentSettings";
 import { selectedApp } from "@/store/ApplicationState";
 import { ManagePermissionsTableEnum } from "@/types/ManagePermissionsTypes";
 import type { PermissionNotificationType } from "@/types/NotificationTypes";
 import { formatAxiosError } from "@/utils/ApiUtils";
 import { formatUserNameAndId } from "@/utils/UserUtils";
+import { utcToLocalDate } from "@/utils/DateUtils";
 import {
     NewAppAdminQueryParamKey,
     NewDelegatedAddminQueryParamKey,
@@ -56,7 +52,6 @@ import {
     deleteDelegatedAdminNotificationContext,
     deleteFamPermissionNotificationContext,
     filterList,
-    getGrantButtonLabel,
     getHeaders,
     getTableHeaderDescription,
     getTableHeaderTitle,
@@ -67,8 +62,6 @@ import {
 const router = useRouter();
 const route = useRoute();
 
-const environment = new EnvironmentSettings();
-
 const newFamAdminIds = route.query[NewFamAdminQueryParamKey]
     ? String(route.query[NewFamAdminQueryParamKey]).split(",").map(Number)
     : [];
@@ -90,7 +83,7 @@ const props = defineProps<{
     addNotifications: (newNotifications: PermissionNotificationType[]) => void;
 }>();
 
-// Fam App Admins data query
+// Fam App Admins data query, this query has no pagination and create date
 const appAdminQuery = useQuery({
     queryKey: ["application_admins"],
     queryFn: () =>
@@ -125,15 +118,16 @@ const appUserQuery = useQuery({
     refetchOnMount: "always",
     enabled: props.tableType === ManagePermissionsTableEnum.AppUser,
     select: (data) => {
-        const sortedByUserName = data.sort((a, b) =>
-            a.user.user_name.localeCompare(b.user.user_name)
-        );
-        // Move matching IDs to the start of the array
+        const updatedData = data.map((item) => ({
+            ...item,
+            create_date: utcToLocalDate(item.create_date),
+        }));
+
         return [
-            ...sortedByUserName.filter((item) =>
+            ...updatedData.filter((item) =>
                 newAppUserIds.includes(item.user_role_xref_id)
             ),
-            ...sortedByUserName.filter(
+            ...updatedData.filter(
                 (item) => !newAppUserIds.includes(item.user_role_xref_id)
             ),
         ];
@@ -150,15 +144,17 @@ const delegatedAdminQuery = useQuery({
     refetchOnMount: "always",
     enabled: props.tableType === ManagePermissionsTableEnum.DelegatedAdmin,
     select: (data) => {
-        const sortedByUserName = data.sort((a, b) =>
-            a.user.user_name.localeCompare(b.user.user_name)
-        );
-        // Move matching IDs to the start of the array
+        // Convert date to human friendly format for display and sorting
+        const updatedData = data.map((item) => ({
+            ...item,
+            create_date: utcToLocalDate(item.create_date),
+        }));
+
         return [
-            ...sortedByUserName.filter((item) =>
+            ...updatedData.filter((item) =>
                 newDelegatedAdminIds.includes(item.access_control_privilege_id)
             ),
-            ...sortedByUserName.filter(
+            ...updatedData.filter(
                 (item) =>
                     !newDelegatedAdminIds.includes(
                         item.access_control_privilege_id
@@ -239,28 +235,6 @@ const getQueryErrorValue = () => {
     return undefined;
 };
 
-const handleAddButton = () => {
-    if (props.tableType === ManagePermissionsTableEnum.AppAdmin) {
-        router.push({ name: AddFamPermissionRoute.name });
-    } else if (props.tableType === ManagePermissionsTableEnum.AppUser) {
-        router.push({
-            name: AddAppPermissionRoute.name,
-            query: {
-                requestType: "addUserPermission",
-                applicationId: props.appId,
-            },
-        });
-    } else if (props.tableType === ManagePermissionsTableEnum.DelegatedAdmin) {
-        router.push({
-            name: AddAppPermissionRoute.name,
-            query: {
-                requestType: "addDelegatedAdmin",
-                applicationId: props.appId,
-            },
-        });
-    }
-};
-
 const navigateToUserDetails = (userId: string) => {
     router.push({
         name: UserDetailsRoute.name,
@@ -495,8 +469,6 @@ const highlightNewUserAccessRow = (
 
         <TableToolbar
             :filter="tableFilter['global'].value"
-            :btn-label="getGrantButtonLabel(tableType)"
-            :btn-on-click="handleAddButton"
             input-placeholder="Search by keyword"
             @change="handleSearchChange"
         />
@@ -525,6 +497,14 @@ const highlightNewUserAccessRow = (
             :paginatorTemplate="TABLE_PAGINATOR_TEMPLATE"
             :currentPageReportTemplate="TABLE_CURRENT_PAGE_REPORT_TEMPLATE"
             :rowStyle="highlightNewUserAccessRow"
+            :sort-field="
+                tableType === ManagePermissionsTableEnum.AppAdmin
+                    ? 'user.user_name'
+                    : 'create_date'
+            "
+            :sort-order="
+                tableType === ManagePermissionsTableEnum.AppAdmin ? 1 : -1
+            "
         >
             <template #empty> No user found. </template>
 
@@ -606,6 +586,13 @@ const highlightNewUserAccessRow = (
                 </template>
             </Column>
 
+            <Column
+                v-if="tableType !== ManagePermissionsTableEnum.AppAdmin"
+                header="Added On"
+                field="create_date"
+                sortable
+            />
+
             <Column header="Action">
                 <template #body="{ data }">
                     <button

frontend/src/components/ManagePermissionsTable/utils.ts

@@ -29,6 +29,7 @@ export const filterList = [
     "user.last_name",
     "user.user_name",
     "user.user_type.description",
+    "create_date",
 ];
 
 /**
@@ -75,24 +76,6 @@ export const getTableHeaderDescription = (
     }
 };
 
-/**
- * Generates the label for a grant button based on the authorization group.
- */
-export const getGrantButtonLabel = (
-    tableType: ManagePermissionsTableEnum
-): string => {
-    switch (tableType) {
-        case ManagePermissionsTableEnum.AppAdmin:
-            return "Add application admin";
-        case ManagePermissionsTableEnum.AppUser:
-            return "Add user permission";
-        case ManagePermissionsTableEnum.DelegatedAdmin:
-            return "Create delegated admin";
-        default:
-            return "";
-    }
-};
-
 /**
  * Generates a list of headers based on the authorization group used for skeleton.
  */
@@ -116,6 +99,7 @@ export const getHeaders = (tableType: ManagePermissionsTableEnum): string[] => {
                 "Full Name",
                 "Email",
                 "Role",
+                "Added On",
                 "Action",
             ];
         case ManagePermissionsTableEnum.DelegatedAdmin:
@@ -125,6 +109,7 @@ export const getHeaders = (tableType: ManagePermissionsTableEnum): string[] => {
                 "Full Name",
                 "Email",
                 "Role Enabled To Assign",
+                "Added On",
                 "Action",
             ];
         default:

frontend/src/components/UserPermissionHistoryTable/DateCol.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import { utcToTableLocalDateTime } from '@/utils/DateUtils';
+import { utcToLocalDateTime } from "@/utils/DateUtils";
 
 const props = defineProps<{
     utcDate: string;
 }>();
 </script>
 
 <template>
-    <p className="table-date-column">{{ utcToTableLocalDateTime(props.utcDate) }}</p>
+    <p className="table-date-column">{{ utcToLocalDateTime(props.utcDate) }}</p>
 </template>
 
 <style lang="scss" scoped>

frontend/src/constants/DateFormats.ts

@@ -3,4 +3,11 @@
  *
  * Example output: "Jan 09, 2023 | 03:09 PM"
  */
-export const TABLE_DATE_FORMAT = 'MMM dd, yyyy | hh:mm a';
+export const DATE_TIME_FORMAT = "MMM dd, yyyy | hh:mm a";
+
+/**
+ * The format used to display dates in the table without the time.
+ *
+ * Example output: "Jan 09, 2023"
+ */
+export const DATE_FORMAT = "MMM dd, yyyy";

frontend/src/utils/ApiUtils.ts

@@ -63,6 +63,29 @@ export const getUniqueApplications = (
     );
 };
 
+/**
+ * Retrieves a unique application by its ID from the AdminUserAccessResponse.
+ *
+ * - Filters applications using `getUniqueApplications` to ensure no duplicates.
+ * - Searches the resulting unique applications for a matching ID.
+ *
+ * @param {number} appId - The ID of the application to find.
+ * @param {AdminUserAccessResponse} [data] - The response containing user access information.
+ * @returns {FamApplicationDto | undefined} The application with the matching ID, or undefined if not found.
+ */
+export const getApplicationById = (
+    appId: number,
+    data?: AdminUserAccessResponse
+): FamApplicationDto | undefined => {
+    if (!data) {
+        return;
+    }
+
+    const uniqueApps = getUniqueApplications(data);
+
+    return uniqueApps.find((app) => app.id === appId);
+};
+
 /**
  * Checks if the selected application has the specified authorization key.
  *

frontend/src/utils/DateUtils.ts

@@ -1,11 +1,20 @@
 import { DateTime } from "luxon";
-import { TABLE_DATE_FORMAT } from "@/constants/DateFormats";
+import { DATE_FORMAT, DATE_TIME_FORMAT } from "@/constants/DateFormats";
 
 /**
  * Converts a UTC date-time string to the local user's time zone and formats it for display in a table.
  *
  * @param {string} utcDate - The UTC date-time string in ISO format (e.g., "2024-09-24T00:14:10.665421Z").
  * @returns {string} The date-time formatted according to the table format (e.g., "Jan 09, 2023 | 03:09 PM").
  */
-export const utcToTableLocalDateTime = (utcDate: string): string =>
-    DateTime.fromISO(utcDate).setZone("local").toFormat(TABLE_DATE_FORMAT);
+export const utcToLocalDateTime = (utcDate: string): string =>
+    DateTime.fromISO(utcDate).setZone("local").toFormat(DATE_TIME_FORMAT);
+
+/**
+ * Converts a UTC date-time string to the local user's time zone and formats it for display in a table.
+ *
+ * @param {string} utcDate - The UTC date-time string in ISO format (e.g., "2024-09-24T00:14:10.665421Z").
+ * @returns {string} The date formatted according to the table format (e.g., "Jan 09, 2023").
+ */
+export const utcToLocalDate = (utcDate: string): string =>
+    DateTime.fromISO(utcDate).setZone("local").toFormat(DATE_FORMAT);