From ce177a88bd1b01ae5ca156f33a0d3a95c2f66a2d Mon Sep 17 00:00:00 2001
From: Maximiliano Osorio <maxiosorio@gmail.com>
Date: Thu, 16 May 2024 08:31:37 -0400
Subject: [PATCH 1/5] add: share/unshare working

---
 src/tapis-api/apps/share.ts                   | 18 +++++
 .../Toolbar/ShareModal/ShareModal.tsx         | 77 +++++++++++++++----
 src/tapis-hooks/apps/useList.ts               |  3 +-
 src/tapis-hooks/apps/useShare.ts              | 60 +++++++++++++++
 .../AppListing/CookbookListing.module.scss    | 54 ++++++++-----
 .../apps/AppListing/CookbookListing.tsx       | 13 +++-
 6 files changed, 185 insertions(+), 40 deletions(-)
 create mode 100644 src/tapis-api/apps/share.ts
 create mode 100644 src/tapis-hooks/apps/useShare.ts

diff --git a/src/tapis-api/apps/share.ts b/src/tapis-api/apps/share.ts
new file mode 100644
index 0000000..c96e64c
--- /dev/null
+++ b/src/tapis-api/apps/share.ts
@@ -0,0 +1,18 @@
+import { Apps } from '@tapis/tapis-typescript';
+import { apiGenerator, errorDecoder } from 'tapis-api/utils';
+
+const shareApp = (
+  request: Apps.ShareAppRequest,
+  basePath: string,
+  jwt: string
+) => {
+  const api: Apps.SharingApi = apiGenerator<Apps.SharingApi>(
+    Apps,
+    Apps.SharingApi,
+    basePath,
+    jwt
+  );
+  return errorDecoder<Apps.RespBasic>(() => api.shareApp(request));
+};
+
+export default shareApp;
diff --git a/src/tapis-app/Apps/_components/Toolbar/ShareModal/ShareModal.tsx b/src/tapis-app/Apps/_components/Toolbar/ShareModal/ShareModal.tsx
index fb9c56d..e803858 100644
--- a/src/tapis-app/Apps/_components/Toolbar/ShareModal/ShareModal.tsx
+++ b/src/tapis-app/Apps/_components/Toolbar/ShareModal/ShareModal.tsx
@@ -2,7 +2,6 @@ import { useEffect, useCallback, useState } from 'react';
 import { Button } from 'reactstrap';
 import { DropdownSelector, GenericModal } from 'tapis-ui/_common';
 import { SubmitWrapper } from 'tapis-ui/_wrappers';
-import { FileListingTable } from 'tapis-ui/components/files/FileListing/FileListing';
 import { ToolbarModalProps } from '../Toolbar';
 import { focusManager } from 'react-query';
 import { Column } from 'react-table';
@@ -16,13 +15,16 @@ import useSharePublic, {
 } from 'tapis-hooks/apps/useSharePublic';
 import { AppListingTable } from 'tapis-ui/components/apps/AppListing';
 import useUnsharePublic from 'tapis-hooks/apps/useUnsharePublic';
+import useShare, { ShareUserHookParams } from 'tapis-hooks/apps/useShare';
 
 const ShareModel: React.FC<ToolbarModalProps> = ({ toggle }) => {
   const { selectedApps, unselect } = useAppsSelect();
   const { shareAppPublicAsync, reset } = useSharePublic();
   const { unShareAppPublicAsync, reset: resetUnshare } = useUnsharePublic();
+  const { shareAppAsync, reset: resetShare } = useShare();
   const [isPublishedApp, setIsPublishedApp] = useState(false);
 
+  const [users, setUsers] = useState<Array<string>>(['wmobley']);
   useEffect(() => {
     reset();
   }, [reset]);
@@ -31,16 +33,23 @@ const ShareModel: React.FC<ToolbarModalProps> = ({ toggle }) => {
     resetUnshare();
   }, [resetUnshare]);
 
+  useEffect(() => {
+    resetShare();
+  }, [resetShare]);
+
   const onComplete = useCallback(() => {
     // Calling the focus manager triggers react-query's
     // automatic refetch on window focus
     focusManager.setFocused(true);
   }, []);
 
