From 4f88904051430ce6c3041211a6f7468aaef914b2 Mon Sep 17 00:00:00 2001
From: Yugay Vasiliy <vasyayugay99@gmail.com>
Date: Tue, 6 Aug 2024 16:41:13 +0000
Subject: [PATCH] Removed li elements Modified the namings of checkboxes

---
 src/fragmentarium/ui/fragment/ScopeEditor.tsx | 31 +++++++++----------
 1 file changed, 15 insertions(+), 16 deletions(-)

diff --git a/src/fragmentarium/ui/fragment/ScopeEditor.tsx b/src/fragmentarium/ui/fragment/ScopeEditor.tsx
index 33f904a63..327256321 100644
--- a/src/fragmentarium/ui/fragment/ScopeEditor.tsx
+++ b/src/fragmentarium/ui/fragment/ScopeEditor.tsx
@@ -51,7 +51,9 @@ const ScopeEditor: React.FC<ScopeEditorProps> = ({
   const handleSubmit = async () => {
     await updateScopes(selectedScopes)
   }
-
+  const getDisplayScope = (scope: string) => {
+    return scope.replace('read:', '').replace('-fragments', '')
+  }
   return (
     <div>
       <h3>Permissions</h3>
@@ -59,23 +61,20 @@ const ScopeEditor: React.FC<ScopeEditorProps> = ({
         Records with added permissions are visible only to users who have those
         permissions.
       </p>
-      <ul>
-        {fragmentScopes.map((scope) => (
-          <li key={scope}>
-            <label>
-              <input
-                type="checkbox"
-                checked={selectedScopes.includes(scope)}
-                onChange={() => handleScopeChange(scope)}
-              />
-              {scope}
-            </label>
-          </li>
-        ))}
-      </ul>
+      {fragmentScopes.map((scope) => (
+        <div key={scope}>
+          <label>
+            <input
+              type="checkbox"
+              checked={selectedScopes.includes(scope)}
+              onChange={() => handleScopeChange(scope)}
+            />
+            Restrict it to users with {getDisplayScope(scope)} permissions
+          </label>
+        </div>
+      ))}
       <Button onClick={handleSubmit}>Update Permissions</Button>
     </div>
   )
 }
-
 export default ScopeEditor