feat: Update unit from library edit button

Author: ChrisChV

src/course-outline/card-header/CardHeader.scss

@@ -25,6 +25,12 @@
   &:hover {
     .item-card-button-icon {
       opacity: 1;
+
+      &.item-card-button-icon-disabled {
+        pointer-events: all;
+        opacity: .5;
+        cursor: default;
+      }
     }
   }
 }

src/course-outline/card-header/CardHeader.tsx

@@ -1,6 +1,7 @@
 import {
   ReactNode, useEffect, useRef, useState,
 } from 'react';
+import classNames from 'classnames';
 import { getConfig } from '@edx/frontend-platform';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { useSearchParams } from 'react-router-dom';
@@ -177,11 +178,23 @@ const CardHeader = ({
           <>
             {titleComponent}
             <IconButtonWithTooltip
-              className="item-card-button-icon"
-              variant={isDisabledEditField ? 'light' : 'primary'}
+              className={classNames(
+                'item-card-button-icon',
+                {
+                  'item-card-button-icon-disabled': isDisabledEditField,
+                },
+              )}
               data-testid={`${namePrefix}-edit-button`}
-              alt={intl.formatMessage(messages.altButtonEdit)}
-              tooltipContent={<div>{intl.formatMessage(messages.altButtonEdit)}</div>}
+              alt={intl.formatMessage(
+                isDisabledEditField ? messages.cannotEditTooltip : messages.altButtonEdit,
+              )}
+              tooltipContent={(
+                <div>
+                  {intl.formatMessage(
+                    isDisabledEditField ? messages.cannotEditTooltip : messages.altButtonEdit,
+                  )}
+                </div>
+              )}
               iconAs={EditIcon}
               onClick={onClickEdit}
               // @ts-ignore

src/course-outline/card-header/messages.js

@@ -86,6 +86,11 @@ const messages = defineMessages({
     defaultMessage: 'Update available - click to sync',
     description: 'Alt text for the sync icon button.',
   },
+  cannotEditTooltip: {
+    id: 'course-authoring.course-outline.card.button.edit.disable.tooltip',
+    defaultMessage: 'This object was added from a library, so it cannot be edited.',
+    description: 'Tooltip text of button when the object was added from a library.',
+  },
 });
 
 export default messages;