display resources.repository_key in admin resources page

access-ci-org · Jan 16, 2025 · 7403e59 · 7403e59
1 parent 2b45415
commit 7403e59
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 41 deletions.
diff --git a/src/resources/Resources.jsx b/src/resources/Resources.jsx
@@ -55,55 +55,39 @@ export default function Resources({ availableResources, relativeUrlRoot }) {
     return () => stopScrolling(scrollIntervalRef);
   }, []);
 
-  const ResourceItem = ({ resource, index }) => {
-    const [isDragging, setIsDragging] = useState(false);
-
-    return (
-      <div
-        className={`${styles["resources-item"]} ${
-          isDragging ? styles.dragging : ""
-        }`}
-        draggable
-        onDragStart={(e) => {
-          setIsDragging(true);
-          handleDragStart(e, index);
-        }}
-        onDragEnd={() => {
-          setIsDragging(false);
-          stopScrolling(scrollIntervalRef);
-        }}
-        onDragOver={(e) => handleDragOver(e, index)}
-        onDrop={(e) => {
-          setIsDragging(false);
-          handleDrop();
-        }}
-      >
-        <span className={styles["drag-handle"]}></span>
-        <span className={styles["resource-name"]}>
-          <a
-            href={`${relativeUrlRoot}/resources/${resource.resource_id}`}
-            className={styles["resource-link"]}
-          >
-            {resource.display_resource_name}
-          </a>
-        </span>
-      </div>
-    );
-  };
-
   return (
     <div className={styles["resources-container"]}>
       <h2>Select a resource from the list to modify</h2>
       <p className={styles["drag-instruction"]}>
         Drag items to reorder the list.
       </p>
       <div className={styles["resources-list"]}>
+        <div className={styles["resources-header"]}>
+          <span className={styles["header-name"]}>Resource Name</span>
+          <span className={styles["header-repo"]}>Repository Key</span>
+        </div>
         {resources.map((resource, index) => (
-          <ResourceItem
+          <div
             key={resource.resource_id}
-            resource={resource}
-            index={index}
-          />
+            className={`${styles["resources-item"]}`}
+            draggable
+            onDragStart={(e) => handleDragStart(e, index)}
+            onDragOver={(e) => handleDragOver(e, index)}
+            onDrop={handleDrop}
+          >
+            <span className={styles["drag-handle"]}></span>
+            <span className={styles["resource-name"]}>
+              <a
+                href={`${relativeUrlRoot}/resources/${resource.resource_id}`}
+                className={styles["resource-link"]}
+              >
+                {resource.display_resource_name}
+              </a>
+            </span>
+            <span className={styles["resource-repo"]}>
+              {resource.resource_repository_key || "N/A"}
+            </span>
+          </div>
         ))}
       </div>
     </div>

diff --git a/src/resources/Resources.module.scss b/src/resources/Resources.module.scss
@@ -15,9 +15,20 @@
   margin: 0;
 }
 
+.resources-header {
+  display: flex;
+  justify-content: space-between;
+  padding: 0.5rem;
+  background-color: #e0e0e0;
+  border-radius: 4px;
+  font-weight: bold;
+  margin-bottom: 0.5rem;
+}
+
 .resources-item {
   display: flex;
   align-items: center;
+  justify-content: space-between;
   padding: 0.5rem;
   margin-bottom: 0.3rem;
   background-color: #f9f9f9;
@@ -62,7 +73,13 @@
 }
 
 .resource-name {
-  flex-grow: 1;
+  flex-grow: 2;
+}
+
+.resource-repo {
+  flex-grow: 1; /* Allocates less space for the repository key */
+  text-align: right;
+  color: gray;
 }
 
 .resource-link {