add: typing

src/tapis-app/Apps/_components/Toolbar/ShareModal/ShareModal.tsx

@@ -181,6 +181,7 @@ const ShareModel: React.FC<ToolbarModalProps> = ({ toggle }) => {
     visibility: 'private',
   };
 
+  const sharedCounter = newUsers.length + usersFromProjects.length;
   return (
     <GenericModal
       toggle={() => {
@@ -191,10 +192,12 @@ const ShareModel: React.FC<ToolbarModalProps> = ({ toggle }) => {
       body={
         <div>
           <div>
-            The following actions will be applied to the selected apps:
+            Pending Actions for Selected Apps:
             <ul>
-              <li>Unshare: {removedUsers.length} users </li>
-              <li>Share: {newUsers.length} users </li>
+              <li>Unshare with: {removedUsers.length} users </li>
+              <li>
+                Share with: {newUsers.length + usersFromProjects.length} users
+              </li>
             </ul>
           </div>
           <div className={styles['files-list-container']}>

src/tapis-app/Apps/_components/Toolbar/ShareModal/components/ProjectSelector.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import { Container, FormGroup, Input, Label } from 'reactstrap';
 import { QueryWrapper } from 'tapis-ui/_wrappers';
+import { Project } from 'upstream-api/projects/types';
 import { useList } from 'upstream-hooks/projects';
 
 interface ProjectSelectorProps {
@@ -9,9 +10,9 @@ interface ProjectSelectorProps {
 }
 
 const ProjectSelector = ({ setUsers, users }: ProjectSelectorProps) => {
-  const [selectedProjects, setSelectedProjects] = useState([]);
-  const { data, isLoading, error } = useList();
-  const handleCheckboxChange = (project) => {
+  const [selectedProjects, setSelectedProjects] = useState<number[]>([]);
+  const { data: projects, isLoading, error } = useList();
+  const handleCheckboxChange = (project: Project) => {
     if (selectedProjects.includes(project.id)) {
       setSelectedProjects(selectedProjects.filter((p) => p !== project.id));
     } else {
@@ -24,8 +25,8 @@ const ProjectSelector = ({ setUsers, users }: ProjectSelectorProps) => {
   return (
     <QueryWrapper isLoading={isLoading} error={error}>
       <FormGroup>
-        {data &&
-          data?.map((project, index) => (
+        {projects &&
+          projects?.map((project, index) => (
             <FormGroup check key={index}>
               <Label check>
                 <Input
@@ -35,9 +36,6 @@ const ProjectSelector = ({ setUsers, users }: ProjectSelectorProps) => {
                 />
                 {project.title}
               </Label>
-              {/* <Button color="danger" size="sm" onClick={() => setCategories(categories.filter(c => c !== category))}>
-                        Remove
-                    </Button> */}
             </FormGroup>
           ))}
       </FormGroup>

src/tapis-app/Apps/_components/Toolbar/ShareModal/components/UserSelector.css

@@ -1,5 +1,6 @@
 .link-button {
   background: none;
+  background-color: none;
   color: blue;
   border: none;
   padding: 0;

src/tapis-app/Apps/_components/Toolbar/ShareModal/components/UserSelector.tsx

@@ -1,7 +1,5 @@
 import { useState } from 'react';
-import { Button, Container, FormGroup, Input, Label } from 'reactstrap';
-import { QueryWrapper } from 'tapis-ui/_wrappers';
-import { useList } from 'upstream-hooks/projects';
+import { FormGroup, Input, Label, Button } from 'reactstrap';
 import './UserSelector.css';
 
 interface UserSelectorProps {
@@ -16,7 +14,7 @@ const UserSelector = ({
   setRemovedUsers,
 }: UserSelectorProps) => {
   const [users, setUsers] = useState(initialUsers);
-  const handleCheckboxChange = (user) => {
+  const handleCheckboxChange = (user: string) => {
     if (users.includes(user)) {
       setUsers(users.filter((u) => u !== user));
       setRemovedUsers([...removedUsers, user]);
@@ -27,16 +25,18 @@ const UserSelector = ({
     <div id="my-element" style={{ height: '200px', overflow: 'scroll' }}>
       <h3>Manage existing permissions</h3>
       Shared with {initialUsers.length} users
-      {removedUsers.length > 0 && (
-        <button
+      {initialUsers.length > 0 && (
+        <Button
+          color="none"
+          outline={true}
           className="link-button"
           onClick={() => {
             setRemovedUsers(users);
             setUsers([]);
           }}
         >
           Remove all users
-        </button>
+        </Button>
       )}
       <FormGroup>
         {users &&

src/upstream-api/projects/types.ts

@@ -0,0 +1,69 @@
+export interface Project {
+  id: number;
+  title: string;
+  description: string;
+  chargeCode: string;
+  gid: number;
+  source: any;
+  fieldId: number;
+  field: string;
+  typeId: number;
+  type: string;
+  piId: number;
+  pi: Pi;
+  allocations: Allocation[];
+  nickname: any;
+  members: User[];
+}
+interface User {
+  id: number;
+  username: string;
+  role: string;
+  firstName: string;
+  lastName: string;
+  email: string;
+}
+
+export interface Pi {
+  id: number;
+  username: string;
+  email: string;
+  firstName: string;
+  lastName: string;
+  institution: string;
+  institutionId: number;
+  department: string;
+  departmentId: number;
+  citizenship: string;
+  citizenshipId: number;
+  source: string;
+  uid: number;
+  homeDirectory: string;
+  gid: number;
+}
+
+export interface Allocation {
+  id: number;
+  start: string;
+  end: string;
+  status: string;
+  justification: string;
+  decisionSummary: any;
+  dateRequested: string;
+  dateReviewed: any;
+  computeRequested: number;
+  computeAllocated: number;
+  storageRequested: number;
+  storageAllocated: number;
+  memoryRequested: number;
+  memoryAllocated: number;
+  resourceId: number;
+  resource: string;
+  projectId: number;
+  project: string;
+  requestorId: number;
+  requestor: string;
+  reviewerId: number;
+  reviewer: any;
+  computeUsed: number;
+}

src/upstream-hooks/projects/useList.ts

@@ -3,14 +3,15 @@ import { list } from 'upstream-api/projects';
 import { Jobs } from '@tapis/tapis-typescript';
 import QueryKeys from './queryKeys';
 import { useUpstreamConfig } from 'upstream-hooks/context';
+import { Project } from 'upstream-api/projects/types';
 
 export const defaultParams: Jobs.GetJobListRequest = {
   orderBy: 'created(desc)',
 };
 
 const useList = () => {
   const { accessToken, basePath } = useUpstreamConfig();
-  const result = useQuery<any, Error>(
+  const result = useQuery<Project[], Error>(
     [QueryKeys.list, accessToken],
     // Default to no token. This will generate a 403 when calling the list function
     // which is expected behavior for not having a token
@@ -21,7 +22,6 @@ const useList = () => {
       enabled: !!accessToken,
     }
   );
-  console.log(result);
   return result;
 };