-  const { run, state, isLoading, isSuccess, error } = useAppsOperations<
-    ShareHookParams,
-    Apps.RespChangeCount
-  >({
+  const {
+    run: runSharePublic,
+    state: stateSharePublic,
+    isLoading: isLoadingSharePublic,
+    isSuccess: isSuccessSharePublic,
+    error: errorSharePublic,
+  } = useAppsOperations<ShareHookParams, Apps.RespChangeCount>({
     fn: shareAppPublicAsync,
     onComplete,
   });
@@ -56,17 +65,37 @@ const ShareModel: React.FC<ToolbarModalProps> = ({ toggle }) => {
     onComplete,
   });
 
+  const {
+    run: runShare,
+    state: stateShare,
+    isLoading: isLoadingShare,
+    isSuccess: isSuccessShare,
+    error: errorShare,
+  } = useAppsOperations<ShareUserHookParams, Apps.RespChangeCount>({
+    fn: shareAppAsync,
+    onComplete,
+  });
+
   const onSubmit = useCallback(() => {
     const operations: Array<ShareHookParams> = selectedApps.map((app) => ({
       id: app.id!,
     }));
     if (isPublishedApp) {
-      run(operations);
+      runSharePublic(operations);
     }
     if (!isPublishedApp) {
       runUnshare(operations);
     }
-  }, [selectedApps, run, runUnshare]);
+    const userOperations: Array<ShareUserHookParams> = selectedApps.map(
+      (app) => ({
+        id: app.id!,
+        reqShareUpdate: {
+          users,
+        },
+      })
+    );
+    runShare(userOperations);
+  }, [selectedApps, runSharePublic, runUnshare]);
 
   const removeApps = useCallback(
     (file: Apps.TapisApp) => {
@@ -84,7 +113,7 @@ const ShareModel: React.FC<ToolbarModalProps> = ({ toggle }) => {
       id: 'deleteStatus',
       Cell: (el) => {
         const file = selectedApps[el.row.index];
-        if (!state[file.id!]) {
+        if (!stateSharePublic[file.id!]) {
           return (
             <span
               className={styles['remove-file']}
@@ -96,7 +125,9 @@ const ShareModel: React.FC<ToolbarModalProps> = ({ toggle }) => {
             </span>
           );
         }
-        return <AppsOperationStatus status={state[file.id!].status} />;
+        return (
+          <AppsOperationStatus status={stateSharePublic[file.id!].status} />
+        );
       },
     },
   ];
@@ -119,11 +150,13 @@ const ShareModel: React.FC<ToolbarModalProps> = ({ toggle }) => {
             />
           </div>
           <h3> General access </h3>
-
           <DropdownSelector
             type={undefined}
             onChange={(e: any) => {
               const value = e.target.value;
+              reset();
+              resetUnshare();
+              resetShare();
               if (value === 'public') {
                 setIsPublishedApp(true);
               }
@@ -140,22 +173,36 @@ const ShareModel: React.FC<ToolbarModalProps> = ({ toggle }) => {
       footer={
         <SubmitWrapper
           isLoading={false}
-          error={error}
-          success={isSuccess ? `Visibility changed` : ''}
+          error={errorSharePublic || errorShare || errorUnshare}
+          success={
+            isSuccessSharePublic || isSuccessUnshare ? `Visibility changed` : ''
+          }
           reverse={true}
         >
           <Button
             color="primary"
-            disabled={isLoading || isSuccess || selectedApps.length === 0}
+            disabled={
+              isLoadingSharePublic ||
+              isSuccessSharePublic ||
+              isLoadingShare ||
+              isSuccessShare ||
+              isLoadingUnshare ||
+              isSuccessUnshare ||
+              selectedApps.length === 0
+            }
             aria-label="Submit"
             onClick={onSubmit}
           >
             Confirm ({selectedApps.length})
           </Button>
-          {!isSuccess && (
+          {!isSuccessSharePublic && (
             <Button
               color="danger"
-              disabled={isLoading || isSuccess || selectedApps.length === 0}
+              disabled={
+                isLoadingSharePublic ||
+                isSuccessSharePublic ||
+                selectedApps.length === 0
+              }
               aria-label="Cancel"
               onClick={() => {
                 toggle();
diff --git a/src/tapis-hooks/apps/useList.ts b/src/tapis-hooks/apps/useList.ts
index 91d060a..671e4fc 100644
--- a/src/tapis-hooks/apps/useList.ts
+++ b/src/tapis-hooks/apps/useList.ts
@@ -5,7 +5,8 @@ import { useTapisConfig } from 'tapis-hooks';
 import QueryKeys from './queryKeys';
 
 export const defaultParams: Apps.GetAppsRequest = {
-  select: 'jobAttributes,version,updated,isPublic',
+  select: 'jobAttributes,version,updated,isPublic,owner',
+  listType: Apps.ListTypeEnum.All,
 };
 
 const useList = (
diff --git a/src/tapis-hooks/apps/useShare.ts b/src/tapis-hooks/apps/useShare.ts
new file mode 100644
index 0000000..ab8fde7
--- /dev/null
+++ b/src/tapis-hooks/apps/useShare.ts
@@ -0,0 +1,60 @@
+import { useMutation, MutateOptions } from 'react-query';
+import { Apps } from '@tapis/tapis-typescript';
+import { useTapisConfig } from 'tapis-hooks/context';
+import QueryKeys from './queryKeys';
+import shareApp from 'tapis-api/apps/share';
+
+export type ShareUserHookParams = {
+  id: string;
+  reqShareUpdate: Apps.ReqShareUpdate;
+};
+
+const useShare = () => {
+  const { basePath, accessToken } = useTapisConfig();
+  const jwt = accessToken?.access_token || '';
+
+  // The useMutation react-query hook is used to call operations that make server-side changes
+  // (Other hooks would be used for data retrieval)
+  //
+  // In this case, _share helper is called to perform the operation
+  const {
+    mutate,
+    mutateAsync,
+    isLoading,
+    isError,
+    isSuccess,
+    data,
+    error,
+    reset,
+  } = useMutation<Apps.RespBasic, Error, ShareUserHookParams>(
+    [QueryKeys.list, basePath, jwt],
+    (params) =>
+      shareApp(
+        { appId: params.id, reqShareUpdate: params.reqShareUpdate },
+        basePath,
+        jwt
+      )
+  );
+
+  // Return hook object with loading states and login function
+  return {
+    isLoading,
+    isError,
+    isSuccess,
+    data,
+    error,
+    reset,
+    shareApp: (
+      params: ShareUserHookParams,
+      options?: MutateOptions<Apps.RespBasic, Error, ShareUserHookParams>
+    ) => {
+      return mutate(params, options);
+    },
+    shareAppAsync: (
+      params: ShareUserHookParams,
+      options?: MutateOptions<Apps.RespBasic, Error, ShareUserHookParams>
+    ) => mutateAsync(params, options),
+  };
+};
+
+export default useShare;
diff --git a/src/tapis-ui/components/apps/AppListing/CookbookListing.module.scss b/src/tapis-ui/components/apps/AppListing/CookbookListing.module.scss
index dcd2d06..a1f0345 100644
--- a/src/tapis-ui/components/apps/AppListing/CookbookListing.module.scss
+++ b/src/tapis-ui/components/apps/AppListing/CookbookListing.module.scss
@@ -19,14 +19,18 @@
     }
     /* name */
     tr > *:nth-child(2) {
-      width: 62%;
+      width: 47%;
     }
-    /* size */
+    /* owner */
     tr > *:nth-child(3) {
       width: 15%;
     }
-    /* lastModified */
+    /* visibility */
     tr > *:nth-child(4) {
+      width: 15%;
+    }
+    /* lastModified */
+    tr > *:nth-child(5) {
       width: 20%;
     }
   }
@@ -39,14 +43,18 @@
     }
     /* name */
     tr > *:nth-child(2) {
-      width: 62%;
+      width: 47%;
     }
-    /* size */
+    /* owner */
     tr > *:nth-child(3) {
       width: 15%;
     }
-    /* lastModified */
+    /* visibility */
     tr > *:nth-child(4) {
+      width: 15%;
+    }
+    /* lastModified */
+    tr > *:nth-child(5) {
       width: 20%;
     }
   }
@@ -61,7 +69,7 @@
     tr > *:nth-child(2) {
       width: 57%;
     }
-    /* size */
+    /* visibility */
     tr > *:nth-child(3) {
       width: 17.5%;
     }
@@ -81,7 +89,7 @@
     tr > *:nth-child(2) {
       width: 62%;
     }
-    /* size */
+    /* visibility */
     tr > *:nth-child(3) {
       width: 15.5%;
     }
@@ -105,15 +113,15 @@
     }
     /* name */
     tr > *:nth-child(3) {
-      width: 61%;
+      width: 40%;
     }
-    /* size */
+    /* visibility */
     tr > *:nth-child(4) {
-      width: 14%;
+      width: 20%;
     }
     /* lastModified */
     tr > *:nth-child(5) {
-      width: 19%;
+      width: 14%;
     }
   }
 }
@@ -129,15 +137,15 @@
     }
     /* name */
     tr > *:nth-child(3) {
-      width: 61%;
+      width: 40%;
     }
-    /* size */
+    /* visibility */
     tr > *:nth-child(4) {
-      width: 14%;
+      width: 20%;
     }
     /* lastModified */
     tr > *:nth-child(5) {
-      width: 19%;
+      width: 14%;
     }
   }
 }
@@ -153,9 +161,9 @@
     }
     /* name */
     tr > *:nth-child(3) {
-      width: 57%;
+      width: 30%;
     }
-    /* size */
+    /* visibility */
     tr > *:nth-child(4) {
       width: 16.5%;
     }
@@ -179,7 +187,7 @@
     tr > *:nth-child(3) {
       width: 59%;
     }
-    /* size */
+    /* visibility */
     tr > *:nth-child(4) {
       width: 14.5%;
     }
@@ -201,9 +209,13 @@
     }
     /* name */
     tr > *:nth-child(3) {
-      width: 59%;
+      width: 45.5%;
+    }
+    /* owner */
+    tr > *:nth-child(4) {
+      width: 14.5%;
     }
-    /* size */
+    /* visibility */
     tr > *:nth-child(4) {
       width: 14.5%;
     }
diff --git a/src/tapis-ui/components/apps/AppListing/CookbookListing.tsx b/src/tapis-ui/components/apps/AppListing/CookbookListing.tsx
index 1df563e..46cd955 100644
--- a/src/tapis-ui/components/apps/AppListing/CookbookListing.tsx
+++ b/src/tapis-ui/components/apps/AppListing/CookbookListing.tsx
@@ -103,7 +103,7 @@ type AppListingTableProps = {
   location?: string;
   className?: string;
   selectMode?: SelectMode;
-  fields?: Array<'updated' | 'isPublic'>;
+  fields?: Array<'updated' | 'isPublic' | 'owner'>;
 };
 
 export const AppListingTable: React.FC<AppListingTableProps> = React.memo(
@@ -142,6 +142,13 @@ export const AppListingTable: React.FC<AppListingTableProps> = React.memo(
       },
     ];
 
+    if (fields?.some((field) => field === 'owner')) {
+      tableColumns.push({
+        Header: 'Owner',
+        accessor: 'owner',
+      });
+    }
+
     if (fields?.some((field) => field === 'isPublic')) {
       tableColumns.push({
         Header: 'Visibility',
@@ -220,7 +227,7 @@ interface AppListingProps {
   onUnselect?: OnSelectCallback;
   onNavigate?: OnNavigateCallback;
   className?: string;
-  fields?: Array<'updated' | 'isPublic'>;
+  fields?: Array<'updated' | 'isPublic' | 'owner'>;
   selectedApps?: Array<Apps.TapisApp>;
   selectMode?: SelectMode;
 }
@@ -230,7 +237,7 @@ const AppListing: React.FC<AppListingProps> = ({
   onUnselect = undefined,
   onNavigate = undefined,
   className,
-  fields = ['updated', 'isPublic'],
+  fields = ['updated', 'isPublic', 'owner'],
   selectedApps = [],
   selectMode,
 }) => {

From aa798577e6f14ea5005a105bb67c2036f8b276a3 Mon Sep 17 00:00:00 2001
From: Maximiliano Osorio <maxiosorio@gmail.com>
Date: Thu, 16 May 2024 08:48:24 -0400
Subject: [PATCH 2/5] fix: small changes

---
 .../Toolbar/ShareModal/ShareModal.tsx         | 46 +++++++++++--------
 1 file changed, 26 insertions(+), 20 deletions(-)

diff --git a/src/tapis-app/Apps/_components/Toolbar/ShareModal/ShareModal.tsx b/src/tapis-app/Apps/_components/Toolbar/ShareModal/ShareModal.tsx
index e803858..b573a8c 100644
--- a/src/tapis-app/Apps/_components/Toolbar/ShareModal/ShareModal.tsx
+++ b/src/tapis-app/Apps/_components/Toolbar/ShareModal/ShareModal.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useCallback, useState } from 'react';
 import { Button } from 'reactstrap';
-import { DropdownSelector, GenericModal } from 'tapis-ui/_common';
+import { DropdownSelector, FormikInput, GenericModal } from 'tapis-ui/_common';
 import { SubmitWrapper } from 'tapis-ui/_wrappers';
 import { ToolbarModalProps } from '../Toolbar';
 import { focusManager } from 'react-query';
@@ -16,6 +16,7 @@ import useSharePublic, {
 import { AppListingTable } from 'tapis-ui/components/apps/AppListing';
 import useUnsharePublic from 'tapis-hooks/apps/useUnsharePublic';
 import useShare, { ShareUserHookParams } from 'tapis-hooks/apps/useShare';
+import { Form, Formik } from 'formik';
 
 const ShareModel: React.FC<ToolbarModalProps> = ({ toggle }) => {
   const { selectedApps, unselect } = useAppsSelect();
@@ -132,6 +133,10 @@ const ShareModel: React.FC<ToolbarModalProps> = ({ toggle }) => {
     },
   ];
 
+  const initialValues = {
+    visibility: 'private',
+  };
+
   return (
     <GenericModal
       toggle={() => {
@@ -149,25 +154,26 @@ const ShareModel: React.FC<ToolbarModalProps> = ({ toggle }) => {
               className={styles['file-list-table']}
             />
           </div>
-          <h3> General access </h3>
-          <DropdownSelector
-            type={undefined}
-            onChange={(e: any) => {
-              const value = e.target.value;
-              reset();
-              resetUnshare();
-              resetShare();
-              if (value === 'public') {
-                setIsPublishedApp(true);
-              }
-              if (value === 'private') {
-                setIsPublishedApp(false);
-              }
-            }}
-          >
-            <option value="private">Private</option>
-            <option value="public">Public</option>
-          </DropdownSelector>
+          <Formik initialValues={initialValues} onSubmit={onSubmit}>
+            <Form id="share-form">
+              <h3> General access </h3>
+              <DropdownSelector
+                type={undefined}
+                onChange={(e: any) => {
+                  const value = e.target.value;
+                  if (value === 'public') {
+                    setIsPublishedApp(true);
+                  }
+                  if (value === 'private') {
+                    setIsPublishedApp(false);
+                  }
+                }}
+              >
+                <option value="private">Private</option>
+                <option value="public">Public</option>
+              </DropdownSelector>
+            </Form>
+          </Formik>
         </div>
       }
       footer={

From 1b87e95b15312694d8fd41c454b22fadeb900627 Mon Sep 17 00:00:00 2001
From: Maximiliano Osorio <maxiosorio@gmail.com>
Date: Thu, 16 May 2024 10:05:56 -0400
Subject: [PATCH 3/5] add: basic chip

---
 .../Toolbar/ShareModal/ShareModal.tsx         |   3 +
 src/tapis-ui/_common/Chip/Chip.styled.ts      |  25 ++
 src/tapis-ui/_common/Chip/Chip.tsx            |  59 +++
 src/tapis-ui/_common/Chip/constants/event.ts  |   8 +
 src/tapis-ui/_common/Chip/helpers/array.ts    |  22 +
 src/tapis-ui/_common/Chip/helpers/boolean.ts  |   3 +
 src/tapis-ui/_common/Chip/helpers/object.ts   |   3 +
 src/tapis-ui/_common/Chip/helpers/ref.ts      |  15 +
 src/tapis-ui/_common/Chip/index.types.ts      |  66 +++
 src/tapis-ui/_common/MuiChipsInput/index.tsx  | 107 +++++
 .../TextFieldChip/TextFieldChips.styled.ts    |  55 +++
 .../_common/TextFieldChip/TextFieldChips.tsx  | 381 ++++++++++++++++++
 12 files changed, 747 insertions(+)
 create mode 100644 src/tapis-ui/_common/Chip/Chip.styled.ts
 create mode 100644 src/tapis-ui/_common/Chip/Chip.tsx
 create mode 100644 src/tapis-ui/_common/Chip/constants/event.ts
 create mode 100644 src/tapis-ui/_common/Chip/helpers/array.ts
 create mode 100644 src/tapis-ui/_common/Chip/helpers/boolean.ts
 create mode 100644 src/tapis-ui/_common/Chip/helpers/object.ts
 create mode 100644 src/tapis-ui/_common/Chip/helpers/ref.ts
 create mode 100644 src/tapis-ui/_common/Chip/index.types.ts
 create mode 100644 src/tapis-ui/_common/MuiChipsInput/index.tsx
 create mode 100644 src/tapis-ui/_common/TextFieldChip/TextFieldChips.styled.ts
 create mode 100644 src/tapis-ui/_common/TextFieldChip/TextFieldChips.tsx

diff --git a/src/tapis-app/Apps/_components/Toolbar/ShareModal/ShareModal.tsx b/src/tapis-app/Apps/_components/Toolbar/ShareModal/ShareModal.tsx
index b573a8c..d81a66c 100644
--- a/src/tapis-app/Apps/_components/Toolbar/ShareModal/ShareModal.tsx
+++ b/src/tapis-app/Apps/_components/Toolbar/ShareModal/ShareModal.tsx
@@ -17,6 +17,7 @@ import { AppListingTable } from 'tapis-ui/components/apps/AppListing';
 import useUnsharePublic from 'tapis-hooks/apps/useUnsharePublic';
 import useShare, { ShareUserHookParams } from 'tapis-hooks/apps/useShare';
 import { Form, Formik } from 'formik';
+import { MuiChipsInput } from 'tapis-ui/_common/MuiChipsInput';
 
 const ShareModel: React.FC<ToolbarModalProps> = ({ toggle }) => {
   const { selectedApps, unselect } = useAppsSelect();
@@ -172,6 +173,8 @@ const ShareModel: React.FC<ToolbarModalProps> = ({ toggle }) => {
                 <option value="private">Private</option>
                 <option value="public">Public</option>
               </DropdownSelector>
+              <h3> Add users </h3>
+              <MuiChipsInput value={users} onChange={setUsers} />
             </Form>
           </Formik>
         </div>
diff --git a/src/tapis-ui/_common/Chip/Chip.styled.ts b/src/tapis-ui/_common/Chip/Chip.styled.ts
new file mode 100644
index 0000000..ec65275
--- /dev/null
+++ b/src/tapis-ui/_common/Chip/Chip.styled.ts
@@ -0,0 +1,25 @@
+import Chip from '@mui/material/Chip';
+import { styled } from '@mui/material/styles';
+
+const ChipStyled = styled(Chip)(({ theme, size }) => {
+  return `
+    max-width: 100%;
+    margin: 2px 4px;
+    height: ${size === 'small' ? '26px' : '32px'};
+
+
+    &[aria-disabled="true"] > svg {
+      color: ${theme.palette.action.disabled};
+      cursor: default;
+    }
+
+    &.MuiChipsInput-Chip-Editing {
+      background-color: ${theme.palette.primary.light};
+      color: ${theme.palette.primary.contrastText};
+    }
+  `;
+});
+
+export default {
+  ChipStyled,
+};
diff --git a/src/tapis-ui/_common/Chip/Chip.tsx b/src/tapis-ui/_common/Chip/Chip.tsx
new file mode 100644
index 0000000..a741d16
--- /dev/null
+++ b/src/tapis-ui/_common/Chip/Chip.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import { KEYBOARD_KEY } from './constants/event';
+import type { MuiChipsInputChipProps } from './index.types';
+import Styled from './Chip.styled';
+
+type ChipProps = MuiChipsInputChipProps;
+
+const Chip = ({
+  className,
+  index,
+  onDelete,
+  disabled,
+  onEdit,
+  isEditing,
+  disableEdition,
+  ...restChipProps
+}: ChipProps) => {
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    if (event.key === KEYBOARD_KEY.enter) {
+      onDelete(index);
+    }
+  };
+
+  const handleDelete = (event: MouseEvent) => {
+    event?.preventDefault?.();
+    event?.stopPropagation?.();
+    onDelete(index);
+  };
+
+  const handleDoubleClick = (event: React.MouseEvent) => {
+    const target = event.target as HTMLElement;
+
+    // Return if click on a svg icon
+    if (target.textContent !== restChipProps.label) {
+      return;
+    }
+
+    if (!disabled) {
+      onEdit(index);
+    }
+  };
+
+  return (
+    <Styled.ChipStyled
+      className={`MuiChipsInput-Chip ${
+        isEditing ? 'MuiChipsInput-Chip-Editing' : ''
+      } ${className || ''}`}
+      onKeyDown={handleKeyDown}
+      disabled={disabled}
+      onDoubleClick={disableEdition ? undefined : handleDoubleClick}
+      tabIndex={disabled ? -1 : 0}
+      aria-disabled={disabled}
+      onDelete={handleDelete}
+      {...restChipProps}
+    />
+  );
+};
+
+export default Chip;
diff --git a/src/tapis-ui/_common/Chip/constants/event.ts b/src/tapis-ui/_common/Chip/constants/event.ts
new file mode 100644
index 0000000..6c8b7d6
--- /dev/null
+++ b/src/tapis-ui/_common/Chip/constants/event.ts
@@ -0,0 +1,8 @@
+export const KEYBOARD_KEY = {
+  enter: 'Enter',
+  backspace: 'Backspace'
+}
+
+export const KEYBOARD_KEYCODE = {
+  ime: 229
+}
diff --git a/src/tapis-ui/_common/Chip/helpers/array.ts b/src/tapis-ui/_common/Chip/helpers/array.ts
new file mode 100644
index 0000000..0e7e972
--- /dev/null
+++ b/src/tapis-ui/_common/Chip/helpers/array.ts
@@ -0,0 +1,22 @@
+export function append<T extends unknown[]>(array: T, item: T[keyof T]): T {
+  return [...array, item] as T
+}
+
+export function removeIndex<T extends unknown[]>(
+  array: T,
+  indexItem: number
+): T {
+  return array.filter((_, index) => {
+    return indexItem !== index
+  }) as T
+}
+
+export function updateIndex<T extends unknown[]>(
+  array: T,
+  indexItem: number,
+  item: T[keyof T]
+): T {
+  return array.map((chipItem, index) => {
+    return indexItem === index ? item : chipItem
+  }) as T
+}
diff --git a/src/tapis-ui/_common/Chip/helpers/boolean.ts b/src/tapis-ui/_common/Chip/helpers/boolean.ts
new file mode 100644
index 0000000..a140888
--- /dev/null
+++ b/src/tapis-ui/_common/Chip/helpers/boolean.ts
@@ -0,0 +1,3 @@
+export function matchIsBoolean(value: unknown): value is boolean {
+  return typeof value === 'boolean'
+}
diff --git a/src/tapis-ui/_common/Chip/helpers/object.ts b/src/tapis-ui/_common/Chip/helpers/object.ts
new file mode 100644
index 0000000..ab34231
--- /dev/null
+++ b/src/tapis-ui/_common/Chip/helpers/object.ts
@@ -0,0 +1,3 @@
+export function matchIsObject(value: unknown): value is object {
+  return typeof value === 'object' && !Array.isArray(value) && value !== null
+}
diff --git a/src/tapis-ui/_common/Chip/helpers/ref.ts b/src/tapis-ui/_common/Chip/helpers/ref.ts
new file mode 100644
index 0000000..a2b388c
--- /dev/null
+++ b/src/tapis-ui/_common/Chip/helpers/ref.ts
@@ -0,0 +1,15 @@
+import React from 'react'
+import { matchIsObject } from './object'
+
+export function assocRefToPropRef(
+  ref: unknown,
+  propRef: React.Ref<unknown> | undefined
+): void {
+  if (typeof propRef === 'function') {
+    propRef(ref)
+  } else if (propRef && matchIsObject(propRef) && 'current' in propRef) {
+    // @ts-ignore
+    // eslint-disable-next-line no-param-reassign
+    propRef.current = ref
+  }
+}
diff --git a/src/tapis-ui/_common/Chip/index.types.ts b/src/tapis-ui/_common/Chip/index.types.ts
new file mode 100644
index 0000000..48ddfd7
--- /dev/null
+++ b/src/tapis-ui/_common/Chip/index.types.ts
@@ -0,0 +1,66 @@
+import React from 'react'
+import type { ChipProps as MuiChipProps } from '@mui/material/Chip'
+import type { TextFieldProps as MuiTextFieldProps } from '@mui/material/TextField'
+
+type TextFieldProps = Omit<
+  MuiTextFieldProps,
+  'onChange' | 'select' | 'type' | 'multiline' | 'defaultValue'
+>
+
+export type MuiChipsInputChipProps = MuiChipProps & {
+  index: number
+  label: string
+  title: string
+  isEditing: boolean
+  disableEdition?: boolean
+  size: MuiChipProps['size']
+  disabled: MuiChipProps['disabled']
+  onDelete: (index: number) => void
+  onEdit: (index: number) => void
+}
+
+export type MuiChipsInputChipComponent =
+  React.ElementType<MuiChipsInputChipProps>
+
+export type MuiChipsInputChip = string
+
+export interface BaseMuiChipsInputProps {
+  value?: MuiChipsInputChip[]
+  onInputChange?: (inputValue: string) => void
+  inputValue?: string
+  onAddChip?: (chipValue: MuiChipsInputChip, chipIndex: number) => void
+  onDeleteChip?: (chipValue: MuiChipsInputChip, chipIndex: number) => void
+  onEditChip?: (chipValue: MuiChipsInputChip, chipIndex: number) => void
+  onChange?: (value: MuiChipsInputChip[]) => void
+  addOnWhichKey?: string[] | string
+  renderChip?: (
+    ChipComponent: MuiChipsInputChipComponent,
+    key: React.Key,
+    ChipProps: MuiChipsInputChipProps
+  ) => JSX.Element
+  hideClearAll?: boolean
+  disableEdition?: boolean
+  disableDeleteOnBackspace?: boolean
+  validate?: (
+    chipValue: MuiChipsInputChip
+  ) => boolean | { isError: boolean; textError: string }
+}
+
+// Discriminated union which allows ClearOnBlur or AddOnBlur, but not both, or neither
+type ChipInputBlurBehavior =
+  | {
+      clearInputOnBlur: true
+      addOnBlur?: never
+    }
+  | {
+      clearInputOnBlur?: never
+      addOnBlur: true
+    }
+  | {
+      clearInputOnBlur?: false
+      addOnBlur?: false
+    }
+
+export type MuiChipsInputProps = TextFieldProps &
+  BaseMuiChipsInputProps &
+  ChipInputBlurBehavior
diff --git a/src/tapis-ui/_common/MuiChipsInput/index.tsx b/src/tapis-ui/_common/MuiChipsInput/index.tsx
new file mode 100644
index 0000000..e9f9ef3
--- /dev/null
+++ b/src/tapis-ui/_common/MuiChipsInput/index.tsx
@@ -0,0 +1,107 @@
+import React from 'react';
+import TextFieldChips from '../TextFieldChip/TextFieldChips';
+import { KEYBOARD_KEY } from '../Chip/constants/event';
+import { append, removeIndex, updateIndex } from '../Chip/helpers/array';
+import type {
+  MuiChipsInputChip,
+  MuiChipsInputChipComponent,
+  MuiChipsInputChipProps,
+  MuiChipsInputProps,
+} from '../Chip/index.types';
+
+export {
+  MuiChipsInputChip,
+  MuiChipsInputChipComponent,
+  MuiChipsInputChipProps,
+  MuiChipsInputProps,
+};
+
+const defaultValue: MuiChipsInputProps['value'] = [];
+
+const MuiChipsInput = React.forwardRef(
+  (
+    {
+      value = defaultValue,
+      onChange,
+      onAddChip,
+      onInputChange,
+      onDeleteChip,
+      disabled,
+      validate,
+      clearInputOnBlur,
+      addOnBlur,
+      hideClearAll,
+      disableDeleteOnBackspace,
+      onEditChip,
+      renderChip,
+      disableEdition,
+      addOnWhichKey = KEYBOARD_KEY.enter,
+      inputValue,
+      ...restTextFieldProps
+    }: MuiChipsInputProps,
+    propRef: MuiChipsInputProps['ref']
+  ) => {
+    const handleAddChip = (chipValue: MuiChipsInputChip) => {
+      if (disabled) {
+        return;
+      }
+
+      const newValue = append(value, chipValue);
+      const newIndex = newValue.length - 1;
+
+      onAddChip?.(chipValue, newIndex);
+      onChange?.(newValue);
+    };
+
+    const handleDeleteChip = (chipIndex: number) => {
+      if (disabled) {
+        return;
+      }
+
+      const chip = value[chipIndex];
+      onChange?.(removeIndex(value, chipIndex));
+      onDeleteChip?.(chip, chipIndex);
+    };
+
+    const handleEditChip = (
+      chipValue: MuiChipsInputChip,
+      chipIndex: number
+    ) => {
+      if (disabled || disableEdition) {
+        return;
+      }
+
+      onChange?.(updateIndex(value, chipIndex, chipValue));
+      onEditChip?.(chipValue, chipIndex);
+    };
+
+    const handleDeleteAllChips = () => {
+      onChange?.([]);
+    };
+
+    return (
+      <TextFieldChips
+        chips={value}
+        onAddChip={handleAddChip}
+        onInputChange={onInputChange}
+        disableDeleteOnBackspace={disableDeleteOnBackspace}
+        onDeleteChip={handleDeleteChip}
+        onEditChip={handleEditChip}
+        renderChip={renderChip}
+        onDeleteAllChips={handleDeleteAllChips}
+        clearInputOnBlur={clearInputOnBlur}
+        addOnBlur={addOnBlur}
+        disabled={disabled}
+        disableEdition={disableEdition}
+        validate={validate}
+        inputValue={inputValue}
+        hideClearAll={hideClearAll}
+        addOnWhichKey={addOnWhichKey}
+        {...restTextFieldProps}
+        ref={propRef}
+      />
+    );
+  }
+);
+
+export { MuiChipsInput };
diff --git a/src/tapis-ui/_common/TextFieldChip/TextFieldChips.styled.ts b/src/tapis-ui/_common/TextFieldChip/TextFieldChips.styled.ts
new file mode 100644
index 0000000..39fe3ea
--- /dev/null
+++ b/src/tapis-ui/_common/TextFieldChip/TextFieldChips.styled.ts
@@ -0,0 +1,55 @@
+import Chip from '@mui/material/Chip';
+import { styled } from '@mui/material/styles';
+import TextField from '@mui/material/TextField';
+
+const EndAdornmentClose = styled('div')`
+  top: 50%;
+  transform: translateY(-50%);
+  right: 10px;
+  position: absolute;
+`;
+
+const TextFieldStyled = styled(TextField)((props) => {
+  return `
+    max-width: 100%;
+
+    .MuiInputBase-root {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: flex-start;
+      row-gap: 5px;
+      padding-top: ${props.size === 'small' ? '5px' : '9px'};
+      padding-right: ${props.InputProps?.endAdornment ? '30px' : '9px'};
+      padding-bottom: ${props.size === 'small' ? '5px' : '9px'};
+      padding-left: 10px;
+
+      input {
+        min-width: 30px;
+        width: auto;
+        flex-grow: 1;
+        text-overflow: ellipsis;
+        padding: ${props.size === 'small' ? '3.5px 4px' : '7.5px 4px'};
+        align-self: center;
+      }
+    }
+  `;
+});
+
+const ChipStyled = styled(Chip)(({ theme, size }) => {
+  return `
+    max-width: 100%;
+    margin: 2px 4px;
+    height: ${size === 'small' ? '26px' : '32px'};
+
+    &[aria-disabled="true"] > svg.MuiChip-deleteIcon {
+      color: ${theme.palette.action.disabled};
+      cursor: default;
+    }
+  `;
+});
+
+export default {
+  ChipStyled,
+  TextFieldStyled,
+  EndAdornmentClose,
+};
diff --git a/src/tapis-ui/_common/TextFieldChip/TextFieldChips.tsx b/src/tapis-ui/_common/TextFieldChip/TextFieldChips.tsx
new file mode 100644
index 0000000..17066e6
--- /dev/null
+++ b/src/tapis-ui/_common/TextFieldChip/TextFieldChips.tsx
@@ -0,0 +1,381 @@
+/* eslint-disable react/require-default-props */
+import React from 'react';
+import Chip from '../Chip/Chip';
+import { KEYBOARD_KEY, KEYBOARD_KEYCODE } from '../Chip/constants/event';
+import { matchIsBoolean } from '../Chip/helpers/boolean';
+import { assocRefToPropRef } from '../Chip/helpers/ref';
+// import CloseIcon from '@mui/icons-material/Close';
+import ClickAwayListener from '@mui/material/ClickAwayListener';
+import IconButton from '@mui/material/IconButton';
+import type { TextFieldProps } from '@mui/material/TextField';
+import type {
+  MuiChipsInputChip,
+  MuiChipsInputChipComponent,
+  MuiChipsInputChipProps,
+  MuiChipsInputProps,
+} from '../Chip/index.types';
+import Styled from './TextFieldChips.styled';
+
+type TextFieldChipsProps = TextFieldProps & {
+  chips: MuiChipsInputChip[];
+  onAddChip?: (chip: MuiChipsInputChip) => void;
+  onEditChip?: (chip: MuiChipsInputChip, chipIndex: number) => void;
+  clearInputOnBlur?: boolean;
+  addOnBlur?: boolean;
+  hideClearAll?: boolean;
+  disableDeleteOnBackspace?: boolean;
+  addOnWhichKey?: string | string[];
+  disableEdition?: boolean;
+  inputValue?: string;
+  validate?: MuiChipsInputProps['validate'];
+  onInputChange?: (inputValue: string) => void;
+  onDeleteChip?: (chipIndex: number) => void;
+  onDeleteAllChips?: () => void;
+  renderChip?: (
+    ChipComponent: MuiChipsInputChipComponent,
+    key: React.Key,
+    ChipProps: MuiChipsInputChipProps
+  ) => JSX.Element;
+};
+
+const TextFieldChips = React.forwardRef(
+  (
+    {
+      chips,
+      onAddChip,
+      onEditChip,
+      onDeleteChip,
+      InputProps,
+      onInputChange,
+      disabled,
+      clearInputOnBlur,
+      addOnBlur,
+      validate,
+      error,
+      helperText,
+      hideClearAll,
+      inputProps,
+      size,
+      disableDeleteOnBackspace,
+      disableEdition,
+      className,
+      renderChip,
+      addOnWhichKey,
+      onFocus,
+      onDeleteAllChips,
+      inputRef: inputRefFromProp,
+      inputValue: inputValueControlled,
+      ...restTextFieldProps
+    }: TextFieldChipsProps,
+    propRef: TextFieldChipsProps['ref']
+  ): React.ReactElement => {
+    const [inputValueUncontrolled, setInputValueUncontrolled] =
+      React.useState<string>('');
+    const [textError, setTextError] = React.useState<string>('');
+    const inputElRef = React.useRef<HTMLDivElement | null>(null);
+    const isFocusingRef = React.useRef<boolean>(false);
+    const isControlledRef = React.useRef(
+      typeof inputValueControlled === 'string'
+    );
+    const [chipIndexEditable, setChipIndexEditable] = React.useState<
+      null | number
+    >(null);
+    const { onKeyDown, ...restInputProps } = inputProps || {};
+    const { inputRef, ...restIInputProps } = InputProps || {};
+
+    const clearTextError = () => {
+      setTextError('');
+    };
+
+    const isControlled = isControlledRef.current;
+    const inputValue = isControlled
+      ? (inputValueControlled as string)
+      : inputValueUncontrolled;
+
+    const updateInputValue = (newInputValue: string) => {
+      onInputChange?.(newInputValue);
+
+      if (!isControlled) {
+        setInputValueUncontrolled(newInputValue);
+      }
+    };
+
+    const updateChipIndexEditable = (chipIndex: number) => {
+      updateInputValue(chips[chipIndex]);
+      setChipIndexEditable(chipIndex);
+      clearTextError();
+    };
+
+    const clearChipIndexEditable = () => {
+      setChipIndexEditable(null);
+    };
+
+    const clearInputValue = () => {
+      clearTextError();
+      updateInputValue('');
+    };
+
+    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+      updateInputValue(event.target.value);
+    };
+
+    const validationGuard = (
+      chipValue: MuiChipsInputChip,
+      event?: React.KeyboardEvent<HTMLInputElement>
+    ) => {
+      return (callback: () => void) => {
+        if (typeof validate === 'function') {
+          const validation = validate(chipValue);
+
+          if (validation === false) {
+            event?.preventDefault();
+
+            return;
+          }
+
+          if (!matchIsBoolean(validation) && validation.isError) {
+            event?.preventDefault();
+            setTextError(validation.textError);
+
+            return;
+          }
+        }
+
+        callback();
+      };
+    };
+
+    const updateChip = (
+      chipValue: MuiChipsInputChip,
+      chipIndex: number,
+      event?: React.KeyboardEvent<HTMLInputElement>
+    ) => {
+      validationGuard(
+        chipValue,
+        event
+      )(() => {
+        onEditChip?.(chipValue, chipIndex);
+        clearChipIndexEditable();
+        clearInputValue();
+      });
+    };
+
+    const addChip = (
+      chipValue: MuiChipsInputChip,
+      event?: React.KeyboardEvent<HTMLInputElement>
+    ) => {
+      validationGuard(
+        chipValue,
+        event
+      )(() => {
+        onAddChip?.(inputValue.trim());
+        clearInputValue();
+      });
+    };
+
+    const handleClickAway = () => {
+      if (!isFocusingRef.current) {
+        return;
+      }
+
+      if (chipIndexEditable !== null) {
+        clearChipIndexEditable();
+        clearInputValue();
+      } else if (addOnBlur) {
+        if (inputValue.length > 0) {
+          const inputValueTrimmed = inputValue.trim();
+
+          if (inputValueTrimmed.length === 0) {
+            clearInputValue();
+          } else if (chipIndexEditable !== null) {
+            updateChip(inputValueTrimmed, chipIndexEditable);
+          } else {
+            addChip(inputValueTrimmed);
+          }
+        }
+      } else if (clearInputOnBlur) {
+        clearInputValue();
+      }
+
+      isFocusingRef.current = false;
+    };
+
+    const handleRef = (ref: HTMLDivElement | null): void => {
+      inputElRef.current = ref;
+
+      if (inputRefFromProp) {
+        assocRefToPropRef(ref, inputRefFromProp);
+      }
+
+      if (propRef) {
+        assocRefToPropRef(ref, propRef);
+      }
+    };
+
+    const matchIsValidKeyToAdd = (eventKey: string, eventKeyCode: number) => {
+      if (eventKeyCode === KEYBOARD_KEYCODE.ime) {
+        return false;
+      }
+
+      if (addOnWhichKey) {
+        if (Array.isArray(addOnWhichKey)) {
+          return addOnWhichKey.some((key) => {
+            return key === eventKey;
+          });
+        }
+
+        return addOnWhichKey === eventKey;
+      }
+
+      return eventKey === KEYBOARD_KEY.enter;
+    };
+
+    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+      const isKeyIsAdd = matchIsValidKeyToAdd(event.key, event.keyCode);
+      const isBackspace = event.key === KEYBOARD_KEY.backspace;
+      const inputValueTrimed = inputValue.trim();
+
+      if (!isKeyIsAdd && event.code === 'Tab') {
+        handleClickAway();
+
+        return;
+      }
+
+      if (isKeyIsAdd) {
+        event.preventDefault();
+      }
+
+      if (inputValue.length > 0 && isKeyIsAdd) {
+        if (inputValueTrimed.length === 0) {
+          clearInputValue();
+        } else if (chipIndexEditable !== null) {
+          updateChip(inputValueTrimed, chipIndexEditable, event);
+        } else {
+          addChip(inputValueTrimed, event);
+        }
+      } else if (
+        isBackspace &&
+        inputValue.length === 0 &&
+        chips.length > 0 &&
+        !disableDeleteOnBackspace
+      ) {
+        const chipIndex = chips.length - 1;
+        onDeleteChip?.(chipIndex);
+
+        if (chipIndexEditable === chipIndex) {
+          clearChipIndexEditable();
+        }
+      }
+
+      onKeyDown?.(event);
+    };
+
+    const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {
+      event.preventDefault();
+      onFocus?.(event);
+      isFocusingRef.current = true;
+    };
+
+    const handleClearAll = (event: React.MouseEvent<HTMLButtonElement>) => {
+      event.preventDefault();
+
+      if (!hideClearAll && !disabled) {
+        onDeleteAllChips?.();
+        clearInputValue();
+        clearChipIndexEditable();
+      }
+    };
+
+    const handleEdit = (chipIndex: number) => {
+      if (chipIndex === chipIndexEditable) {
+        clearInputValue();
+        clearChipIndexEditable();
+      } else {
+        updateChipIndexEditable(chipIndex);
+      }
+
+      inputElRef.current?.focus();
+    };
+
+    const handleDeleteChip = (chipIndex: number) => {
+      if (disabled) {
+        return;
+      }
+
+      onDeleteChip?.(chipIndex);
+
+      if (chipIndexEditable !== null) {
+        clearChipIndexEditable();
+        clearInputValue();
+      }
+    };
+
+    const hasAtLeastOneChip = chips.length > 0;
+
+    return (
+      <ClickAwayListener onClickAway={handleClickAway}>
+        <Styled.TextFieldStyled
+          value={inputValue}
+          onChange={handleChange}
+          ref={propRef}
+          className={`MuiChipsInput-TextField ${className || ''}`}
+          size={size}
+          placeholder="Type and press enter"
+          onFocus={handleFocus}
+          inputProps={{
+            onKeyDown: handleKeyDown,
+            enterKeyHint: 'done',
+            ...restInputProps,
+          }}
+          disabled={disabled}
+          error={Boolean(textError) || error}
+          helperText={textError || helperText}
+          InputProps={{
+            inputRef: handleRef,
+            startAdornment: hasAtLeastOneChip
+              ? chips.map((chip, index) => {
+                  const key = `chip-${index}`;
+                  const ChipProps: MuiChipsInputChipProps = {
+                    index,
+                    onEdit: handleEdit,
+                    label: chip,
+                    title: chip,
+                    isEditing: index === chipIndexEditable,
+                    size,
+                    disabled,
+                    disableEdition,
+                    onDelete: handleDeleteChip,
+                  };
+
+                  return renderChip ? (
+                    renderChip(Chip, key, ChipProps)
+                  ) : (
+                    <Chip {...ChipProps} key={key} />
+                  );
+                })
+              : null,
+            endAdornment: !hideClearAll ? (
+              <Styled.EndAdornmentClose
+                style={{ visibility: hasAtLeastOneChip ? 'visible' : 'hidden' }}
+              >
+                <IconButton
+                  aria-label="Clear"
+                  title="Clear"
+                  disabled={disabled}
+                  size="small"
+                  onClick={handleClearAll}
+                >
+                  {/* <CloseIcon fontSize="small" /> */}
+                </IconButton>
+              </Styled.EndAdornmentClose>
+            ) : null,
+            ...restIInputProps,
+          }}
+          {...restTextFieldProps}
+        />
+      </ClickAwayListener>
+    );
+  }
+);
+
+export default TextFieldChips;

From d972da476ca59a6c79d9f641142aa7553990f1df Mon Sep 17 00:00:00 2001
From: Maximiliano Osorio <maxiosorio@gmail.com>
Date: Thu, 16 May 2024 10:31:19 -0400
Subject: [PATCH 4/5] fix: show shared with users

---
 .../Apps/_components/Toolbar/ShareModal/ShareModal.tsx      | 6 ++++--
 src/tapis-hooks/apps/useList.ts                             | 2 +-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/tapis-app/Apps/_components/Toolbar/ShareModal/ShareModal.tsx b/src/tapis-app/Apps/_components/Toolbar/ShareModal/ShareModal.tsx
index d81a66c..52741b4 100644
--- a/src/tapis-app/Apps/_components/Toolbar/ShareModal/ShareModal.tsx
+++ b/src/tapis-app/Apps/_components/Toolbar/ShareModal/ShareModal.tsx
@@ -25,8 +25,10 @@ const ShareModel: React.FC<ToolbarModalProps> = ({ toggle }) => {
   const { unShareAppPublicAsync, reset: resetUnshare } = useUnsharePublic();
   const { shareAppAsync, reset: resetShare } = useShare();
   const [isPublishedApp, setIsPublishedApp] = useState(false);
-
-  const [users, setUsers] = useState<Array<string>>(['wmobley']);
+  const getAllUsers = selectedApps.map((app) => app.sharedWithUsers);
+  const [users, setUsers] = useState<Array<string>>(
+    getAllUsers.filter(String).flat() as Array<string>
+  );
   useEffect(() => {
     reset();
   }, [reset]);
diff --git a/src/tapis-hooks/apps/useList.ts b/src/tapis-hooks/apps/useList.ts
index 671e4fc..434728b 100644
--- a/src/tapis-hooks/apps/useList.ts
+++ b/src/tapis-hooks/apps/useList.ts
@@ -5,7 +5,7 @@ import { useTapisConfig } from 'tapis-hooks';
 import QueryKeys from './queryKeys';
 
 export const defaultParams: Apps.GetAppsRequest = {
-  select: 'jobAttributes,version,updated,isPublic,owner',
+  select: 'jobAttributes,version,updated,isPublic,owner,sharedWithUsers',
   listType: Apps.ListTypeEnum.All,
 };
 

From 2e4e8b2a4d2d917eda3bed37ee744fd05e4bc162 Mon Sep 17 00:00:00 2001
From: Maximiliano Osorio <maxiosorio@gmail.com>
Date: Thu, 16 May 2024 10:45:36 -0400
Subject: [PATCH 5/5] fix: prettier

---
 src/tapis-ui/_common/Chip/constants/event.ts |  8 +--
 src/tapis-ui/_common/Chip/helpers/array.ts   | 10 +--
 src/tapis-ui/_common/Chip/helpers/boolean.ts |  2 +-
 src/tapis-ui/_common/Chip/helpers/object.ts  |  2 +-
 src/tapis-ui/_common/Chip/helpers/ref.ts     |  8 +--
 src/tapis-ui/_common/Chip/index.types.ts     | 74 ++++++++++----------
 6 files changed, 52 insertions(+), 52 deletions(-)

diff --git a/src/tapis-ui/_common/Chip/constants/event.ts b/src/tapis-ui/_common/Chip/constants/event.ts
index 6c8b7d6..e3f25a0 100644
--- a/src/tapis-ui/_common/Chip/constants/event.ts
+++ b/src/tapis-ui/_common/Chip/constants/event.ts
@@ -1,8 +1,8 @@
 export const KEYBOARD_KEY = {
   enter: 'Enter',
-  backspace: 'Backspace'
-}
+  backspace: 'Backspace',
+};
 
 export const KEYBOARD_KEYCODE = {
-  ime: 229
-}
+  ime: 229,
+};
diff --git a/src/tapis-ui/_common/Chip/helpers/array.ts b/src/tapis-ui/_common/Chip/helpers/array.ts
index 0e7e972..03463ab 100644
--- a/src/tapis-ui/_common/Chip/helpers/array.ts
+++ b/src/tapis-ui/_common/Chip/helpers/array.ts
@@ -1,5 +1,5 @@
 export function append<T extends unknown[]>(array: T, item: T[keyof T]): T {
-  return [...array, item] as T
+  return [...array, item] as T;
 }
 
 export function removeIndex<T extends unknown[]>(
@@ -7,8 +7,8 @@ export function removeIndex<T extends unknown[]>(
   indexItem: number
 ): T {
   return array.filter((_, index) => {
-    return indexItem !== index
-  }) as T
+    return indexItem !== index;
+  }) as T;
 }
 
 export function updateIndex<T extends unknown[]>(
@@ -17,6 +17,6 @@ export function updateIndex<T extends unknown[]>(
   item: T[keyof T]
 ): T {
   return array.map((chipItem, index) => {
-    return indexItem === index ? item : chipItem
-  }) as T
+    return indexItem === index ? item : chipItem;
+  }) as T;
 }
diff --git a/src/tapis-ui/_common/Chip/helpers/boolean.ts b/src/tapis-ui/_common/Chip/helpers/boolean.ts
index a140888..983a7f7 100644
--- a/src/tapis-ui/_common/Chip/helpers/boolean.ts
+++ b/src/tapis-ui/_common/Chip/helpers/boolean.ts
@@ -1,3 +1,3 @@
 export function matchIsBoolean(value: unknown): value is boolean {
-  return typeof value === 'boolean'
+  return typeof value === 'boolean';
 }
diff --git a/src/tapis-ui/_common/Chip/helpers/object.ts b/src/tapis-ui/_common/Chip/helpers/object.ts
index ab34231..f8a0eb0 100644
--- a/src/tapis-ui/_common/Chip/helpers/object.ts
+++ b/src/tapis-ui/_common/Chip/helpers/object.ts
@@ -1,3 +1,3 @@
 export function matchIsObject(value: unknown): value is object {
-  return typeof value === 'object' && !Array.isArray(value) && value !== null
+  return typeof value === 'object' && !Array.isArray(value) && value !== null;
 }
diff --git a/src/tapis-ui/_common/Chip/helpers/ref.ts b/src/tapis-ui/_common/Chip/helpers/ref.ts
index a2b388c..3b1ef03 100644
--- a/src/tapis-ui/_common/Chip/helpers/ref.ts
+++ b/src/tapis-ui/_common/Chip/helpers/ref.ts
@@ -1,15 +1,15 @@
-import React from 'react'
-import { matchIsObject } from './object'
+import React from 'react';
+import { matchIsObject } from './object';
 
 export function assocRefToPropRef(
   ref: unknown,
   propRef: React.Ref<unknown> | undefined
 ): void {
   if (typeof propRef === 'function') {
-    propRef(ref)
+    propRef(ref);
   } else if (propRef && matchIsObject(propRef) && 'current' in propRef) {
     // @ts-ignore
     // eslint-disable-next-line no-param-reassign
-    propRef.current = ref
+    propRef.current = ref;
   }
 }
diff --git a/src/tapis-ui/_common/Chip/index.types.ts b/src/tapis-ui/_common/Chip/index.types.ts
index 48ddfd7..0ae702f 100644
--- a/src/tapis-ui/_common/Chip/index.types.ts
+++ b/src/tapis-ui/_common/Chip/index.types.ts
@@ -1,66 +1,66 @@
-import React from 'react'
-import type { ChipProps as MuiChipProps } from '@mui/material/Chip'
-import type { TextFieldProps as MuiTextFieldProps } from '@mui/material/TextField'
+import React from 'react';
+import type { ChipProps as MuiChipProps } from '@mui/material/Chip';
+import type { TextFieldProps as MuiTextFieldProps } from '@mui/material/TextField';
 
 type TextFieldProps = Omit<
   MuiTextFieldProps,
   'onChange' | 'select' | 'type' | 'multiline' | 'defaultValue'
->
+>;
 
 export type MuiChipsInputChipProps = MuiChipProps & {
-  index: number
-  label: string
-  title: string
-  isEditing: boolean
-  disableEdition?: boolean
-  size: MuiChipProps['size']
-  disabled: MuiChipProps['disabled']
-  onDelete: (index: number) => void
-  onEdit: (index: number) => void
-}
+  index: number;
+  label: string;
+  title: string;
+  isEditing: boolean;
+  disableEdition?: boolean;
+  size: MuiChipProps['size'];
+  disabled: MuiChipProps['disabled'];
+  onDelete: (index: number) => void;
+  onEdit: (index: number) => void;
+};
 
 export type MuiChipsInputChipComponent =
-  React.ElementType<MuiChipsInputChipProps>
+  React.ElementType<MuiChipsInputChipProps>;
 
-export type MuiChipsInputChip = string
+export type MuiChipsInputChip = string;
 
 export interface BaseMuiChipsInputProps {
-  value?: MuiChipsInputChip[]
-  onInputChange?: (inputValue: string) => void
-  inputValue?: string
-  onAddChip?: (chipValue: MuiChipsInputChip, chipIndex: number) => void
-  onDeleteChip?: (chipValue: MuiChipsInputChip, chipIndex: number) => void
-  onEditChip?: (chipValue: MuiChipsInputChip, chipIndex: number) => void
-  onChange?: (value: MuiChipsInputChip[]) => void
-  addOnWhichKey?: string[] | string
+  value?: MuiChipsInputChip[];
+  onInputChange?: (inputValue: string) => void;
+  inputValue?: string;
+  onAddChip?: (chipValue: MuiChipsInputChip, chipIndex: number) => void;
+  onDeleteChip?: (chipValue: MuiChipsInputChip, chipIndex: number) => void;
+  onEditChip?: (chipValue: MuiChipsInputChip, chipIndex: number) => void;
+  onChange?: (value: MuiChipsInputChip[]) => void;
+  addOnWhichKey?: string[] | string;
   renderChip?: (
     ChipComponent: MuiChipsInputChipComponent,
     key: React.Key,
     ChipProps: MuiChipsInputChipProps
-  ) => JSX.Element
-  hideClearAll?: boolean
-  disableEdition?: boolean
-  disableDeleteOnBackspace?: boolean
+  ) => JSX.Element;
+  hideClearAll?: boolean;
+  disableEdition?: boolean;
+  disableDeleteOnBackspace?: boolean;
   validate?: (
     chipValue: MuiChipsInputChip
-  ) => boolean | { isError: boolean; textError: string }
+  ) => boolean | { isError: boolean; textError: string };
 }
 
 // Discriminated union which allows ClearOnBlur or AddOnBlur, but not both, or neither
 type ChipInputBlurBehavior =
   | {
-      clearInputOnBlur: true
-      addOnBlur?: never
+      clearInputOnBlur: true;
+      addOnBlur?: never;
     }
   | {
-      clearInputOnBlur?: never
-      addOnBlur: true
+      clearInputOnBlur?: never;
+      addOnBlur: true;
     }
   | {
-      clearInputOnBlur?: false
-      addOnBlur?: false
-    }
+      clearInputOnBlur?: false;
+      addOnBlur?: false;
+    };
 
 export type MuiChipsInputProps = TextFieldProps &
   BaseMuiChipsInputProps &
-  ChipInputBlurBehavior
+  ChipInputBlurBehavior;