Fixes #448

OpenConext · Nov 15, 2024 · 039c676 · 039c676
1 parent bd7889d
commit 039c676
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 15 deletions.
diff --git a/manage-gui/src/locale/en.js b/manage-gui/src/locale/en.js
@@ -455,7 +455,9 @@ I18n.translations.en = {
     },
     clipboard: {
         copied: "Copied!",
-        copy: "Copy to clipboard"
+        copy: "Copy to clipboard",
+        copyAsCSV: "Copy as CSV",
+        copyAsJSON: "Copy as JSON"
     },
     error_dialog: {
         title: "Unexpected error",

diff --git a/manage-gui/src/pages/API.jsx b/manage-gui/src/pages/API.jsx
@@ -26,7 +26,8 @@ export default class API extends React.PureComponent {
             newMetaDataFieldKey: null,
             newGlobalAttributeKey: null,
             status: "all",
-            copiedToClipboardClassName: ""
+            copiedToClipboardClassName: "",
+            copiedToClipboardJSONClassName: ""
         };
     }
 
@@ -188,6 +189,15 @@ export default class API extends React.PureComponent {
         }
     };
 
+    copyToClipboardJSON = e => {
+        stop(e);
+        if (!isEmpty(this.state.searchResults)) {
+            copyToClip("search-results-printable-json");
+            this.setState({copiedToClipboardJSONClassName: "copied"});
+            setTimeout(() => this.setState({copiedToClipboardJSONClassName: ""}), 5000);
+        }
+    };
+
     newMetaDataFieldRendered = (ref, autoFocus) => {
         if (autoFocus) {
             this.newMetaDataField = ref;
@@ -321,17 +331,30 @@ export default class API extends React.PureComponent {
     };
 
 
-    renderSearchResultsTablePrintable = (searchResults) =>
-        <section id={"search-results-printable"}>
-            {searchResults
-                .map(entity => `${entity.data.state},${getNameForLanguage(entity.data.metaDataFields)},${entity.data.entityid}`)
-                .join("\n")}</section>;
+    renderSearchResultsTablePrintable = (searchResults) => {
+        return (
+            <section id={"search-results-printable"}>
+                {`${["state", "name", "entity_id"].join(",")}\n`}
+                {searchResults
+                    .map(entity => `${entity.data.state},${getNameForLanguage(entity.data.metaDataFields)},${entity.data.entityid}`)
+                    .join("\n")}</section>
+        );
+    }
+
+    renderSearchResultsJSONPrintable = (searchResults) => {
+        return (
+            <section id={"search-results-printable-json"}>
+                {JSON.stringify(searchResults, null, 4)}
+            </section>
+        );
+    }
 
     renderSearch = () => {
         const {configuration} = this.props;
         const {
             selectedType, searchAttributes, errorAttributes, searchResults, status, copiedToClipboardClassName,
-            globalSearchAttributes, globalErrorAttributes, logicalOperatorIsAnd, fullTextSearch
+            copiedToClipboardJSONClassName, globalSearchAttributes, globalErrorAttributes, logicalOperatorIsAnd,
+            fullTextSearch
         } = this.state;
         const conf = configuration.find(conf => conf.title === selectedType);
         const hasSearchAttributes = Object.keys(searchAttributes).length > 0;
@@ -371,13 +394,19 @@ export default class API extends React.PureComponent {
                           info="Use the logical operater AND (instead of OR) for the different search criteria"
                           onChange={() => this.setState({logicalOperatorIsAnd: !this.state.logicalOperatorIsAnd})}/>
                 <section className="options">
-                    <a className="reset button" onClick={this.reset}>Reset<i className="fa fa-times"></i></a>
-                    <a className={`button ${valid ? "green" : "disabled grey"}`} onClick={this.doSearch}>Search<i
-                        className="fa fa-search-plus"></i></a>
-                    <a
-                        className={`clipboard-copy button ${showResults ? "green" : "disabled grey"} ${copiedToClipboardClassName}`}
-                        onClick={this.copyToClipboard}>
-                        {I18n.t("clipboard.copy")}<i className="fa fa-clone"></i>
+                    <a className="reset button"
+                       onClick={this.reset}>Reset<i className="fa fa-times"></i>
+                    </a>
+                    <a className={`button ${valid ? "green" : "disabled grey"}`}
+                       onClick={this.doSearch}>Search<i className="fa fa-search-plus"></i>
+                    </a>
+                    <a className={`clipboard-copy button ${showResults ? "green" : "disabled grey"} ${copiedToClipboardJSONClassName}`}
+                       onClick={this.copyToClipboardJSON}>
+                        {I18n.t("clipboard.copyAsJSON")}<i className="fa fa-clone"></i>
+                    </a>
+                    <a className={`clipboard-copy button ${showResults ? "green" : "disabled grey"} ${copiedToClipboardClassName}`}
+                       onClick={this.copyToClipboard}>
+                        {I18n.t("clipboard.copyAsCSV")}<i className="fa fa-clone"></i>
                     </a>
                 </section>
                 {hasNoResults && <h2>{I18n.t("playground.no_results")}</h2>}
@@ -389,6 +418,8 @@ export default class API extends React.PureComponent {
                                         className="status-select"/>}
                 {showResults && this.renderSearchResultsTable(searchResults, selectedType, searchAttributes, globalSearchAttributes, status, fullTextSearch)}
                 {showResults && this.renderSearchResultsTablePrintable(searchResults)}
+                {showResults && this.renderSearchResultsJSONPrintable(searchResults)}
+
             </section>
         );
     };

diff --git a/manage-gui/src/pages/API.scss b/manage-gui/src/pages/API.scss
@@ -21,6 +21,10 @@
             &.clipboard-copy {
                 margin-left: auto;
 
+                &:last-child {
+                    margin-left: 15px;
+                }
+
                 i.fa-clone {
                     margin-left: 25px;
                 }