Skip to content

Commit 18417b4

Browse files
TimCsakyTimCsaky
committed
Styling changes for IDP permission feature
1 parent 834692e commit 18417b4

7 files changed

Lines changed: 99 additions & 97 deletions

File tree

‎frontend/src/assets/main.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -254,6 +254,12 @@ div:focus-visible {
254254
font-size: .8rem;
255255
padding: 0.25rem 0.75rem;
256256
font-weight: 400;
257+
line-height: 1;
258+
259+
.p-tag-value {
260+
margin-top: -2px;
261+
}
262+
257263
}
258264

259265
.p-tag-danger {

‎frontend/src/components/bucket/BucketPermission.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,7 @@ onBeforeMount(async () => {
107107
<div class="flex flex-row pb-3">
108108
<div class="flex-grow-1">
109109
<h4 class="pb-1">Internl only</h4>
110-
<p>Allow all IDIR users to view this flder and its content</p>
110+
<p>Allow all IDIR users to view this folder and its content</p>
111111
</div>
112112
<BucketIdpToggle
113113
v-if="bucket && getUserId"

‎frontend/src/components/bucket/BucketTable.vue‎

Lines changed: 67 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -58,15 +58,6 @@ const getBucketPublicStatus = computed(() => {
5858
};
5959
});
6060
61-
const getInternalStatus = computed(() => {
62-
return (node: BucketTreeNode): boolean => {
63-
if (node.data.bucketId) {
64-
return permissionStore.getBucketInternal(node.data.bucketId);
65-
}
66-
return false;
67-
};
68-
});
69-
7061
const emit = defineEmits(['show-bucket-config', 'show-sidebar-info']);
7162
7263
// Actions
@@ -190,7 +181,11 @@ function createDummyNodes(neighbour: BucketTreeNode, node: BucketTreeNode) {
190181
return current;
191182
}
192183
193-
watch(getBuckets, () => {
184+
/**
185+
* watch for changes to bucket and IDP permissions in store
186+
*/
187+
// eslint-disable-next-line no-empty-pattern
188+
watch([getBuckets, permissionStore.getBucketIdpPermissions], ([]) => {
194189
// Make sure everything is clear for a rebuild...
195190
endpointMap.clear();
196191
bucketTreeNodeMap.clear();
@@ -328,11 +323,12 @@ watch(getBuckets, () => {
328323
</template>
329324
</Column>
330325
<Column
331-
header="Actions"
326+
field="publicSharing"
327+
header="Sharing"
332328
header-class="text-right"
333-
body-class="action-buttons"
334-
header-style="width: 320px"
329+
style="text-align: right; width: 300px"
335330
>
331+
>
336332
<template #body="{ node }">
337333
<span v-if="!node.data.dummy">
338334
<Tag
@@ -346,65 +342,73 @@ watch(getBuckets, () => {
346342
icon="pi pi-info-circle"
347343
class="public-folder"
348344
/>
349-
350345
<Tag
351-
v-if="!getBucketPublicStatus(node) && getInternalStatus(node)"
346+
v-if="!getBucketPublicStatus(node) && permissionStore.getBucketInternal(node.data.bucketId)"
352347
v-tooltip="'Contents of this Folder can be read by anyone internal to government.'"
353-
value="Internal"
348+
value="Internal (IDIR)"
354349
severity="info"
355350
rounded
356351
icon="pi pi-info-circle"
357-
class="ml-2 mb-1 min-w-100"
352+
class="mb-1 min-w-100"
358353
/>
359-
360-
<BucketChildConfig
361-
v-if="permissionStore.isBucketActionAllowed(node.data.bucketId, getUserId, Permissions.CREATE)"
362-
:parent-bucket="node.data"
363-
/>
364-
<Button
365-
v-if="permissionStore.isBucketActionAllowed(node.data.bucketId, getUserId, Permissions.MANAGE)"
366-
id="folder_permissions"
367-
v-tooltip.bottom="'Folder permissions'"
368-
class="p-button-lg p-button-text"
369-
aria-label="Folder permissions"
370-
@click="showPermissions(node.data.bucketId, node.data.bucketName)"
371-
>
372-
<span class="material-icons-outlined">supervisor_account</span>
373-
</Button>
374-
<ShareButton
375-
:bucket-id="node.data.bucketId"
376-
label-text="Folder"
377-
/>
378-
<Button
379-
v-if="permissionStore.isBucketActionAllowed(node.data.bucketId, getUserId, Permissions.MANAGE)"
380-
v-tooltip.bottom="'Configure folder'"
381-
class="p-button-lg p-button-text"
382-
aria-label="Configure folder"
383-
@click="showBucketConfig({ ...node.data, isRoot: node.isRoot })"
384-
>
385-
<span class="material-icons-outlined">settings</span>
386-
</Button>
387-
<Button
388-
v-if="permissionStore.isBucketActionAllowed(node.data.bucketId, getUserId, Permissions.READ)"
389-
v-tooltip.bottom="'Folder details'"
390-
class="p-button-lg p-button-rounded p-button-text"
391-
aria-label="Folder details"
392-
@click="showSidebarInfo(node.data.bucketId)"
393-
>
394-
<span class="material-icons-outlined">info</span>
395-
</Button>
396-
<Button
397-
v-if="permissionStore.isBucketActionAllowed(node.data.bucketId, getUserId, Permissions.DELETE)"
398-
v-tooltip.bottom="'Delete folder'"
399-
class="p-button-lg p-button-text p-button-danger"
400-
aria-label="Delete folder"
401-
@click="confirmDeleteBucket(node.data.bucketId)"
402-
>
403-
<span class="material-icons-outlined">delete</span>
404-
</Button>
405354
</span>
406355
</template>
407356
</Column>
357+
358+
<Column
359+
header="Actions"
360+
header-class="text-right"
361+
body-class="action-buttons"
362+
header-style="width: 20px"
363+
>
364+
<template #body="{ node }">
365+
<BucketChildConfig
366+
v-if="permissionStore.isBucketActionAllowed(node.data.bucketId, getUserId, Permissions.CREATE)"
367+
:parent-bucket="node.data"
368+
/>
369+
<Button
370+
v-if="permissionStore.isBucketActionAllowed(node.data.bucketId, getUserId, Permissions.MANAGE)"
371+
id="folder_permissions"
372+
v-tooltip.bottom="'Folder permissions'"
373+
class="p-button-lg p-button-text"
374+
aria-label="Folder permissions"
375+
@click="showPermissions(node.data.bucketId, node.data.bucketName)"
376+
>
377+
<span class="material-icons-outlined">supervisor_account</span>
378+
</Button>
379+
<ShareButton
380+
:bucket-id="node.data.bucketId"
381+
label-text="Folder"
382+
/>
383+
<Button
384+
v-if="permissionStore.isBucketActionAllowed(node.data.bucketId, getUserId, Permissions.MANAGE)"
385+
v-tooltip.bottom="'Configure folder'"
386+
class="p-button-lg p-button-text"
387+
aria-label="Configure folder"
388+
@click="showBucketConfig({ ...node.data, isRoot: node.isRoot })"
389+
>
390+
<span class="material-icons-outlined">settings</span>
391+
</Button>
392+
<Button
393+
v-if="permissionStore.isBucketActionAllowed(node.data.bucketId, getUserId, Permissions.READ)"
394+
v-tooltip.bottom="'Folder details'"
395+
class="p-button-lg p-button-rounded p-button-text"
396+
aria-label="Folder details"
397+
@click="showSidebarInfo(node.data.bucketId)"
398+
>
399+
<span class="material-icons-outlined">info</span>
400+
</Button>
401+
<Button
402+
v-if="permissionStore.isBucketActionAllowed(node.data.bucketId, getUserId, Permissions.DELETE)"
403+
v-tooltip.bottom="'Delete folder'"
404+
class="p-button-lg p-button-text p-button-danger"
405+
aria-label="Delete folder"
406+
@click="confirmDeleteBucket(node.data.bucketId)"
407+
>
408+
<span class="material-icons-outlined">delete</span>
409+
</Button>
410+
</template>
411+
</Column>
408412
</TreeTable>
409413

410414
<!-- eslint-disable vue/no-v-model-argument -->

‎frontend/src/components/object/ObjectFileDetails.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -178,7 +178,7 @@ onMounted(async () => {
178178
'This folder and its contents can be read by anyone internal to government. ' +
179179
'Change the settings in &quot;Folder permissions.&quot;'
180180
"
181-
value="Internal"
181+
value="Internal (IDIR)"
182182
severity="info"
183183
rounded
184184
icon="pi pi-info-circle"

‎frontend/src/components/object/ObjectTable.vue‎

Lines changed: 19 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,10 @@ import { storeToRefs } from 'pinia';
33
import { computed, onUnmounted, onMounted, ref } from 'vue';
44
55
import { Spinner } from '@/components/layout';
6-
import {
7-
DeleteObjectButton,
8-
DownloadObjectButton,
9-
ObjectFilters,
10-
ObjectPermission,
11-
ObjectPublicToggle
12-
} from '@/components/object';
6+
import { DeleteObjectButton, DownloadObjectButton, ObjectFilters, ObjectPermission } from '@/components/object';
137
import { ShareButton } from '@/components/common';
148
import { Button, Column, DataTable, Dialog, InputText, Tag } from '@/lib/primevue';
15-
import { useAuthStore, useObjectStore, useNavStore, usePermissionStore } from '@/store';
9+
import { useAuthStore, useBucketStore, useObjectStore, useNavStore, usePermissionStore } from '@/store';
1610
import { Permissions, RouteNames } from '@/utils/constants';
1711
import { onDialogHide } from '@/utils/utils';
1812
import { ButtonMode } from '@/utils/enums';
@@ -35,23 +29,21 @@ type DataTableFilter = {
3529
};
3630
// Props
3731
type Props = {
38-
bucketId?: string;
32+
bucketId: string;
3933
isBucketPublic?: boolean;
40-
isBucketInternal?: boolean;
4134
objectInfoId?: string;
4235
};
4336
4437
const props = withDefaults(defineProps<Props>(), {
45-
bucketId: undefined,
4638
isBucketPublic: undefined,
47-
isBucketInternal: undefined,
4839
objectInfoId: undefined
4940
});
5041
5142
// Emits
5243
const emit = defineEmits(['show-object-info']);
5344
5445
// Store
46+
const bucketStore = useBucketStore();
5547
const objectStore = useObjectStore();
5648
const permissionStore = usePermissionStore();
5749
const { getUserId, getIsAuthenticated } = storeToRefs(useAuthStore());
@@ -79,6 +71,8 @@ const isObjectInternal = computed(() => {
7971
return permissionStore.getObjectInternal(objId);
8072
};
8173
});
74+
const bucket = bucketStore.getBucket(props.bucketId);
75+
const isBucketInternal = permissionStore.getBucketInternal(props.bucketId);
8276
8377
// Actions
8478
const formatShortUuid = (uuid: string) => uuid?.slice(0, 8) ?? uuid;
@@ -347,30 +341,28 @@ async function downloadPublicObject(objectId: string) {
347341
<Column
348342
v-if="getIsAuthenticated"
349343
field="publicSharing"
350-
header="Public"
351-
class=""
352-
style="width: 300px"
344+
header="Sharing"
353345
>
354346
<template #body="{ data }">
355-
<div class="flex align-items-center">
356-
<ObjectPublicToggle
357-
v-if="props.bucketId && getUserId"
358-
:bucket-id="props.bucketId"
359-
:bucket-public="props.isBucketPublic"
360-
:object-id="data.id"
361-
:object-name="data.name"
362-
:object-public="data.public"
363-
:user-id="getUserId"
347+
<div class="">
348+
<Tag
349+
v-if="data.public && !bucket?.public"
350+
v-tooltip="'This file can be read by anyone without signing in.'"
351+
value="Public"
352+
severity="danger"
353+
rounded
354+
icon="pi pi-info-circle"
355+
class="mb-1 min-w-100"
364356
/>
365357

366358
<Tag
367-
v-if="!props.isBucketPublic && !data.public && !props.isBucketInternal && isObjectInternal(data.id)"
359+
v-if="!props.isBucketPublic && !data.public && !isBucketInternal && isObjectInternal(data.id)"
368360
v-tooltip="'This file can be read by anyone internal to government.'"
369-
value="Internal"
361+
value="Internal (IDIR)"
370362
severity="info"
371363
rounded
372364
icon="pi pi-info-circle"
373-
class="ml-2 mb-1 min-w-100"
365+
class="mb-1 min-w-100"
374366
/>
375367
</div>
376368
</template>

‎frontend/src/store/permissionStore.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,7 @@ export const usePermissionStore = defineStore('permission', () => {
114114
} catch (error: any) {
115115
toast.error('Adding bucket permission', error.response?.data.detail ?? error, { life: 0 });
116116
} finally {
117-
await fetchBucketPermissions({ bucketId: bucketId });
117+
await fetchBucketPermissions();
118118
await mapBucketToUserPermissions(bucketId);
119119
appStore.endIndeterminateLoading();
120120
}
@@ -149,7 +149,7 @@ export const usePermissionStore = defineStore('permission', () => {
149149
} catch (error: any) {
150150
toast.error('Adding bucket IDP permission', error.response?.data.detail ?? error, { life: 0 });
151151
} finally {
152-
await fetchBucketIdpPermissions({ bucketId: bucketId });
152+
await fetchBucketIdpPermissions();
153153
// await mapBucketToIdpPermissions(bucketId);
154154
appStore.endIndeterminateLoading();
155155
}
@@ -184,7 +184,7 @@ export const usePermissionStore = defineStore('permission', () => {
184184
} catch (error: any) {
185185
toast.error('Deleting bucket permission', error.response?.data.detail ?? error, { life: 0 });
186186
} finally {
187-
await fetchBucketPermissions({ bucketId: bucketId });
187+
await fetchBucketPermissions();
188188
await mapBucketToUserPermissions(bucketId);
189189
appStore.endIndeterminateLoading();
190190
}
@@ -211,7 +211,7 @@ export const usePermissionStore = defineStore('permission', () => {
211211
} catch (error: any) {
212212
toast.error('Deleting bucket IDP permission', error.response?.data.detail ?? error, { life: 0 });
213213
} finally {
214-
await fetchBucketIdpPermissions({ bucketId: bucketId });
214+
await fetchBucketIdpPermissions();
215215
// await mapBucketToIdpPermissions(bucketId);
216216
appStore.endIndeterminateLoading();
217217
}

‎frontend/src/views/list/ListObjectsView.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -160,7 +160,7 @@ onBeforeMount(async () => {
160160
'This folder and its contents can be read by anyone internal to government. ' +
161161
'Change the settings in &quot;Folder permissions.&quot;'
162162
"
163-
value="Internal"
163+
value="Internal (IDIR)"
164164
severity="info"
165165
rounded
166166
icon="pi pi-info-circle"

0 commit comments

Comments
 (0)