Hide groups for regular users (#423)

Author: heisbrot

src/app/(dashboard)/peer/page.tsx

@@ -297,38 +297,21 @@ function PeerOverview() {
                 />
               </FullTooltip>
 
-              <div>
-                <Label>Assigned Groups</Label>
-                <HelpText>
-                  Use groups to control what this peer can access.
-                </HelpText>
-                <FullTooltip
-                  content={
-                    <div
-                      className={
-                        "flex gap-2 items-center !text-nb-gray-300 text-xs"
-                      }
-                    >
-                      <LockIcon size={14} />
-                      <span>
-                        {`You don't have the required permissions to update this
-                          setting.`}
-                      </span>
-                    </div>
-                  }
-                  interactive={false}
-                  className={"w-full block"}
-                  disabled={!isUser}
-                >
+              {!isUser && (
+                <div>
+                  <Label>Assigned Groups</Label>
+                  <HelpText>
+                    Use groups to control what this peer can access.
+                  </HelpText>
                   <PeerGroupSelector
                     disabled={isUser}
                     onChange={setSelectedGroups}
                     values={selectedGroups}
                     hideAllGroup={true}
                     peer={peer}
                   />
-                </FullTooltip>
-              </div>
+                </div>
+              )}
             </div>
           </div>
         </div>

src/contexts/GroupsProvider.tsx

@@ -1,6 +1,5 @@
 import useFetchApi, { useApiCall } from "@utils/api";
 import { merge, sortBy, unionBy } from "lodash";
-import { usePathname } from "next/navigation";
 import React, { useEffect, useState } from "react";
 import { useLoggedInUser } from "@/contexts/UsersProvider";
 import { Group } from "@/interfaces/Group";
@@ -25,18 +24,29 @@ const GroupContext = React.createContext(
 );
 
 export default function GroupsProvider({ children }: Props) {
-  const path = usePathname();
-  const { permission } = useLoggedInUser();
+  const { permission, isUser } = useLoggedInUser();
 
-  return path === "/peers" && permission.dashboard_view == "blocked" ? (
+  return permission.dashboard_view == "blocked" ? (
     <>{children}</>
   ) : (
-    <GroupsProviderContent>{children}</GroupsProviderContent>
+    <GroupsProviderContent isUser={isUser}>{children}</GroupsProviderContent>
   );
 }
 
-export function GroupsProviderContent({ children }: Props) {
-  const { data: groups, mutate, isLoading } = useFetchApi<Group[]>("/groups");
+type ProviderContentProps = {
+  children: React.ReactNode;
+  isUser: boolean;
+};
+
+export function GroupsProviderContent({
+  children,
+  isUser,
+}: Readonly<ProviderContentProps>) {
+  const {
+    data: groups,
+    mutate,
+    isLoading,
+  } = useFetchApi<Group[]>("/groups", false, true, !isUser);
   const groupRequest = useApiCall<Group>("/groups", true);
   const [dropdownOptions, setDropdownOptions] = useState<Group[]>([]);
 

src/modules/peers/PeersTable.tsx

@@ -246,6 +246,7 @@ export default function PeersTable({ peers, isLoading, headingTarget }: Props) {
           user_name: false,
           user_email: false,
           actions: !isUser,
+          groups: !isUser,
         }}
         isLoading={isLoading}
         getStartedCard={
@@ -423,30 +424,32 @@ export default function PeersTable({ peers, isLoading, headingTarget }: Props) {
 
             <DataTableRowsPerPage table={table} disabled={peers?.length == 0} />
 
-            <GroupSelector
-              disabled={peers?.length == 0}
-              values={
-                (table
-                  .getColumn("group_names")
-                  ?.getFilterValue() as string[]) || []
-              }
-              onChange={(groups) => {
-                table.setPageIndex(0);
-                if (groups.length == 0) {
-                  table.getColumn("group_names")?.setFilterValue(undefined);
-                  return;
-                } else {
-                  table.getColumn("group_names")?.setFilterValue(groups);
+            {!isUser && (
+              <GroupSelector
+                disabled={peers?.length == 0}
+                values={
+                  (table
+                    .getColumn("group_names")
+                    ?.getFilterValue() as string[]) || []
                 }
-                resetSelectedRows();
-              }}
-              groups={tableGroups}
-            />
+                onChange={(groups) => {
+                  table.setPageIndex(0);
+                  if (groups.length == 0) {
+                    table.getColumn("group_names")?.setFilterValue(undefined);
+                    return;
+                  } else {
+                    table.getColumn("group_names")?.setFilterValue(groups);
+                  }
+                  resetSelectedRows();
+                }}
+                groups={tableGroups}
+              />
+            )}
 
             <DataTableRefreshButton
               isDisabled={peers?.length == 0}
               onClick={() => {
-                mutate("/groups").then();
+                if (!isUser) mutate("/groups").then();
                 mutate("/users").then();
                 mutate("/peers").then();
               }}