diff --git a/frontend/src/Components/Form/EnhancedSelectInput.css b/frontend/src/Components/Form/EnhancedSelectInput.css
index 3d2df1ad3..60cd28d69 100644
--- a/frontend/src/Components/Form/EnhancedSelectInput.css
+++ b/frontend/src/Components/Form/EnhancedSelectInput.css
@@ -5,6 +5,10 @@
align-items: center;
}
+.editableContainer {
+ width: 100%;
+}
+
.hasError {
composes: hasError from '~Components/Form/Input.css';
}
@@ -22,6 +26,16 @@
margin-left: 12px;
}
+.dropdownArrowContainerEditable {
+ position: absolute;
+ top: 0;
+ right: 0;
+ padding-right: 17px;
+ width: 30%;
+ height: 35px;
+ text-align: right;
+}
+
.dropdownArrowContainerDisabled {
composes: dropdownArrowContainer;
diff --git a/frontend/src/Components/Form/EnhancedSelectInput.js b/frontend/src/Components/Form/EnhancedSelectInput.js
index 8f89101f0..8705e7310 100644
--- a/frontend/src/Components/Form/EnhancedSelectInput.js
+++ b/frontend/src/Components/Form/EnhancedSelectInput.js
@@ -15,6 +15,7 @@ import Measure from 'Components/Measure';
import Modal from 'Components/Modal/Modal';
import ModalBody from 'Components/Modal/ModalBody';
import Scroller from 'Components/Scroller/Scroller';
+import TextInput from './TextInput';
import HintedSelectInputSelectedValue from './HintedSelectInputSelectedValue';
import HintedSelectInputOption from './HintedSelectInputOption';
import styles from './EnhancedSelectInput.css';
@@ -169,11 +170,21 @@ class EnhancedSelectInput extends Component {
}
}
+ onFocus = () => {
+ if (this.state.isOpen) {
+ this._removeListener();
+ this.setState({ isOpen: false });
+ }
+ }
+
onBlur = () => {
- // Calling setState without this check prevents the click event from being properly handled on Chrome (it is on firefox)
- const origIndex = getSelectedIndex(this.props);
- if (origIndex !== this.state.selectedIndex) {
- this.setState({ selectedIndex: origIndex });
+ if (!this.props.isEditable) {
+ // Calling setState without this check prevents the click event from being properly handled on Chrome (it is on firefox)
+ const origIndex = getSelectedIndex(this.props);
+
+ if (origIndex !== this.state.selectedIndex) {
+ this.setState({ selectedIndex: origIndex });
+ }
}
}
@@ -297,16 +308,19 @@ class EnhancedSelectInput extends Component {
const {
className,
disabledClassName,
+ name,
value,
values,
isDisabled,
+ isEditable,
isFetching,
hasError,
hasWarning,
valueOptions,
selectedValueOptions,
selectedValueComponent: SelectedValueComponent,
- optionComponent: OptionComponent
+ optionComponent: OptionComponent,
+ onChange
} = this.props;
const {
@@ -332,52 +346,94 @@ class EnhancedSelectInput extends Component {
whitelist={['width']}
onMeasure={this.onMeasure}
>
-
-
- {selectedOption ? selectedOption.value : null}
-
-
-
-
- {
- isFetching &&
-
- }
-
- {
- !isFetching &&
-
- }
-
-
+ {
+ isEditable ?
+
+
+
+ {
+ isFetching &&
+
+ }
+
+ {
+ !isFetching &&
+
+ }
+
+
:
+
+
+ {selectedOption ? selectedOption.value : null}
+
+
+
+
+ {
+ isFetching &&
+
+ }
+
+ {
+ !isFetching &&
+
+ }
+
+
+ }
)}
@@ -502,6 +558,7 @@ EnhancedSelectInput.propTypes = {
values: PropTypes.arrayOf(PropTypes.object).isRequired,
isDisabled: PropTypes.bool.isRequired,
isFetching: PropTypes.bool.isRequired,
+ isEditable: PropTypes.bool.isRequired,
hasError: PropTypes.bool,
hasWarning: PropTypes.bool,
valueOptions: PropTypes.object.isRequired,
@@ -517,6 +574,7 @@ EnhancedSelectInput.defaultProps = {
disabledClassName: styles.isDisabled,
isDisabled: false,
isFetching: false,
+ isEditable: false,
valueOptions: {},
selectedValueOptions: {},
selectedValueComponent: HintedSelectInputSelectedValue,
diff --git a/frontend/src/Components/Form/FormInputGroup.js b/frontend/src/Components/Form/FormInputGroup.js
index 7437447d1..89e1e81ea 100644
--- a/frontend/src/Components/Form/FormInputGroup.js
+++ b/frontend/src/Components/Form/FormInputGroup.js
@@ -23,6 +23,7 @@ import TagInputConnector from './TagInputConnector';
import TagSelectInputConnector from './TagSelectInputConnector';
import TextTagInputConnector from './TextTagInputConnector';
import TextInput from './TextInput';
+import UMaskInput from './UMaskInput';
import FormInputHelpText from './FormInputHelpText';
import styles from './FormInputGroup.css';
@@ -88,6 +89,9 @@ function getComponent(type) {
case inputTypes.TAG_SELECT:
return TagSelectInputConnector;
+ case inputTypes.UMASK:
+ return UMaskInput;
+
default:
return TextInput;
}
@@ -195,7 +199,7 @@ function FormInputGroup(props) {
}
{
- !checkInput && helpTextWarning &&
+ (!checkInput || helpText) && helpTextWarning &&
div {
+ display: flex;
+
+ label {
+ flex: 0 0 50px;
+ }
+
+ .value {
+ width: 50px;
+ text-align: right;
+ }
+
+ .unit {
+ width: 90px;
+ text-align: right;
+ }
+ }
+}
+
+.readOnly {
+ background-color: #eee;
+}
diff --git a/frontend/src/Components/Form/UMaskInput.js b/frontend/src/Components/Form/UMaskInput.js
new file mode 100644
index 000000000..d15d3befb
--- /dev/null
+++ b/frontend/src/Components/Form/UMaskInput.js
@@ -0,0 +1,133 @@
+/* eslint-disable no-bitwise */
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import styles from './UMaskInput.css';
+import EnhancedSelectInput from './EnhancedSelectInput';
+
+const umaskOptions = [
+ {
+ key: '755',
+ value: '755 - Owner write, Everyone else read',
+ hint: 'drwxr-xr-x'
+ },
+ {
+ key: '775',
+ value: '775 - Owner & Group write, Other read',
+ hint: 'drwxrwxr-x'
+ },
+ {
+ key: '770',
+ value: '770 - Owner & Group write',
+ hint: 'drwxrwx---'
+ },
+ {
+ key: '750',
+ value: '750 - Owner write, Group read',
+ hint: 'drwxr-x---'
+ },
+ {
+ key: '777',
+ value: '777 - Everyone write',
+ hint: 'drwxrwxrwx'
+ }
+];
+
+function formatPermissions(permissions) {
+
+ const hasSticky = permissions & 0o1000;
+ const hasSetGID = permissions & 0o2000;
+ const hasSetUID = permissions & 0o4000;
+
+ let result = '';
+
+ for (let i = 0; i < 9; i++) {
+ const bit = (permissions & (1 << i)) !== 0;
+ let digit = bit ? 'xwr'[i % 3] : '-';
+ if (i === 6 && hasSetUID) {
+ digit = bit ? 's' : 'S';
+ } else if (i === 3 && hasSetGID) {
+ digit = bit ? 's' : 'S';
+ } else if (i === 0 && hasSticky) {
+ digit = bit ? 't' : 'T';
+ }
+ result = digit + result;
+ }
+
+ return result;
+}
+
+class UMaskInput extends Component {
+
+ //
+ // Render
+
+ render() {
+ const {
+ name,
+ value,
+ onChange
+ } = this.props;
+
+ const valueNum = parseInt(value, 8);
+ const umaskNum = 0o777 & ~valueNum;
+ const umask = umaskNum.toString(8).padStart(4, '0');
+ const folderNum = 0o777 & ~umaskNum;
+ const folder = folderNum.toString(8).padStart(3, '0');
+ const fileNum = 0o666 & ~umaskNum;
+ const file = fileNum.toString(8).padStart(3, '0');
+
+ const unit = formatPermissions(folderNum);
+
+ const values = umaskOptions.map((v) => {
+ return { ...v, hint: {v.hint} };
+ });
+
+ return (
+
+
+
+
+
+
+
{folder}
+
d{formatPermissions(folderNum)}
+
+
+
+
{file}
+
{formatPermissions(fileNum)}
+
+
+