refactor: upstream link and alert styling

openedx · Oct 22, 2024 · 9547c8c · 9547c8c
1 parent a7435d2
commit 9547c8c
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 21 deletions.
diff --git a/cms/lib/xblock/upstream_sync.py b/cms/lib/xblock/upstream_sync.py
@@ -102,7 +102,7 @@ def upstream_link(self) -> str:
             usage_key = LibraryUsageLocatorV2.from_string(self.upstream_ref)
         except InvalidKeyError:
             return None
-        return _get_library_authoring_url(usage_key.lib_key)
+        return _get_library_xblock_url(usage_key)
 
     def to_json(self) -> dict[str, t.Any]:
         """
@@ -364,14 +364,15 @@ def sever_upstream_link(downstream: XBlock) -> None:
         setattr(downstream, fetched_upstream_field, None)  # Null out upstream_display_name, et al.
 
 
-def _get_library_authoring_url(library_key: str):
+def _get_library_xblock_url(usage_key: LibraryUsageLocatorV2):
     """
     Gets authoring url for given library_key.
     """
     library_url = None
     mfe_base_url = settings.COURSE_AUTHORING_MICROFRONTEND_URL
     if mfe_base_url:
-        library_url = f'{mfe_base_url}/library/{library_key}'
+        library_key = usage_key.lib_key
+        library_url = f'{mfe_base_url}/library/{library_key}/components?usageKey={usage_key}'
     return library_url
 
 

diff --git a/cms/static/sass/views/_container.scss b/cms/static/sass/views/_container.scss
@@ -595,3 +595,38 @@
     }
   }
 }
+
+.modal-alert {
+    display: flex;
+    align-items: center;
+    padding: $baseline;
+    margin-bottom: $baseline;
+
+    &.warning {
+        background-color: $state-warning-bg;
+
+        .fa-warning {
+            color: $orange;
+            margin-right: $baseline;
+        }
+    }
+
+    .action-btn {
+        text-wrap: nowrap;
+        background-color: $black;
+        color: $white;
+        margin-left: auto;
+        padding: ($baseline/2);
+
+        .fa {
+            margin-left: ($baseline/4);
+            color: $white
+        }
+
+        &:hover,
+        &:focus,
+        &:active {
+            background-color: lighten($black, 20%);
+        }
+    }
+}
diff --git a/cms/templates/js/edit-upstream-alert.underscore b/cms/templates/js/edit-upstream-alert.underscore
@@ -1,20 +1,18 @@
-<div class="page-banner">
-    <div class="alert alert-warning has-warning" style="display: flex;align-items: center;" role="alert">
-          <span class="feedback-symbol fa fa-warning" style="color: rgb(237, 189, 60)" aria-hidden="true"></span><span class="sr"><%- gettext("Warning") %></span>
-        <div class="message-content">
-            <strong><%- gettext("You are editing content from a Library.") %></strong>
-            <p>
-            <%- gettext("Edits made here will only be reflected in this course. These edits may be overridden later if updates are accepted.") %>
-            </p>
-        </div>
-        <a
-            href="<%- upstreamLink %>"
-            target="_blank"
-            class="btn-primary btn cta-primary view-button"
-            style="text-wrap: nowrap; background-color: black; margin-left: auto"
-        >
-            <%- gettext('View in Library') %>
-            <span class="fa fa-external-link" aria-hidden="true" style="margin-left: 10px"></span>
-        </a>
+<div class="modal-alert warning" role="alert">
+    <span class="fa fa-lg fa-warning" aria-hidden="true"/><span class="sr"><%- gettext("Warning") %></span>
+    <div class="message-content">
+        <strong><%- gettext("You are editing content from a Library.") %></strong>
+        <p>
+        <%- gettext("Edits made here will only be reflected in this course. These edits may be overridden later if updates are accepted.") %>
+        </p>
     </div>
+    <a
+        href="<%- upstreamLink %>"
+        target="_blank"
+        class="btn action-btn"
+    >
+        <%- gettext('View in Library') %>
+        <span class="fa fa-external-link" aria-hidden="true" />
+    </a>
 </div>
+