From b182f5b2d0e1468e864d77b368505e2d7f18ac6b Mon Sep 17 00:00:00 2001 From: Eduard Heimbuch Date: Wed, 8 Jul 2020 10:48:32 +0200 Subject: [PATCH] add key value entry inputfield component --- CHANGELOG.md | 3 +- scm-plugins/scm-git-plugin/package.json | 2 +- scm-plugins/scm-hg-plugin/package.json | 2 +- scm-plugins/scm-legacy-plugin/package.json | 2 +- scm-plugins/scm-svn-plugin/package.json | 2 +- scm-ui/ui-components/package.json | 2 +- .../src/__snapshots__/storyshots.test.ts.snap | 152 ++++++++++++++++++ .../AddKeyValueEntryToTableField.stories.tsx | 57 +++++++ .../forms/AddKeyValueEntryToTableField.tsx | 109 +++++++++++++ scm-ui/ui-components/src/forms/index.ts | 1 + scm-ui/ui-plugins/package.json | 4 +- scm-ui/ui-webapp/package.json | 4 +- 12 files changed, 330 insertions(+), 10 deletions(-) create mode 100644 scm-ui/ui-components/src/forms/AddKeyValueEntryToTableField.stories.tsx create mode 100644 scm-ui/ui-components/src/forms/AddKeyValueEntryToTableField.tsx diff --git a/CHANGELOG.md b/CHANGELOG.md index 2390615657..1772924d71 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,7 +6,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## Unreleased ### Added -- Add branch link provider to access branch links in plugins [#1243](https://github.com/scm-manager/scm-manager/pull/1243) +- Add branch link provider to access branch links in plugins ([#1243](https://github.com/scm-manager/scm-manager/pull/1243)) +- Add key value input field component ([#1246](https://github.com/scm-manager/scm-manager/pull/1246)) ### Fixed - Fixed file extension detection with new spotter version diff --git a/scm-plugins/scm-git-plugin/package.json b/scm-plugins/scm-git-plugin/package.json index 4d23aecb80..b99fda05b3 100644 --- a/scm-plugins/scm-git-plugin/package.json +++ b/scm-plugins/scm-git-plugin/package.json @@ -20,6 +20,6 @@ }, "prettier": "@scm-manager/prettier-config", "dependencies": { - "@scm-manager/ui-plugins": "^2.2.0" + "@scm-manager/ui-plugins": "^2.3.0-SNAPSHOT" } } diff --git a/scm-plugins/scm-hg-plugin/package.json b/scm-plugins/scm-hg-plugin/package.json index 106d355705..c543da952e 100644 --- a/scm-plugins/scm-hg-plugin/package.json +++ b/scm-plugins/scm-hg-plugin/package.json @@ -19,6 +19,6 @@ }, "prettier": "@scm-manager/prettier-config", "dependencies": { - "@scm-manager/ui-plugins": "^2.2.0" + "@scm-manager/ui-plugins": "^2.3.0-SNAPSHOT" } } diff --git a/scm-plugins/scm-legacy-plugin/package.json b/scm-plugins/scm-legacy-plugin/package.json index 7004de8008..21b10bc873 100644 --- a/scm-plugins/scm-legacy-plugin/package.json +++ b/scm-plugins/scm-legacy-plugin/package.json @@ -19,6 +19,6 @@ }, "prettier": "@scm-manager/prettier-config", "dependencies": { - "@scm-manager/ui-plugins": "^2.2.0" + "@scm-manager/ui-plugins": "^2.3.0-SNAPSHOT" } } diff --git a/scm-plugins/scm-svn-plugin/package.json b/scm-plugins/scm-svn-plugin/package.json index 0a5875588c..3b287ba4aa 100644 --- a/scm-plugins/scm-svn-plugin/package.json +++ b/scm-plugins/scm-svn-plugin/package.json @@ -19,6 +19,6 @@ }, "prettier": "@scm-manager/prettier-config", "dependencies": { - "@scm-manager/ui-plugins": "^2.2.0" + "@scm-manager/ui-plugins": "^2.3.0-SNAPSHOT" } } diff --git a/scm-ui/ui-components/package.json b/scm-ui/ui-components/package.json index ba0cd0833d..00c9133a3e 100644 --- a/scm-ui/ui-components/package.json +++ b/scm-ui/ui-components/package.json @@ -1,6 +1,6 @@ { "name": "@scm-manager/ui-components", - "version": "2.2.0", + "version": "2.3.0-SNAPSHOT", "description": "UI Components for SCM-Manager and its plugins", "main": "src/index.ts", "files": [ diff --git a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap index 1fe739ded1..295104f72f 100644 --- a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap +++ b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap @@ -38310,6 +38310,158 @@ exports[`Storyshots Diff SyntaxHighlighting 1`] = ` `; +exports[`Storyshots Forms|AddKeyValueEntryToTableField Default 1`] = ` +
+
+
+ +
+ +
+ +
+
+ +
+ +
+ +
+ +
+
+`; + +exports[`Storyshots Forms|AddKeyValueEntryToTableField Disabled 1`] = ` +
+
+
+ +
+ +
+ +
+
+ +
+ +
+ +
+ +
+
+`; + exports[`Storyshots Forms|Checkbox Default 1`] = `
{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",