Merge pull request #1105 from concord-consortium/allow-project-admins-to-see-projects

Allow project admins to see and manage list of projects they admin

Author: dougmartin

app/assets/javascripts/lara-typescript.js

@@ -124041,7 +124041,7 @@ var ProjectListItem = function (_a) {
 
   var handleDeleteButtonClick = function () {
     if (id) {
-      onDelete(id);
+      onDelete === null || onDelete === void 0 ? void 0 : onDelete(id);
     }
   };
 
@@ -124053,7 +124053,7 @@ var ProjectListItem = function (_a) {
   }, title), React.createElement("menu", null, React.createElement("ul", null, React.createElement("li", null, React.createElement("button", {
     className: "textButton editButton",
     onClick: handleEditButtonClick
-  }, "Edit")), React.createElement("li", null, React.createElement("button", {
+  }, "Edit")), onDelete && React.createElement("li", null, React.createElement("button", {
     className: "textButton deleteButton",
     onClick: handleDeleteButtonClick
   }, "Delete")))), React.createElement("div", {
@@ -124250,20 +124250,27 @@ var convert_keys_1 = __webpack_require__(/*! ../../shared/convert-keys */ "./src
 __webpack_require__(/*! ./project-list.scss */ "./src/projects/components/project-list.scss");
 
 var ProjectList = function () {
-  var _a = (0, react_1.useState)(null),
-      projects = _a[0],
-      setProjects = _a[1];
+  var _a = (0, react_1.useState)(false),
+      isAdmin = _a[0],
+      setIsAdmin = _a[1];
 
-  var _b = (0, react_1.useState)(false),
-      projectsUpdated = _b[0],
-      setProjectsUpdated = _b[1];
+  var _b = (0, react_1.useState)(null),
+      projects = _b[0],
+      setProjects = _b[1];
 
-  var _c = (0, react_1.useState)(undefined),
-      alertMessage = _c[0],
-      setAlertMessage = _c[1];
+  var _c = (0, react_1.useState)(false),
+      projectsUpdated = _c[0],
+      setProjectsUpdated = _c[1];
+
+  var _d = (0, react_1.useState)(undefined),
+      alertMessage = _d[0],
+      setAlertMessage = _d[1];
 
   var urlParams = new URLSearchParams(window.location.search);
   var newProjectCreated = urlParams.get("newProjectCreated");
+  (0, react_1.useEffect)(function () {
+    checkUser();
+  }, []);
   (0, react_1.useEffect)(function () {
     getProjects();
     setProjectsUpdated(false);
@@ -124273,6 +124280,38 @@ var ProjectList = function () {
     }
   }, [projectsUpdated]);
 
+  var checkUser = function () {
+    return __awaiter(void 0, void 0, void 0, function () {
+      var apiUrl, data;
+      return __generator(this, function (_a) {
+        switch (_a.label) {
+          case 0:
+            apiUrl = "/api/v1/user_check";
+            return [4
+            /*yield*/
+            , fetch(apiUrl, {
+              method: "GET",
+              headers: {
+                "Content-Type": "application/json"
+              },
+              credentials: "include"
+            }).then(function (response) {
+              return response.json();
+            }).catch(function (error) {
+              setAlertMessage(error);
+            })];
+
+          case 1:
+            data = _a.sent();
+            setIsAdmin(data.user.is_admin);
+            return [2
+            /*return*/
+            ];
+        }
+      });
+    });
+  };
+
   var getProjects = function () {
     return __awaiter(void 0, void 0, void 0, function () {
       var apiUrl, data;
@@ -124385,7 +124424,7 @@ var ProjectList = function () {
       id: project.id,
       title: project.title,
       url: project.url,
-      onDelete: handleDeleteRequest
+      onDelete: isAdmin ? handleDeleteRequest : undefined
     });
   })));
 };

app/controllers/api/v1/projects_controller.rb

@@ -4,8 +4,8 @@ class Api::V1::ProjectsController < API::APIController
 
   # GET /api/v1/projects
   def index
-    @projects = Project.all
-    authorize! :manage, @projects
+    @projects = Project.visible_to_user(current_user)
+    authorize! :manage, Project
     render json: {projects: @projects}
   end
 

app/models/ability.rb

@@ -57,6 +57,10 @@ def initialize(user)
         user.id == plugin.plugin_scope.user_id || user.project_admin_of?(plugin.plugin_scope.project)
       end
 
+      can :manage, Project do |project|
+        user.project_admin_of?(project)
+      end
+
       can :create, Sequence
       can :duplicate, Sequence do |sequence|
         user.id == sequence.user_id || user.project_admin_of?(sequence.project) || ['public', 'hidden'].include?(sequence.publication_status)

lara-typescript/src/projects/components/project-list-item.tsx

@@ -6,7 +6,7 @@ export interface IProjectListItemProps {
   id?: number;
   title: string;
   url: string | undefined;
-  onDelete: (id: number) => void;
+  onDelete?: (id: number) => void;
 }
 
 export const ProjectListItem: React.FC<IProjectListItemProps> = ({
@@ -22,7 +22,7 @@ export const ProjectListItem: React.FC<IProjectListItemProps> = ({
 
   const handleDeleteButtonClick = () => {
     if (id) {
-      onDelete(id);
+      onDelete?.(id);
     }
   };
 
@@ -32,7 +32,7 @@ export const ProjectListItem: React.FC<IProjectListItemProps> = ({
       <menu>
         <ul>
           <li><button className="textButton editButton" onClick={handleEditButtonClick}>Edit</button></li>
-          <li><button className="textButton deleteButton" onClick={handleDeleteButtonClick}>Delete</button></li>
+          {onDelete && <li><button className="textButton deleteButton" onClick={handleDeleteButtonClick}>Delete</button></li>}
         </ul>
       </menu>
       <div className="projectListItem__link">

lara-typescript/src/projects/components/project-list.spec.tsx

@@ -58,24 +58,50 @@ describe("Project list component", () => {
     expect(ProjectList).toBeDefined();
   });
 
-  it("renders a list of projects", async () => {
-    fetch.mockResponseOnce(JSON.stringify({projects: [project1, project2]}));
+  it("renders a list of projects with the delete option as an admin", async () => {
+    fetch
+      .mockResponseOnce(JSON.stringify({user: {is_admin: true}}))
+      .mockResponseOnce(JSON.stringify({projects: [project1, project2]}));
     await act(async () => {
       ReactDOM.render(<ProjectList />, container);
     });
     const pageTitle = container.querySelector("h1") as HTMLHeadingElement;
     const projectList = container.querySelector(".projectList") as HTMLUListElement;
-    expect(fetch).toHaveBeenCalledTimes(1);
+    expect(fetch).toHaveBeenCalledTimes(2);
     expect(pageTitle.textContent).toBe("Projects");
     expect(projectList.children).toHaveLength(2);
     const projectListItem1 = projectList.children[0] as HTMLLIElement;
     const projectListItem2 = projectList.children[1] as HTMLLIElement;
     expect(projectListItem1.innerHTML).toContain("Test Project 1");
     expect(projectListItem2.innerHTML).toContain("Test Project 2");
+    expect(projectListItem1.innerHTML).toContain("delete");
+    expect(projectListItem2.innerHTML).toContain("delete");
+  });
+
+  it("renders a list of projects without the delete option as a non-admin", async () => {
+    fetch
+      .mockResponseOnce(JSON.stringify({user: {is_admin: false}}))
+      .mockResponseOnce(JSON.stringify({projects: [project1, project2]}));
+    await act(async () => {
+      ReactDOM.render(<ProjectList />, container);
+    });
+    const pageTitle = container.querySelector("h1") as HTMLHeadingElement;
+    const projectList = container.querySelector(".projectList") as HTMLUListElement;
+    expect(fetch).toHaveBeenCalledTimes(2);
+    expect(pageTitle.textContent).toBe("Projects");
+    expect(projectList.children).toHaveLength(2);
+    const projectListItem1 = projectList.children[0] as HTMLLIElement;
+    const projectListItem2 = projectList.children[1] as HTMLLIElement;
+    expect(projectListItem1.innerHTML).toContain("Test Project 1");
+    expect(projectListItem2.innerHTML).toContain("Test Project 2");
+    expect(projectListItem1.innerHTML).not.toContain("delete");
+    expect(projectListItem2.innerHTML).not.toContain("delete");
   });
 
   it("renders an updated projects list after a project is deleted", async () => {
-    fetch.mockResponseOnce(JSON.stringify({projects: [project1, project2]}));
+    fetch
+      .mockResponseOnce(JSON.stringify({user: {is_admin: true}}))
+      .mockResponseOnce(JSON.stringify({projects: [project1, project2]}));
     await act(async () => {
       ReactDOM.render(<ProjectList />, container);
     });
@@ -88,7 +114,7 @@ describe("Project list component", () => {
       project1DeleteButton.dispatchEvent(new MouseEvent("click", {bubbles: true}));
     });
     expect(global.confirm).toHaveBeenCalledTimes(1);
-    expect(fetch).toHaveBeenCalledTimes(4);
+    expect(fetch).toHaveBeenCalledTimes(5);
     expect(projectList.children).toHaveLength(1);
   });
 });

lara-typescript/src/projects/components/project-list.tsx

@@ -7,13 +7,18 @@ import { snakeToCamelCaseKeys } from "../../shared/convert-keys";
 import "./project-list.scss";
 
 export const ProjectList: React.FC = () => {
+  const [isAdmin, setIsAdmin] = useState(false);
   const [projects, setProjects] = useState<IProject[]|null>(null);
   const [projectsUpdated, setProjectsUpdated] = useState(false);
   const [alertMessage, setAlertMessage] = useState<string|undefined>(undefined);
 
   const urlParams = new URLSearchParams(window.location.search);
   const newProjectCreated = urlParams.get("newProjectCreated");
 
+  useEffect(() => {
+    checkUser();
+  }, []);
+
   useEffect(() => {
     getProjects();
     setProjectsUpdated(false);
@@ -22,6 +27,21 @@ export const ProjectList: React.FC = () => {
     }
   }, [projectsUpdated]);
 
+  const checkUser = async () => {
+    const apiUrl = `/api/v1/user_check`;
+    const data = await fetch(apiUrl, {
+      method: "GET",
+      headers: {"Content-Type": "application/json"},
+      credentials: "include"
+    })
+    .then(response => response.json())
+    .catch(error => {
+       setAlertMessage(error);
+    });
+
+    setIsAdmin(data.user.is_admin);
+  };
+
   const getProjects = async () => {
     const apiUrl = `/api/v1/projects`;
     const data = await fetch(apiUrl, {
@@ -92,7 +112,7 @@ export const ProjectList: React.FC = () => {
             id={project.id}
             title={project.title}
             url={project.url}
-            onDelete={handleDeleteRequest}
+            onDelete={isAdmin ? handleDeleteRequest : undefined}
           />
         ))}
       </ul>