web: Improve access control section in creation container form

closes #146 - Add input caption for strict Basic ACL field - Move presets to eACL and update it Signed-off-by: Mikhail Petrov <[email protected]>
nspcc-dev · Jan 30, 2024 · 32441ec · 32441ec
1 parent 80d7f99
commit 32441ec
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 100 deletions.
diff --git a/src/App.css b/src/App.css
@@ -127,6 +127,15 @@ label.is-error {
     line-height: 1.3rem;
 }
 
+.input_caption {
+    font-size: .75rem;
+    font-weight: 400;
+    border-left: 2px solid #ffd781;
+    margin-top: 1em;
+    margin-bottom: 1rem;
+    padding-left: 5px;
+}
+
 ul {
     list-style: unset;
 }

diff --git a/src/App.js b/src/App.js
@@ -13,7 +13,6 @@ import {
 	Columns,
 	Form,
 	Tag,
-	Box,
 	Notification,
 } from 'react-bulma-components';
 import Home from './Home';
@@ -57,8 +56,9 @@ export const App = () => {
 		loading: false,
 	});
 	const [presets] = useState({
-		personal: {
-			basicAcl: 'eacl-public-read-write',
+		forbid: {
+			name: 'forbid everything',
+			preset: 'forbid',
 			eACLParams: [{
 				"operation": "GET",
 				"action": "DENY",
@@ -97,32 +97,27 @@ export const App = () => {
 			}],
 		},
 		shared: {
+			name: 'allow reads for others',
 			preset: 'shared',
-			basicAcl: 'eacl-public-read-write',
 			eACLParams: [{
-				"operation": "PUT",
-				"action": "DENY",
+				"operation": "GET",
+				"action": "ALLOW",
 				"filters": [],
 				"targets": [{ "keys": [], "role": "OTHERS" }],
 			}, {
-				"operation": "DELETE",
-				"action": "DENY",
+				"operation": "HEAD",
+				"action": "ALLOW",
 				"filters": [],
 				"targets": [{ "keys": [], "role": "OTHERS" }],
 			}],
-		},
-		custom: {
-			preset: 'custom',
-			basicAcl: '',
-			eACLParams: [],
 		}
 	});
 	const [containerForm, setContainerForm] = useState({
 		containerName: '',
 		placementPolicy: '',
-		basicAcl: presets.personal.basicAcl,
-		eACLParams: presets.personal.eACLParams,
-		preset: 'personal',
+		basicAcl: 'eacl-public-read-write',
+		eACLParams: presets.forbid.eACLParams,
+		preset: 'forbid',
 	});
 	const [walletData, setWalletData] = useState(null);
 
@@ -181,9 +176,9 @@ export const App = () => {
 		setContainerForm({
 			containerName: '',
 			placementPolicy: '',
-			basicAcl: presets.personal.basicAcl,
-			eACLParams: presets.personal.eACLParams,
-			preset: 'personal',
+			basicAcl: 'eacl-public-read-write',
+			eACLParams: presets.forbid.eACLParams,
+			preset: 'forbid',
 		});
 	}
 
@@ -875,6 +870,20 @@ export const App = () => {
 							</Form.Field>
 							<Form.Field>
 								<Form.Label>Access Control</Form.Label>
+							</Form.Field>
+							<Form.Field>
+								<Form.Label size="small">Basic ACL</Form.Label>
+								<Form.Control>
+									<Form.Input
+										type="text"
+										value={containerForm.basicAcl}
+										className={isError.active && isError.type.indexOf('basicAcl') !== -1 ? 'is-error' : ""}
+										onChange={(e) => setContainerForm({ ...containerForm , basicAcl: e.target.value })}
+										disabled={true}
+									/>
+									<Heading className="input_caption">For best NeoFS panel experience this Basic ACL is used, if you want to change it, you are welcome to use the <a href="https://github.com/nspcc-dev/neofs-node" target="_blank" rel="noopener noreferrer" alt="neofs-node">CLI</a>.</Heading>
+								</Form.Control>
+								<Form.Label size="small" style={{ marginTop: 10 }}>Extended ACL</Form.Label>
 								{Object.keys(presets).map((basicPresetExample) => (
 									<Tag
 										key={basicPresetExample}
@@ -883,7 +892,6 @@ export const App = () => {
 											if (containerForm.preset !== basicPresetExample) {
 												setContainerForm({
 													...containerForm,
-													basicAcl: presets[basicPresetExample].basicAcl,
 													eACLParams: presets[basicPresetExample].eACLParams,
 													preset: basicPresetExample,
 												})}
@@ -898,62 +906,15 @@ export const App = () => {
 											margin: '5px 5px 0 0',
 											cursor: 'pointer',
 										}}
-									>{basicPresetExample}</Tag>
+									>{presets[basicPresetExample].name}</Tag>
 								))}
-							</Form.Field>
-							<Form.Field>
-								<Form.Label size="small">Basic ACL</Form.Label>
-								<Form.Control>
-									<Form.Input
-										type="text"
-										value={containerForm.basicAcl}
-										className={isError.active && isError.type.indexOf('basicAcl') !== -1 ? 'is-error' : ""}
-										onChange={(e) => setContainerForm({ ...containerForm , basicAcl: e.target.value })}
-										disabled={containerForm.preset !== 'custom' || isLoadingForm}
-									/>
-									{containerForm.preset === 'custom' && ([
-										'private',
-										'eacl-private',
-										'public-read',
-										'eacl-public-read',
-										'public-read-write',
-										'eacl-public-read-write',
-										'public-append',
-										'eacl-public-append',
-										'0x1C8C8CCC',
-									].map((basicAclExample) => (
-										<Tag
-											key={basicAclExample}
-											className={isLoadingForm ? "tag_disabled" : ""}
-											onClick={() => setContainerForm({
-												...containerForm ,
-												basicAcl: basicAclExample,
-												eACLParams: [],
-											})}
-											style={{ margin: '5px 5px 0 0', cursor: 'pointer' }}
-										>{basicAclExample}</Tag>
-									)))}
-								</Form.Control>
-								<Form.Label size="small" style={{ marginTop: 10 }}>Extended ACL</Form.Label>
-								{((!/\d/.test(containerForm.basicAcl) && containerForm.basicAcl.substr(0, 4) !== 'eacl') || (/\d/.test(containerForm.basicAcl) && containerForm.basicAcl.replace('0x','').length === 8 && (containerForm.basicAcl.substr(0, 3) === '0x1' || containerForm.basicAcl.substr(0, 3) === '0x3' || containerForm.basicAcl.substr(0, 1) === '1' || containerForm.basicAcl.substr(0, 1) === '3'))) ? (
-									<Box
-										style={{
-											marginTop: 10,
-											border: '1px solid #dfe3e3',
-											boxShadow: 'unset',
-										}}
-									>
-										Current basic acl doesn't support eACL
-									</Box>
-								) : (
-									<EACLPanel
-										onAuth={onAuth}
-										isErrorParent={isError}
-										isEdit={!(containerForm.preset === 'personal' || containerForm.preset === 'shared' || isLoadingForm)}
-										eACLParams={containerForm.eACLParams}
-										setEACLParams={(e) => setContainerForm({ ...containerForm, eACLParams: e })}
-									/>
-								)}
+								<EACLPanel
+									onAuth={onAuth}
+									isErrorParent={isError}
+									isEdit={!(containerForm.preset === 'forbid' || containerForm.preset === 'shared' || isLoadingForm)}
+									eACLParams={containerForm.eACLParams}
+									setEACLParams={(e) => setContainerForm({ ...containerForm, eACLParams: e })}
+								/>
 							</Form.Field>
 							{isError.active && (
 								<Notification className="error_message" style={{ margin: '20px 0' }}>

diff --git a/src/Components/EACLPanel/EACLPanel.js b/src/Components/EACLPanel/EACLPanel.js
@@ -170,7 +170,9 @@ export default function EACLPanel({
 									</Form.Select>
 								</Form.Control>
 							</Form.Field>
-							<Heading align="center" weight="normal" size={6} style={{ marginBottom: 10 }}>Filters</Heading>
+							{isEdit && (
+								<Heading align="center" weight="normal" size={6} style={{ marginBottom: 10 }}>Filters</Heading>
+							)}
 							{eACLItem.filters.map((filterItem, filterIndex) => (
 								<Form.Field className="panel-block-content" kind="group" key={filterIndex}>
 									<Form.Control>
@@ -276,30 +278,32 @@ export default function EACLPanel({
 					)}
 				</Panel.Block>
 			))}
-			<Panel.Block>
-				<Button
-					fullwidth
-					color="primary"
-					size="small"
-					onClick={() => {
-						let aECLParamsTemp = [...eACLParams];
-						aECLParamsTemp.push({
-							operation: "",
-							action: "",
-							isOpen: true,
-							filters: [],
-							targets: [{
-								keys: [],
-								role: '',
-							}],
-						});
-						setEACLParams(aECLParamsTemp);
-					}}
-					disabled={!isEdit || isLoadingForm}
-				>
-					Add rule
-				</Button>
-			</Panel.Block>
+			{isEdit && (
+				<Panel.Block>
+					<Button
+						fullwidth
+						color="primary"
+						size="small"
+						onClick={() => {
+							let aECLParamsTemp = [...eACLParams];
+							aECLParamsTemp.push({
+								operation: "",
+								action: "",
+								isOpen: true,
+								filters: [],
+								targets: [{
+									keys: [],
+									role: '',
+								}],
+							});
+							setEACLParams(aECLParamsTemp);
+						}}
+						disabled={!isEdit || isLoadingForm}
+					>
+						Add rule
+					</Button>
+				</Panel.Block>
+			)}
 			{isError.active && !isErrorParent && (
 				<Notification className="error_message">
 					{isError.text}