Skip to content

Commit 9a1ab04

Browse files
pierre-bpierre-b
committed
disable buttons for permissions
1 parent 9b843d4 commit 9a1ab04

14 files changed

Lines changed: 650 additions & 194 deletions

‎TODO.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# TODO
22

3-
- permissions per feature: embed permissions in paseto token for future verification in middleware
3+
- permissions per feature in UI
44

55
## Content
66

‎console/src/components/contacts/ImportContactsButton.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ interface ImportContactsButtonProps {
1212
lists?: List[]
1313
workspaceId: string
1414
refreshOnClose?: boolean
15+
disabled?: boolean
1516
}
1617

1718
export function ImportContactsButton({
@@ -21,7 +22,8 @@ export function ImportContactsButton({
2122
size = 'middle',
2223
lists = [],
2324
workspaceId,
24-
refreshOnClose = true
25+
refreshOnClose = true,
26+
disabled = false
2527
}: ImportContactsButtonProps) {
2628
const { openDrawer } = useContactsCsvUpload()
2729

@@ -33,6 +35,7 @@ export function ImportContactsButton({
3335
className={className}
3436
style={style}
3537
size={size}
38+
disabled={disabled}
3639
>
3740
Import from CSV
3841
</Button>

‎console/src/components/file_manager/context.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { createContext, useContext, useState } from 'react'
1+
import React, { createContext, useContext, useState, useEffect } from 'react'
22
import { Modal, App, Button } from 'antd'
33
import { FileManager } from './fileManager'
44
import type { FileManagerSettings, StorageObject } from './interfaces'
@@ -25,6 +25,7 @@ interface FileManagerProviderProps {
2525
settings?: FileManagerSettings
2626
onUpdateSettings: (settings: FileManagerSettings) => Promise<void>
2727
settingsInfo?: React.ReactNode
28+
readOnly?: boolean
2829
}
2930

3031
const FileManagerContext = createContext<FileManagerContextValue | undefined>(undefined)
@@ -33,9 +34,11 @@ export const FileManagerProvider: React.FC<FileManagerProviderProps> = ({
3334
children,
3435
settings,
3536
onUpdateSettings,
36-
settingsInfo
37+
settingsInfo,
38+
readOnly = false
3739
}) => {
3840
const { message } = App.useApp()
41+
3942
const [isModalVisible, setIsModalVisible] = useState(false)
4043
const [currentOptions, setCurrentOptions] = useState<{
4144
onSelect: (url: string) => void
@@ -125,6 +128,7 @@ export const FileManagerProvider: React.FC<FileManagerProviderProps> = ({
125128
>
126129
{currentOptions && (
127130
<FileManager
131+
key={`filemanager-${readOnly}-${!!currentOptions}`}
128132
settings={settings}
129133
onUpdateSettings={onUpdateSettings}
130134
onSelect={handleFileSelect}
@@ -138,6 +142,7 @@ export const FileManagerProvider: React.FC<FileManagerProviderProps> = ({
138142
withSelection={true}
139143
multiple={false}
140144
settingsInfo={settingsInfo}
145+
readOnly={readOnly}
141146
/>
142147
)}
143148
</Modal>

‎console/src/components/file_manager/fileManager.tsx‎

Lines changed: 102 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,9 @@ export const FileManager = (props: FileManagerProps) => {
8282
const [isUploading, setIsUploading] = useState(false)
8383
const [form] = Form.useForm()
8484

85+
// Check if file manager is in read-only mode
86+
const isReadOnly = props.readOnly || false
87+
8588
const goToPath = (path: string) => {
8689
// reset selection on path change
8790
setSelectedRowKeys([])
@@ -414,7 +417,7 @@ export const FileManager = (props: FileManagerProps) => {
414417
<div style={{ ...styles.padding, borderBottom: '1px solid rgba(0,0,0,0.1)' }}>
415418
<div style={styles.pullRight}>
416419
<Space>
417-
{currentPath !== '' && (
420+
{currentPath !== '' && !isReadOnly && (
418421
<Tooltip title="Delete folder" placement="bottom">
419422
<Popconfirm
420423
placement="topRight"
@@ -440,6 +443,11 @@ export const FileManager = (props: FileManagerProps) => {
440443
</Popconfirm>
441444
</Tooltip>
442445
)}
446+
{currentPath !== '' && isReadOnly && (
447+
<Tooltip title="Delete folder (Read-only mode)" placement="bottom">
448+
<Button size="small" type="text" disabled icon={<Trash2 size={16} />} />
449+
</Tooltip>
450+
)}
443451
<Tooltip title="Refresh the list">
444452
<Button
445453
size="small"
@@ -449,36 +457,60 @@ export const FileManager = (props: FileManagerProps) => {
449457
/>
450458
</Tooltip>
451459

452-
<ButtonFilesSettings
453-
settings={props.settings}
454-
onUpdateSettings={props.onUpdateSettings}
455-
settingsInfo={props.settingsInfo}
456-
>
457-
<Tooltip title="Storage settings">
458-
<Button type="text" size="small">
460+
{!isReadOnly && (
461+
<ButtonFilesSettings
462+
settings={props.settings}
463+
onUpdateSettings={props.onUpdateSettings}
464+
settingsInfo={props.settingsInfo}
465+
>
466+
<Tooltip title="Storage settings">
467+
<Button type="text" size="small">
468+
<Settings size={16} />
469+
</Button>
470+
</Tooltip>
471+
</ButtonFilesSettings>
472+
)}
473+
{isReadOnly && (
474+
<Tooltip title="Storage settings (Read-only mode)">
475+
<Button type="text" size="small" disabled>
459476
<Settings size={16} />
460477
</Button>
461478
</Tooltip>
462-
</ButtonFilesSettings>
463-
<span role="button" onClick={onBrowseFiles}>
464-
<input
465-
type="file"
466-
ref={inputFileRef}
467-
onChange={onFileChange}
468-
hidden
469-
accept={props.acceptFileType}
470-
multiple={false}
471-
/>
472-
<Button
473-
type="primary"
474-
// size="small"
475-
style={styles.pullRight}
476-
loading={isUploading}
477-
>
478-
<Plus size={16} />
479-
Upload
480-
</Button>
481-
</span>
479+
)}
480+
{!isReadOnly && (
481+
<span role="button" onClick={onBrowseFiles}>
482+
<input
483+
type="file"
484+
ref={inputFileRef}
485+
onChange={onFileChange}
486+
hidden
487+
accept={props.acceptFileType}
488+
multiple={false}
489+
/>
490+
<Button
491+
type="primary"
492+
// size="small"
493+
style={styles.pullRight}
494+
loading={isUploading}
495+
>
496+
<Plus size={16} />
497+
Upload
498+
</Button>
499+
</span>
500+
)}
501+
{isReadOnly && (
502+
<Tooltip title="Upload file (Read-only mode)">
503+
<Button
504+
type="primary"
505+
// size="small"
506+
style={styles.pullRight}
507+
disabled
508+
>
509+
<Plus size={16} />
510+
Upload
511+
</Button>
512+
</Tooltip>
513+
)}
482514
</Space>
483515
</div>
484516

@@ -508,9 +540,11 @@ export const FileManager = (props: FileManagerProps) => {
508540
)
509541
})}
510542
</div>
511-
<Button type="primary" ghost onClick={toggleNewFolderModal}>
512-
New folder
513-
</Button>
543+
<Tooltip title={isReadOnly ? 'New folder (Read-only mode)' : 'Create new folder'}>
544+
<Button type="primary" ghost onClick={toggleNewFolderModal} disabled={isReadOnly}>
545+
New folder
546+
</Button>
547+
</Tooltip>
514548
</Space>
515549
</div>
516550
<Table
@@ -640,20 +674,29 @@ export const FileManager = (props: FileManagerProps) => {
640674
</Button>
641675
</a>
642676
</Tooltip>
643-
<Popconfirm
644-
title="Do you want to permanently delete this file from your storage?"
645-
onConfirm={() => deleteObject(item.key, false)}
646-
placement="topRight"
647-
okText="Delete"
648-
cancelText="Cancel"
649-
okButtonProps={{
650-
danger: true
651-
}}
652-
>
653-
<Button type="text" size="small">
654-
<Trash2 size={16} />
655-
</Button>
656-
</Popconfirm>
677+
{!isReadOnly && (
678+
<Popconfirm
679+
title="Do you want to permanently delete this file from your storage?"
680+
onConfirm={() => deleteObject(item.key, false)}
681+
placement="topRight"
682+
okText="Delete"
683+
cancelText="Cancel"
684+
okButtonProps={{
685+
danger: true
686+
}}
687+
>
688+
<Button type="text" size="small">
689+
<Trash2 size={16} />
690+
</Button>
691+
</Popconfirm>
692+
)}
693+
{isReadOnly && (
694+
<Tooltip title="Delete file (Read-only mode)">
695+
<Button type="text" size="small" disabled>
696+
<Trash2 size={16} />
697+
</Button>
698+
</Tooltip>
699+
)}
657700
</Space>
658701
)
659702
}
@@ -666,9 +709,21 @@ export const FileManager = (props: FileManagerProps) => {
666709
<Modal
667710
title="Create new folder"
668711
open={newFolderModalVisible}
669-
onOk={onSubmitNewFolder}
670712
onCancel={toggleNewFolderModal}
671-
confirmLoading={newFolderLoading}
713+
footer={[
714+
<Button key="cancel" onClick={toggleNewFolderModal}>
715+
Cancel
716+
</Button>,
717+
<Button
718+
key="create"
719+
type="primary"
720+
onClick={onSubmitNewFolder}
721+
loading={newFolderLoading}
722+
disabled={isReadOnly}
723+
>
724+
Create
725+
</Button>
726+
]}
672727
>
673728
<Form form={form}>
674729
<Form.Item

‎console/src/components/file_manager/interfaces.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ export interface FileManagerProps {
2727
settings?: FileManagerSettings
2828
onUpdateSettings: (settings: FileManagerSettings) => Promise<void>
2929
settingsInfo?: React.ReactNode
30+
readOnly?: boolean
3031
}
3132

3233
export interface ItemFilter {

‎console/src/components/lists/ImportContactsToListButton.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ interface ImportContactsToListButtonProps {
1313
type?: 'default' | 'primary' | 'dashed' | 'link' | 'text'
1414
className?: string
1515
style?: React.CSSProperties
16+
disabled?: boolean
1617
}
1718

1819
export function ImportContactsToListButton({
@@ -22,7 +23,8 @@ export function ImportContactsToListButton({
2223
size = 'small',
2324
type = 'text',
2425
className,
25-
style
26+
style,
27+
disabled = false
2628
}: ImportContactsToListButtonProps) {
2729
const { openDrawerWithSelectedList } = useContactsCsvUpload()
2830
const queryClient = useQueryClient()
@@ -33,7 +35,7 @@ export function ImportContactsToListButton({
3335
}
3436

3537
return (
36-
<Button type={type} size={size} onClick={handleClick} className={className} style={style}>
38+
<Button type={type} size={size} onClick={handleClick} className={className} style={style} disabled={disabled}>
3739
<Tooltip title="Import Contacts to List">
3840
<UploadOutlined />
3941
</Tooltip>

‎console/src/components/lists/ListDrawer.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ interface CreateListDrawerProps {
1818
type?: 'primary' | 'default' | 'link' | 'text'
1919
buttonContent?: React.ReactNode
2020
size?: 'large' | 'middle' | 'small'
21+
disabled?: boolean
2122
}
2223
}
2324

@@ -164,7 +165,12 @@ export function CreateListDrawer({
164165

165166
return (
166167
<>
167-
<Button type={buttonProps.type || 'primary'} onClick={showDrawer} size={buttonProps.size}>
168+
<Button
169+
type={buttonProps.type || 'primary'}
170+
onClick={showDrawer}
171+
size={buttonProps.size}
172+
disabled={buttonProps.disabled}
173+
>
168174
{buttonProps.buttonContent || (isEditMode ? 'Edit List' : 'Create List')}
169175
</Button>
170176
<Drawer

0 commit comments

Comments
 (0)