1 files changed, 35 insertions, 0 deletions
diff --git a/app/assets/javascripts/lib/utils/table_utility.js b/app/assets/javascripts/lib/utils/table_utility.js
index 33db7686e0f..6d66335b832 100644
--- a/app/assets/javascripts/lib/utils/table_utility.js
+++ b/app/assets/javascripts/lib/utils/table_utility.js
@@ -1,3 +1,4 @@
+import { convertToSnakeCase, convertToCamelCase } from '~/lib/utils/text_utility';
 import { DEFAULT_TH_CLASSES } from './constants';
 
 /**
@@ -7,3 +8,37 @@ import { DEFAULT_TH_CLASSES } from './constants';
  * @returns {String} The classes to be used in GlTable fields object.
  */
 export const thWidthClass = (width) => `gl-w-${width}p ${DEFAULT_TH_CLASSES}`;
+
+/**
+ * Converts a GlTable sort-changed event object into string format.
+ * This string can be used as a sort argument on GraphQL queries.
+ *
+ * @param {Object} - The table state context object.
+ * @returns {String} A string with the sort key and direction, for example 'NAME_DESC'.
+ */
+export const sortObjectToString = ({ sortBy, sortDesc }) => {
+  const sortingDirection = sortDesc ? 'DESC' : 'ASC';
+  const sortingColumn = convertToSnakeCase(sortBy).toUpperCase();
+
+  return `${sortingColumn}_${sortingDirection}`;
+};
+
+/**
+ * Converts a sort string into a sort state object that can be used to
+ * set the sort order on GlTable.
+ *
+ * @param {String} - The string with the sort key and direction, for example 'NAME_DESC'.
+ * @returns {Object} An object with the sortBy and sortDesc properties.
+ */
+export const sortStringToObject = (sortString) => {
+  let sortBy = null;
+  let sortDesc = null;
+
+  if (sortString && sortString.includes('_')) {
+    const [key, direction] = sortString.split(/_(ASC|DESC)$/);
+    sortBy = convertToCamelCase(key.toLowerCase());
+    sortDesc = direction === 'DESC';
+  }
+
+  return { sortBy, sortDesc };
+};