From bdbc583aa750999b24eac75509d5a7e8f8b56ee9 Mon Sep 17 00:00:00 2001
From: Rebecca Scott <me@becdetat.com>
Date: Fri, 23 Apr 2021 11:57:55 +1000
Subject: [PATCH] Show the option value in the options table

---
 api/options/rest-api.php |  2 +-
 src/options/index.js     | 23 ++++++++++++++++++++---
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/api/options/rest-api.php b/api/options/rest-api.php
index b7f68b00ae5..271518383d8 100644
--- a/api/options/rest-api.php
+++ b/api/options/rest-api.php
@@ -58,7 +58,7 @@ function wca_test_helper_get_options( $request ) {
 	$search   = $request->get_param( 'search' );
 
 	$query = "
-        select option_id, option_name, autoload
+        select option_id, option_name, option_value, autoload
         from {$wpdb->prefix}options
     ";
 
diff --git a/src/options/index.js b/src/options/index.js
index e7e0c2e0853..55c8c35220e 100644
--- a/src/options/index.js
+++ b/src/options/index.js
@@ -13,6 +13,14 @@ import { STORE_KEY } from './data/constants';
 import { default as OptionEditor } from './OptionEditor';
 import './data';
 
+function shorten( input ) {
+	if ( input.length > 20 ) {
+		return input.substring( 0, 20 ) + '...';
+	}
+
+	return input;
+}
+
 function Options( {
 	options,
 	getOptions,
@@ -51,7 +59,7 @@ function Options( {
 	const renderLoading = () => {
 		return (
 			<tr>
-				<td colSpan="5" align="center">
+				<td colSpan="6" align="center">
 					Loading...
 				</td>
 			</tr>
@@ -62,7 +70,7 @@ function Options( {
 		if ( options.length === 0 ) {
 			return (
 				<tr>
-					<td colSpan="5" align="center">
+					<td colSpan="6" align="center">
 						No Options Found
 					</td>
 				</tr>
@@ -71,17 +79,20 @@ function Options( {
 
 		return options.map( ( option ) => {
 			// eslint-disable-next-line camelcase
-			const { option_id, option_name, autoload } = option;
+			const { option_id, option_name, option_value, autoload } = option;
 
 			// eslint-disable-next-line camelcase
 			const optionId = option_id;
 			// eslint-disable-next-line camelcase
 			const optionName = option_name;
+			// eslint-disable-next-line camelcase
+			const optionValue = shorten( option_value );
 
 			return (
 				<tr key={ optionId }>
 					<td key={ 0 }>{ optionId }</td>
 					<td key={ 1 }>{ optionName }</td>
+					<td key={ 'optionValue' }>{ optionValue }</td>
 					<td className="align-center" key={ 2 }>
 						{ autoload }
 					</td>
@@ -176,6 +187,12 @@ function Options( {
 							>
 								Name
 							</td>
+							<td
+								className="manage-column column-thumb"
+								key={ 'optionValue' }
+							>
+								Value
+							</td>
 							<td
 								className="manage-column column-thumb align-center"
 								key={ 2 }