feat(webseal): allow yaml-style paste (#130)

* feat(webseal): allow yaml-style paste * chore: fix semantic-release version
SocialGouv · Mar 20, 2023 · 24e712d · 24e712d
1 parent ce1e75b
commit 24e712d
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 3 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -86,7 +86,7 @@ jobs:
         uses: cycjimmy/semantic-release-action@v2
         id: semantic
         with:
-         # semantic_version: 16
+          semantic_version: 19
           extra_plugins: |
             @semantic-release/exec
             @semantic-release/git

diff --git a/packages/webseal/src/App.js b/packages/webseal/src/App.js
@@ -80,7 +80,6 @@ const Editor = () => {
   const [encrypted, setEncrypted] = useState(null);
   const [yamlResult, setYamlResult] = useState(null);
   const onSubmit = async (data) => {
-    //console.log("onSubmit", data);
     setFormData(data);
     setYamlResult("");
     setEncrypted("");

diff --git a/packages/webseal/src/Form.js b/packages/webseal/src/Form.js
@@ -33,6 +33,38 @@ const removeInvalidKeys = (keyValidator) => (object) =>
 
 const keepValidQueryParamKeys = removeInvalidKeys(isValidQueryParamsKey);
 
+const YAML_LIKE_LINE_RE = /^([\w\d-_]+):\s(.*)$/m; // variable: some-value
+
+// naive yaml style variable listing
+const isYamlVariables = (string) => {
+  const yamlRows = string
+    .trim()
+    .split("\n")
+    .filter((row) => row.trim().length)
+    .map((row) => row.match(YAML_LIKE_LINE_RE))
+    .filter(Boolean);
+  if (
+    yamlRows.length ===
+    string
+      .trim()
+      .split("\n")
+      .filter((row) => row.trim().length).length
+  ) {
+    // only when all lines are detected
+    return true;
+  }
+  return false;
+};
+
+const yamlToEnv = (string) =>
+  string
+    .trim()
+    .split("\n")
+    .map((row) => row.match(YAML_LIKE_LINE_RE))
+    .filter(Boolean)
+    .map(([_, key, value]) => `${key}=${value}`)
+    .join("\n");
+
 export const Form = ({ onSubmit, initialFormData }) => {
   const [queryParamsData, setQueryParamsData] = useQueryParams();
 
@@ -53,7 +85,6 @@ export const Form = ({ onSubmit, initialFormData }) => {
   const _onSubmit = (data) => {
     setQueryParamsData(keepValidQueryParamKeys(data));
     onSubmit(data);
-    //console.log("submit", data);
   };
 
   const cluster = watch("cluster");
@@ -82,6 +113,14 @@ export const Form = ({ onSubmit, initialFormData }) => {
     return () => subscription.unsubscribe();
   }, [watch]);
 
+  const onValuePaste = (e) => {
+    const value = e.clipboardData.getData("Text");
+    if (isYamlVariables(value)) {
+      e.preventDefault();
+      setValue("value", yamlToEnv(value));
+    }
+  };
+
   return (
     <BsForm onSubmit={handleSubmit(_onSubmit)}>
       <Row>
@@ -191,10 +230,16 @@ export const Form = ({ onSubmit, initialFormData }) => {
         <BsForm.Control
           as="textarea"
           name="value"
+          value={value}
           id="value"
           style={{ marginTop: 10 }}
           rows={8}
           {...register("value", { required: true, value })}
+          onPaste={onValuePaste}
+          onChange={(e) => {
+            setValue("value", e.target.value);
+            trigger();
+          }}
           placeholder={`MY_TOKEN=SomeSuperSecretToken
 MY_PASSWORD=SomeSuperSecretPassword`}
         />