From 8f46463f779e8cb3e8d5f9e296f7b6eb6ff6971d Mon Sep 17 00:00:00 2001
From: Abd al Rahman Gad <89566409+AbdAlRahmanGad@users.noreply.github.com>
Date: Mon, 4 Mar 2024 21:45:23 +0200
Subject: [PATCH] Convert the "Custom API key" list to a table [#10926]
 (#10936)

* Convert "Custom API keys" list to a table.

* Handle if user clicked "check connection" without selecting a key.

* update CHANGELOG.md

* Handle if user clicked "check connection" without selecting a key in a better way.

* Disable editing the "customApiKey" if "useCustomApiKey" is no cheked

* Disable "Check Connection" button if no API key is selected.

* add a new line to match to coding style

* Bind the 'useCustomApiKey' checkbox with the emptiness of the 'customApiKey' field.

* Update logic for "Custom API key" table to align with previous implementation

* Add a note to guide users on how to commit changes
---
 CHANGELOG.md                                  |  1 +
 .../preferences/websearch/WebSearchTab.fxml   | 30 ++++++++---
 .../preferences/websearch/WebSearchTab.java   | 50 ++++++++++++-------
 .../logic/preferences/FetcherApiKey.java      |  4 ++
 4 files changed, 59 insertions(+), 26 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 38461b0d26b..8ec35123236 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,7 @@ Note that this project **does not** adhere to [Semantic Versioning](https://semv
 
 ### Added
 
+- We converted the "Custom API key" list to a table to be more accessible. [#10926](https://github.com/JabRef/jabref/issues/10926)
 - We added a "refresh" button for the LaTeX citations tab in the entry editor. [#10584](https://github.com/JabRef/jabref/issues/10584)
 - We added the possibility to show the BibTeX source in the [web search](https://docs.jabref.org/collect/import-using-online-bibliographic-database) import screen. [#560](https://github.com/koppor/jabref/issues/560)
 - We added a fetcher for [ISIDORE](https://isidore.science/), simply paste in the link into the text field or the last 6 digits in the link that identify that paper. [#10423](https://github.com/JabRef/jabref/issues/10423)
diff --git a/src/main/java/org/jabref/gui/preferences/websearch/WebSearchTab.fxml b/src/main/java/org/jabref/gui/preferences/websearch/WebSearchTab.fxml
index 06ee5a0e0dd..57cd5a4a449 100644
--- a/src/main/java/org/jabref/gui/preferences/websearch/WebSearchTab.fxml
+++ b/src/main/java/org/jabref/gui/preferences/websearch/WebSearchTab.fxml
@@ -2,7 +2,6 @@
 
 <?import javafx.scene.control.Button?>
 <?import javafx.scene.control.CheckBox?>
-<?import javafx.scene.control.ComboBox?>
 <?import javafx.scene.control.Label?>
 <?import javafx.scene.control.SplitPane?>
 <?import javafx.scene.control.TableColumn?>
@@ -55,12 +54,29 @@
     </HBox>
 
     <Label styleClass="sectionHeader" text="%Custom API key"/>
-    <HBox alignment="CENTER_LEFT" spacing="10.0">
-        <ComboBox fx:id="apiKeySelector" prefWidth="200.0" GridPane.columnIndex="1"/>
-        <TextField fx:id="customApiKey" HBox.hgrow="ALWAYS"/>
-        <CheckBox fx:id="useCustomApiKey" text="%Custom">
-        </CheckBox>
-    </HBox>
+    <Label text="%( Note: Press return to commit changes in the table! )"/>
+    <TableView
+            fx:id="apiKeySelectorTable"
+            VBox.vgrow="ALWAYS"
+            editable="true">
+        <columns>
+            <TableColumn minWidth="120"
+                         fx:id="apiKeyName"
+                         text="%Catalog"
+            />
+            <TableColumn minWidth="120"
+                    fx:id="customApiKey"
+                    text="Key"/>
+
+            <TableColumn minWidth="120" prefWidth="120"
+                    fx:id="useCustomApiKey"
+                    text="Use Custom Key"/>
+        </columns>
+        <columnResizePolicy>
+            <TableView
+                    fx:constant="CONSTRAINED_RESIZE_POLICY"/>
+        </columnResizePolicy>
+    </TableView>
 
     <HBox alignment="CENTER_LEFT" spacing="10.0">
         <Button fx:id="testCustomApiKey" text="%Check connection" onAction="#checkCustomApiKey"
diff --git a/src/main/java/org/jabref/gui/preferences/websearch/WebSearchTab.java b/src/main/java/org/jabref/gui/preferences/websearch/WebSearchTab.java
index 20f28898f75..b7df008a600 100644
--- a/src/main/java/org/jabref/gui/preferences/websearch/WebSearchTab.java
+++ b/src/main/java/org/jabref/gui/preferences/websearch/WebSearchTab.java
@@ -4,7 +4,6 @@
 import javafx.fxml.FXML;
 import javafx.scene.control.Button;
 import javafx.scene.control.CheckBox;
-import javafx.scene.control.ComboBox;
 import javafx.scene.control.SplitPane;
 import javafx.scene.control.TableColumn;
 import javafx.scene.control.TableView;
@@ -17,7 +16,6 @@
 import org.jabref.gui.preferences.AbstractPreferenceTabView;
 import org.jabref.gui.preferences.PreferencesTab;
 import org.jabref.gui.slr.StudyCatalogItem;
-import org.jabref.gui.util.ViewModelListCellFactory;
 import org.jabref.gui.util.ViewModelTableRowFactory;
 import org.jabref.logic.l10n.Localization;
 import org.jabref.logic.preferences.FetcherApiKey;
@@ -38,9 +36,10 @@ public class WebSearchTab extends AbstractPreferenceTabView<WebSearchTabViewMode
     @FXML private CheckBox grobidEnabled;
     @FXML private TextField grobidURL;
 
-    @FXML private ComboBox<FetcherApiKey> apiKeySelector;
-    @FXML private TextField customApiKey;
-    @FXML private CheckBox useCustomApiKey;
+    @FXML private TableView<FetcherApiKey> apiKeySelectorTable;
+    @FXML private TableColumn<FetcherApiKey, String> apiKeyName;
+    @FXML private TableColumn<FetcherApiKey, String> customApiKey;
+    @FXML private TableColumn<FetcherApiKey, Boolean> useCustomApiKey;
     @FXML private Button testCustomApiKey;
 
     @FXML private CheckBox persistApiKeys;
@@ -96,22 +95,37 @@ public void initialize() {
         catalogColumn.setCellValueFactory(param -> param.getValue().nameProperty());
         catalogTable.setItems(viewModel.getCatalogs());
 
-        new ViewModelListCellFactory<FetcherApiKey>()
-                .withText(FetcherApiKey::getName)
-                .install(apiKeySelector);
-        apiKeySelector.getSelectionModel().selectedItemProperty().addListener((observable, oldValue, newValue) -> {
+        testCustomApiKey.setDisable(true);
+
+        new ViewModelTableRowFactory<FetcherApiKey>()
+                .install(apiKeySelectorTable);
+
+        apiKeySelectorTable.getSelectionModel().selectedItemProperty().addListener((observable, oldValue, newValue) -> {
             if (oldValue != null) {
                 updateFetcherApiKey(oldValue);
             }
             if (newValue != null) {
-                useCustomApiKey.setSelected(newValue.shouldUse());
-                customApiKey.setText(newValue.getKey());
+                viewModel.selectedApiKeyProperty().setValue(newValue);
+                testCustomApiKey.disableProperty().bind(newValue.useProperty().not());
             }
         });
-        customApiKey.textProperty().addListener(listener -> updateFetcherApiKey(apiKeySelector.valueProperty().get()));
 
-        customApiKey.disableProperty().bind(useCustomApiKey.selectedProperty().not());
-        testCustomApiKey.disableProperty().bind(useCustomApiKey.selectedProperty().not());
+        apiKeyName.setCellValueFactory(param -> param.getValue().nameProperty());
+        apiKeyName.setCellFactory(TextFieldTableCell.forTableColumn());
+        apiKeyName.setReorderable(false);
+        apiKeyName.setEditable(false);
+
+        customApiKey.setCellValueFactory(param -> param.getValue().keyProperty());
+        customApiKey.setCellFactory(TextFieldTableCell.forTableColumn());
+        customApiKey.setReorderable(false);
+        customApiKey.setResizable(true);
+        customApiKey.setEditable(true);
+
+        useCustomApiKey.setCellValueFactory(param -> param.getValue().useProperty());
+        useCustomApiKey.setCellFactory(CheckBoxTableCell.forTableColumn(useCustomApiKey));
+        useCustomApiKey.setEditable(true);
+        useCustomApiKey.setResizable(true);
+        useCustomApiKey.setReorderable(false);
 
         persistApiKeys.selectedProperty().bindBidirectional(viewModel.getApikeyPersistProperty());
         persistApiKeys.disableProperty().bind(viewModel.apiKeyPersistAvailable().not());
@@ -123,17 +137,15 @@ public void initialize() {
             }
         });
 
-        apiKeySelector.setItems(viewModel.fetcherApiKeys());
-        viewModel.selectedApiKeyProperty().bind(apiKeySelector.valueProperty());
+        apiKeySelectorTable.setItems(viewModel.fetcherApiKeys());
 
         // Content is set later
-        viewModel.fetcherApiKeys().addListener((InvalidationListener) change -> apiKeySelector.getSelectionModel().selectFirst());
+        viewModel.fetcherApiKeys().addListener((InvalidationListener) change -> apiKeySelectorTable.getSelectionModel().selectFirst());
     }
 
     private void updateFetcherApiKey(FetcherApiKey apiKey) {
         if (apiKey != null) {
-            apiKey.setUse(useCustomApiKey.isSelected());
-            apiKey.setKey(customApiKey.getText().trim());
+            apiKey.setKey(customApiKey.getCellData(apiKey).trim());
         }
     }
 
diff --git a/src/main/java/org/jabref/logic/preferences/FetcherApiKey.java b/src/main/java/org/jabref/logic/preferences/FetcherApiKey.java
index e982dd0e58f..ba9d9895c60 100644
--- a/src/main/java/org/jabref/logic/preferences/FetcherApiKey.java
+++ b/src/main/java/org/jabref/logic/preferences/FetcherApiKey.java
@@ -20,6 +20,10 @@ public String getName() {
         return name.getValue();
     }
 
+    public StringProperty nameProperty() {
+        return name;
+    }
+
     public boolean shouldUse() {
         return use.getValue();
     }