{story()})
+ .add("Default", () => (
+
+ {console.log(key, value)}}
+ />
+
+ ))
+ .add("Disabled", () => (
+
+ {}}
+ disabled={true}
+ />
+
+ ));
diff --git a/scm-ui/ui-components/src/forms/AddKeyValueEntryToTableField.tsx b/scm-ui/ui-components/src/forms/AddKeyValueEntryToTableField.tsx
new file mode 100644
index 0000000000..febe6c02f5
--- /dev/null
+++ b/scm-ui/ui-components/src/forms/AddKeyValueEntryToTableField.tsx
@@ -0,0 +1,109 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React, { FC, useState } from "react";
+import styled from "styled-components";
+import InputField from "./InputField";
+import { AddButton } from "../buttons";
+
+type Props = {
+ addEntry: (key: string, value: string) => void;
+ disabled?: boolean;
+ buttonLabel: string;
+ keyFieldLabel: string;
+ valueFieldLabel: string;
+ errorMessage?: string;
+ keyHelpText?: string;
+ valueHelpText?: string;
+ validateEntry?: (p: string) => boolean;
+};
+
+const InputLevel = styled.div`
+ display: flex;
+ justify-content: space-between;
+`;
+
+const StyledInputField = styled(InputField)`
+ margin-right: 1.5rem;
+ width: 100%;
+`;
+
+const MarginTopButton = styled(AddButton)`
+ margin-top: 2rem;
+`;
+
+const AddKeyValueEntryToTableField: FC
= ({
+ keyFieldLabel,
+ valueFieldLabel,
+ disabled,
+ buttonLabel,
+ keyHelpText,
+ valueHelpText,
+ validateEntry,
+ errorMessage,
+ addEntry
+}) => {
+ const [key, setKey] = useState("");
+ const [value, setValue] = useState("");
+
+ const isValid = (input: string) => {
+ if (!input || !validateEntry) {
+ return true;
+ } else {
+ return validateEntry(input);
+ }
+ };
+
+ return (
+
+ addEntry(key, value)}
+ disabled={disabled}
+ helpText={keyHelpText}
+ />
+ addEntry(key, value)}
+ disabled={disabled}
+ helpText={valueHelpText}
+ />
+ addEntry(key, value)}
+ disabled={disabled || !key || !value || !isValid(key) || !isValid(value)}
+ />
+
+ );
+};
+
+export default AddKeyValueEntryToTableField;
diff --git a/scm-ui/ui-components/src/forms/index.ts b/scm-ui/ui-components/src/forms/index.ts
index c6bd7b9307..54a5d49b15 100644
--- a/scm-ui/ui-components/src/forms/index.ts
+++ b/scm-ui/ui-components/src/forms/index.ts
@@ -25,6 +25,7 @@
// @create-index
export { default as AddEntryToTableField } from "./AddEntryToTableField";
+export { default as AddKeyValueEntryToTableField } from "./AddKeyValueEntryToTableField";
export { default as AutocompleteAddEntryToTableField } from "./AutocompleteAddEntryToTableField";
export { default as TagGroup } from "./TagGroup";
export { default as MemberNameTagGroup } from "./MemberNameTagGroup";
diff --git a/scm-ui/ui-plugins/package.json b/scm-ui/ui-plugins/package.json
index 94500236e0..d95c16d511 100644
--- a/scm-ui/ui-plugins/package.json
+++ b/scm-ui/ui-plugins/package.json
@@ -1,12 +1,12 @@
{
"name": "@scm-manager/ui-plugins",
- "version": "2.2.0",
+ "version": "2.3.0-SNAPSHOT",
"license": "MIT",
"bin": {
"ui-plugins": "./bin/ui-plugins.js"
},
"dependencies": {
- "@scm-manager/ui-components": "^2.2.0",
+ "@scm-manager/ui-components": "^2.3.0-SNAPSHOT",
"@scm-manager/ui-extensions": "^2.1.0",
"classnames": "^2.2.6",
"query-string": "^5.0.1",
diff --git a/scm-ui/ui-webapp/package.json b/scm-ui/ui-webapp/package.json
index 299de2fb28..002f765ce8 100644
--- a/scm-ui/ui-webapp/package.json
+++ b/scm-ui/ui-webapp/package.json
@@ -1,9 +1,9 @@
{
"name": "@scm-manager/ui-webapp",
- "version": "2.2.0",
+ "version": "2.3.0-SNAPSHOT",
"private": true,
"dependencies": {
- "@scm-manager/ui-components": "^2.2.0",
+ "@scm-manager/ui-components": "^2.3.0-SNAPSHOT",
"@scm-manager/ui-extensions": "^2.1.0",
"classnames": "^2.2.5",
"history": "^4.10.1",