Issue #3301951 by Ryo Yamashita, yas: Add the function to import OpenStack key pair in the SPA (211c8c71) · Commits · project / cloud

modules/cloud_dashboard/cloud_dashboard/src/App.tsx

+4 −1

Changes for modules/cloud_dashboard/cloud_dashboard/src/App.tsx: 4 added lines, 1 removed line.
Original line number	Diff line number	Diff line
		@@ -64,7 +64,10 @@ const App = () => {
		<EntityXxudPage />
		</Route>
		<Route exact path="/:cloudServiceProvider/:cloudContext/:entityName/create">
		<EntityCreatePage />
		<EntityCreatePage action="create" />
		</Route>
		<Route exact path="/:cloudServiceProvider/:cloudContext/:entityName/import">
		<EntityCreatePage action="import" />
		</Route>
		<Route path="/:cloudServiceProvider/:cloudContext/:entityName/:entityId">
		<EntityDetailPage />

+15 −0

Changes for modules/cloud_dashboard/cloud_dashboard/src/constant/form_template/openstack/key_pair.ts: 15 added lines, 0 removed lines.
Original line number	Diff line number	Diff line
		@@ -43,7 +43,22 @@ const OPENSTACK_KEY_PAIR_TEMPLATE: EntityFormTemplate[] = [
		},
		],
		submitButtonLabel: 'Delete'
		},
		{
		cloudServiceProvider: 'openstack',
		entityName: 'key_pair',
		actionType: 'import',
		entityRecords: [
		{
		type: 'panel',
		panelName: 'Key pair',
		keyValueRecords: [
		{ type: 'file', labelName: 'Public Key', name: 'key_pair_public_key' },
		{ type: 'default', labelName: 'Key pair name', name: 'key_pair_name', defaultValue: '', required: true },
		]
		}
		]
		},
		]

		export default OPENSTACK_KEY_PAIR_TEMPLATE;

+4 −0

Changes for modules/cloud_dashboard/cloud_dashboard/src/model/EntityFormColumn.ts: 4 added lines, 0 removed lines.
Original line number	Diff line number	Diff line
		@@ -76,6 +76,10 @@ type EntityFormColumn = (EntityFormColumnBase & EntityFormColumnInfo) \| {
		labelName: string,
		name: string,
		defaultValue: SecurityGroupPermission[],
		} \| {
		type: 'file',
		labelName: string,
		name: string,
		};

		export default EntityFormColumn;

+7 −1

Changes for modules/cloud_dashboard/cloud_dashboard/src/molecules/EntityFormBlock.tsx: 7 added lines, 1 removed line.
Original line number	Diff line number	Diff line
		import EntityFormColumn from 'model/EntityFormColumn';
		import BooleanInputBlock from 'molecules/BooleanInputBlock';
		import DateTimeInputBlock from 'molecules/DateTimeInputBlock';
		import FileInputBlock from 'molecules/FileInputBlock';
		import JoinSelectBlock from 'molecules/JoinSelectBlock';
		import KeyValueTableBlock from 'molecules/KeyValueTableBlock';
		import LabelBlock from 'molecules/LabelBlock';
		@@ -50,7 +51,7 @@ const EntityFormBlock = ({ keyValueRecord, cloudContext, formData, setFormData }
		const value = formData[keyValueRecord.name];

		const setValue = <T,>(v: T) => {
		const newFormData = JSON.parse(JSON.stringify(formData));
		const newFormData = {...formData};
		newFormData[keyValueRecord.name] = v;
		setFormData(newFormData);
		}
		@@ -194,6 +195,11 @@ const EntityFormBlock = ({ keyValueRecord, cloudContext, formData, setFormData }
		label={keyValueRecord.labelName}
		value={value}
		setValue={setValue} />;
		case 'file':
		return <FileInputBlock
		label={keyValueRecord.labelName}
		value={value}
		setValue={setValue} />;
		default:
		return <></>;
		}

0 → 100644

+33 −0

Changes for modules/cloud_dashboard/cloud_dashboard/src/molecules/FileInputBlock.tsx: 33 added lines, 0 removed lines.
Original line number	Diff line number	Diff line
		import { Form } from 'react-bootstrap';

		/**
		* Block of key-value input view.
		*
		* @param
		*/
		const FileInputBlock = ({ label, value, setValue }: {
		label: string,
		value: File \| null,
		setValue: (s: File) => void,
		}) => {

		const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
		const fileList = e.target.files;
		if (fileList === null \|\| fileList.length === 0) {
		return;
		}
		const file = fileList.item(0);
		if (file === null) {
		return;
		}
		setValue(file);
		};

		return <Form.Group className="form-item js-form-item">
		<Form.Label className="control-label">{label}</Form.Label>
		<input type="file" className="js-form-file form-file" size={60} onChange={onChange} />
		</Form.Group>;

		}

		export default FileInputBlock;