From b02c2027e8d212ee7a829a1cabde5bac6544bead Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Cabrita?= <joao.cabrita@opencraft.com>
Date: Tue, 6 Jul 2021 14:06:17 +0100
Subject: [PATCH] feat: Replace settings button with link for apps with legacy
 links

If an app has a legacy link, a link is now rendered instead of the settings button.

Related tickets:
* [TNL-8438](https://openedx.atlassian.net/browse/TNL-8438)
* [BB-4416 (OpenCraft Internal)](https://tasks.opencraft.com/browse/BB-4416)
---
 src/pages-and-resources/PagesAndResources.jsx |  1 +
 src/pages-and-resources/pages/PageCard.jsx    | 64 +++++++++++--------
 2 files changed, 40 insertions(+), 25 deletions(-)

diff --git a/src/pages-and-resources/PagesAndResources.jsx b/src/pages-and-resources/PagesAndResources.jsx
index 29d219a74..f1fed0674 100644
--- a/src/pages-and-resources/PagesAndResources.jsx
+++ b/src/pages-and-resources/PagesAndResources.jsx
@@ -36,6 +36,7 @@ function PagesAndResources({ courseId, intl }) {
   if (loadingStatus === RequestStatus.IN_PROGRESS) {
     return <></>;
   }
+
   return (
     <PagesAndResourcesProvider courseId={courseId}>
       <main className="container container-mw-md">
diff --git a/src/pages-and-resources/pages/PageCard.jsx b/src/pages-and-resources/pages/PageCard.jsx
index d081bbc0b..b0f5c8a13 100644
--- a/src/pages-and-resources/pages/PageCard.jsx
+++ b/src/pages-and-resources/pages/PageCard.jsx
@@ -1,9 +1,9 @@
 import { history } from '@edx/frontend-platform';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import {
-  Card, Icon, IconButton, Badge,
+  Badge, Card, Icon, IconButton, Hyperlink,
 } from '@edx/paragon';
-import { Settings } from '@edx/paragon/icons';
+import { ArrowForward, Settings } from '@edx/paragon/icons';
 import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
 import messages from '../messages';
@@ -28,6 +28,31 @@ function PageCard({
 }) {
   const { path: pagesAndResourcesPath } = useContext(PagesAndResourcesContext);
 
+  const SettingsButton = () => {
+    if (page.legacyLink) {
+      return (
+        <Hyperlink destination={page.legacyLink}>
+          <Icon
+            className="mb-0 mr-1"
+            src={ArrowForward}
+            size="inline"
+            screenReaderText={intl.formatMessage(messages.settings)}
+          />
+        </Hyperlink>
+      );
+    }
+    return (page.allowedOperations.configure || page.allowedOperations.enable) && (
+      <IconButton
+        className="mb-0 mr-1"
+        src={Settings}
+        iconAs={Icon}
+        size="inline"
+        alt={intl.formatMessage(messages.settings)}
+        onClick={() => history.push(`${pagesAndResourcesPath}/${page.id}/settings`)}
+      />
+    );
+  };
+
   return (
     <Card
       className="shadow card"
@@ -37,29 +62,18 @@ function PageCard({
       }}
     >
       <Card.Body className="d-flex flex-column justify-content-between">
-        <div>
-          <Card.Title className="d-flex mb-0 align-items-center justify-content-between">
-            <h4 className="m-0 p-0">{page.name}</h4>
-            {(page.allowedOperations.configure || page.allowedOperations.enable)
-          && (
-            <IconButton
-              className="mb-0 mr-1"
-              src={Settings}
-              iconAs={Icon}
-              size="inline"
-              alt={intl.formatMessage(messages.settings)}
-              onClick={() => history.push(`${pagesAndResourcesPath}/${page.id}/settings`)}
-            />
-          )}
-          </Card.Title>
-          {
-            page.enabled && (
-              <Badge className="py-1" variant="success">
-                {intl.formatMessage(messages.enabled)}
-              </Badge>
-            )
-          }
-        </div>
+        <Card.Title className="d-flex mb-0 align-items-center justify-content-between">
+          <h4 className="m-0 p-0">{page.name}</h4>
+          <SettingsButton />
+        </Card.Title>
+
+        {
+          page.enabled && (
+            <Badge className="py-1" variant="success">
+              {intl.formatMessage(messages.enabled)}
+            </Badge>
+          )
+        }
 
         <Card.Text className="m-0">
           {page.description}