From cecbcd9dc6f1fc84c90906968a1c0cb7a5625271 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Mon, 23 Oct 2023 18:50:03 -0500
Subject: [PATCH] replace `GridSharing` with `SharingIndicators` in `GridList`

---
 client/src/components/Grid/GridList.vue           | 15 +++++++--------
 .../src/components/Indices/SharingIndicators.vue  | 14 ++++++++++++--
 2 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/client/src/components/Grid/GridList.vue b/client/src/components/Grid/GridList.vue
index 73f9f85d46cb..a128c152289e 100644
--- a/client/src/components/Grid/GridList.vue
+++ b/client/src/components/Grid/GridList.vue
@@ -9,9 +9,9 @@ import { registry } from "./configs/registry";
 import { FieldKeyHandler, Operation, RowData } from "./configs/types";
 
 import GridOperations from "./GridElements/GridOperations.vue";
-import GridSharing from "./GridElements/GridSharing.vue";
 import GridText from "./GridElements/GridText.vue";
 import FilterMenu from "@/components/Common/FilterMenu.vue";
+import SharingIndicators from "@/components/Indices/SharingIndicators.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 import StatelessTags from "@/components/TagsMultiselect/StatelessTags.vue";
 //@ts-ignore
@@ -63,13 +63,13 @@ const searchTerm = ref("");
 const showAdvanced = ref(false);
 
 /**
- * Manually set filter value, used for tags
+ * Manually set filter value, used for tags and `SharingIndicators`
  */
-function applyFilter(filter: string, value: string, quoted = false) {
+function applyFilter(filter: string, value: string | boolean, quoted = false) {
     const setFilterValue = gridConfig.value?.filtering.setFilterValue;
     const quotedValue = quoted ? `'${value}'` : value;
     if (setFilterValue) {
-        filterText.value = setFilterValue(filterText.value, filter, quotedValue) || "";
+        filterText.value = setFilterValue(filterText.value, filter, quotedValue.toString()) || "";
     }
 }
 
@@ -219,11 +219,10 @@ watch(operationMessage, () => {
                         :operations="fieldEntry.operations"
                         @execute="onOperation($event, rowData)" />
                     <GridText v-else-if="fieldEntry.type == 'text'" :text="rowData[fieldEntry.key]" />
-                    <GridSharing
+                    <SharingIndicators
                         v-else-if="fieldEntry.type == 'sharing'"
-                        :published="rowData.sharing_status.published"
-                        :importable="rowData.sharing_status.importable"
-                        :users_shared_with_length="rowData.sharing_status.users_shared_with.length" />
+                        :object="rowData.sharing_status"
+                        @filter="(filter) => applyFilter(filter, true)" />
                     <UtcDate v-else-if="fieldEntry.type == 'date'" :date="rowData[fieldEntry.key]" mode="elapsed" />
                     <StatelessTags
                         v-else-if="fieldEntry.type == 'tags'"
diff --git a/client/src/components/Indices/SharingIndicators.vue b/client/src/components/Indices/SharingIndicators.vue
index b2f1cd3fdae2..26924bab3acb 100644
--- a/client/src/components/Indices/SharingIndicators.vue
+++ b/client/src/components/Indices/SharingIndicators.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { library } from "@fortawesome/fontawesome-svg-core";
-import { faGlobe, faLink, faShareAlt } from "@fortawesome/free-solid-svg-icons";
+import { faGlobe, faLink, faShareAlt, faUsers } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BButton, VBTooltip } from "bootstrap-vue";
 
-library.add(faGlobe, faShareAlt, faLink);
+library.add(faGlobe, faShareAlt, faLink, faUsers);
 
 interface SharingIndicatorsProps {
     object: Object;
@@ -44,5 +44,15 @@ const props = defineProps<SharingIndicatorsProps>();
             @click.prevent="$emit('filter', 'shared_with_me')">
             <FontAwesomeIcon icon="share-alt" />
         </BButton>
+        <!-- this can later be changed to an active button, currently, no such filter -->
+        <BButton
+            v-if="props.object.users_shared_with && props.object.users_shared_with.length"
+            v-b-tooltip.hover.noninteractive
+            size="sm"
+            variant="link"
+            disabled
+            :title="`Shared with ${props.object.users_shared_with.length} user(s)` | localize">
+            <FontAwesomeIcon icon="users" />
+        </BButton>
     </span>
 </template>