Merge pull request #1123 from concord-consortium/186993789-fix-non-ad…

…min-library-interactives

fix:  Allow non-admins to edit existing activities with non-official library interactives [PT-186993789]

app/assets/javascripts/lara-typescript.js

@@ -125317,12 +125317,14 @@ var getLaraAuthoringAPI = function (authoringArgs) {
   if (authoringArgs === void 0) {
     authoringArgs = {
       activityId: "",
-      host: window.location.origin
+      host: window.location.origin,
+      isAdmin: false
     };
   }
 
   var activityId = authoringArgs.activityId,
-      host = authoringArgs.host;
+      host = authoringArgs.host,
+      isAdmin = authoringArgs.isAdmin;
   var prefix = "" + host + APIBase; // endpoints:
 
   var getPagesUrl = prefix + "/get_pages/" + activityId + ".json";
@@ -125702,7 +125704,8 @@ var getLaraAuthoringAPI = function (authoringArgs) {
         type: "MwInteractive",
         useCount: 0,
         dateAdded: 0,
-        isQuickAddItem: true
+        isQuickAddItem: true,
+        official: true
       });
       result.allEmbeddables.push({
         id: "Embeddable::Xhtml",
@@ -125711,7 +125714,8 @@ var getLaraAuthoringAPI = function (authoringArgs) {
         type: "Embeddable::Xhtml",
         useCount: 0,
         dateAdded: 0,
-        isQuickAddItem: true
+        isQuickAddItem: true,
+        official: true
       });
       var plugins = json.plugins;
 
@@ -125759,7 +125763,8 @@ var getLaraAuthoringAPI = function (authoringArgs) {
     getPreviewOptions: getPreviewOptions,
     getPageItemEmbeddableMetaData: getPageItemEmbeddableMetaData,
     pathToTinyMCE: "/assets/tinymce.js",
-    pathToTinyMCECSS: "/assets/tinymce-content.css"
+    pathToTinyMCECSS: "/assets/tinymce-content.css",
+    isAdmin: isAdmin
   };
 };
 
@@ -126337,6 +126342,7 @@ var getLibraryInteractives = function () {
     native_height: 435,
     native_width: 576,
     no_snapshots: false,
+    official: false,
     show_delete_data_button: false,
     thumbnail_url: "",
     updated_at: "2021-05-04T21:26:18Z"
@@ -126364,6 +126370,7 @@ var getLibraryInteractives = function () {
     native_height: 435,
     native_width: 576,
     no_snapshots: false,
+    official: false,
     show_delete_data_button: false,
     thumbnail_url: "",
     updated_at: "2021-05-04T21:26:18Z"
@@ -126391,6 +126398,7 @@ var getLibraryInteractives = function () {
     native_height: 435,
     native_width: 576,
     no_snapshots: false,
+    official: false,
     show_delete_data_button: false,
     thumbnail_url: "",
     updated_at: "2021-05-04T21:26:18Z"
@@ -126418,6 +126426,7 @@ var getLibraryInteractives = function () {
     native_height: 435,
     native_width: 576,
     no_snapshots: false,
+    official: false,
     show_delete_data_button: false,
     thumbnail_url: "",
     updated_at: "2021-05-04T21:26:18Z"
@@ -126446,6 +126455,7 @@ var getLibraryInteractives = function () {
     native_height: 435,
     native_width: 576,
     no_snapshots: false,
+    official: false,
     show_delete_data_button: false,
     thumbnail_url: "",
     updated_at: "2021-05-04T21:26:18Z"
@@ -126552,7 +126562,8 @@ exports.API = {
   getPageItemPlugins: getPageItemPlugins,
   getPageItemEmbeddableMetaData: getPageItemEmbeddableMetaData,
   pathToTinyMCE: "https://cdnjs.cloudflare.com/ajax/libs/tinymce/5.10.0/tinymce.min.js",
-  pathToTinyMCECSS: undefined
+  pathToTinyMCECSS: undefined,
+  isAdmin: false
 };
 
 /***/ }),
@@ -129700,10 +129711,10 @@ var authoring_page_1 = __webpack_require__(/*! ./authoring-page */ "./src/sectio
 var QueryBoundPage = function (props) {
   var host = props.host || "https://app.lara.docker";
   var activityId = props.activityId || "55";
-  var pageId = props.id;
   return React.createElement(api_container_1.APIContainer, {
     activityId: activityId,
-    host: host
+    host: host,
+    isAdmin: props.isAdmin
   }, React.createElement(authoring_page_1.AuthoringPageUsingAPI, null));
 };
 
@@ -130278,32 +130289,45 @@ var SectionItemButton = function (_a) {
 };
 
 var SectionItemPicker = function (props) {
-  var _a;
-
   var api = (0, use_api_provider_1.usePageAPI)();
-  var allItems = api.getAllEmbeddables.data;
-  var quickAddItems = (_a = api.getAllEmbeddables.data) === null || _a === void 0 ? void 0 : _a.allEmbeddables.filter(function (e) {
+  var allItems = (0, react_1.useMemo)(function () {
+    if (!api.getAllEmbeddables.data) {
+      return undefined;
+    } // filter out non-official embeddables if the user is not an admin
+
+
+    var allEmbeddables = api.getAllEmbeddables.data.allEmbeddables.filter(function (em) {
+      var _a;
+
+      var official = (_a = em.official) !== null && _a !== void 0 ? _a : false;
+      return api.isAdmin || official;
+    });
+    return {
+      allEmbeddables: allEmbeddables
+    };
+  }, [api.getAllEmbeddables.data, api.isAdmin]);
+  var quickAddItems = allItems === null || allItems === void 0 ? void 0 : allItems.allEmbeddables.filter(function (e) {
     return e.isQuickAddItem;
   });
   var onClose = props.onClose,
       onAdd = props.onAdd;
   var modalIsVisible = true;
 
-  var _b = (0, react_1.useState)(null),
-      currentSelectedItem = _b[0],
-      setCurrentSelectedItem = _b[1];
+  var _a = (0, react_1.useState)(null),
+      currentSelectedItem = _a[0],
+      setCurrentSelectedItem = _a[1];
 
-  var _c = (0, react_1.useState)((allItems === null || allItems === void 0 ? void 0 : allItems.allEmbeddables) || []),
-      allItemsList = _c[0],
-      setAllItemsList = _c[1];
+  var _b = (0, react_1.useState)((allItems === null || allItems === void 0 ? void 0 : allItems.allEmbeddables) || []),
+      allItemsList = _b[0],
+      setAllItemsList = _b[1];
 
-  var _d = (0, react_1.useState)(false),
-      isSearching = _d[0],
-      setIsSearching = _d[1];
+  var _c = (0, react_1.useState)(false),
+      isSearching = _c[0],
+      setIsSearching = _c[1];
 
-  var _e = (0, react_1.useState)(modalIsVisible),
-      modalVisibility = _e[0],
-      setModalVisibility = _e[1];
+  var _d = (0, react_1.useState)(modalIsVisible),
+      modalVisibility = _d[0],
+      setModalVisibility = _d[1];
 
   var itemSelected = currentSelectedItem !== null; // Escape key deselects the current item:
 
@@ -131382,15 +131406,17 @@ var user_interface_provider_1 = __webpack_require__(/*! ./user-interface-provide
 
 var APIContainer = function (props) {
   var activityId = props.activityId,
-      host = props.host;
+      host = props.host,
+      isAdmin = props.isAdmin;
   var queryClient = new react_query_1.QueryClient();
   var ui = React.useContext(user_interface_provider_1.UserInterfaceContext);
   var APIProvider = mock_api_provider_1.API;
 
   if (host) {
     APIProvider = (0, lara_api_provider_1.getLaraAuthoringAPI)({
       activityId: activityId || "",
-      host: host
+      host: host,
+      isAdmin: !!isAdmin
     });
   }
 
@@ -132087,7 +132113,8 @@ var usePageAPI = function () {
     deleteSectionFunction: deleteSectionFunction,
     getPreviewOptions: getPreviewOptions,
     pathToTinyMCE: provider.pathToTinyMCE,
-    pathToTinyMCECSS: provider.pathToTinyMCECSS
+    pathToTinyMCECSS: provider.pathToTinyMCECSS,
+    isAdmin: provider.isAdmin
   };
 };
 

app/controllers/api/v1/interactive_pages_controller.rb

@@ -404,10 +404,6 @@ def get_library_interactives_list
       .joins("LEFT JOIN managed_interactives ON managed_interactives.library_interactive_id = library_interactives.id")
       .group('library_interactives.id')
 
-    if current_user && !current_user.is_admin
-      library_interactives = library_interactives.where("library_interactives.official = true")
-    end
-
     plugins = get_teacher_edition_plugins.map { |plugin| map_plugin_to_hash(plugin) }
 
     library_interactives_list = library_interactives.map do |library_interactive|

app/views/interactive_pages/edit.html.haml

@@ -63,10 +63,9 @@
       var params = {
         host: window.location.origin,
         activityId: "#{@activity.id}",
-        id: "#{@page.id}"
+        id: "#{@page.id}",
+        isAdmin: #{((current_user && current_user.is_admin) || false).to_json}
       };
-      var element;
-      console.log(params);
       var container = $("#sections-container")[0];
       LARA.SectionAuthoring.renderAuthoringPage(container, params);
     });

lara-typescript/src/projects/components/project-list-item.tsx

@@ -32,7 +32,11 @@ export const ProjectListItem: React.FC<IProjectListItemProps> = ({
       <menu>
         <ul>
           <li><button className="textButton editButton" onClick={handleEditButtonClick}>Edit</button></li>
-          {onDelete && <li><button className="textButton deleteButton" onClick={handleDeleteButtonClick}>Delete</button></li>}
+          {onDelete && (
+            <li>
+              <button className="textButton deleteButton" onClick={handleDeleteButtonClick}>Delete</button>
+            </li>
+          )}
         </ul>
       </menu>
       <div className="projectListItem__link">

lara-typescript/src/section-authoring/api/api-types.ts

@@ -91,6 +91,7 @@ export interface ILibraryInteractive {
   native_height: number;
   native_width: number;
   no_snapshots: boolean;
+  official: boolean;
   serializeable_id: string;
   show_delete_data_button: boolean;
   thumbnail_url: string;
@@ -368,4 +369,6 @@ export interface IAuthoringAPIProvider {
 
   pathToTinyMCE: string | null;
   pathToTinyMCECSS: string | undefined;
+
+  isAdmin: boolean;
 }

lara-typescript/src/section-authoring/api/lara-api-provider.ts

@@ -24,14 +24,16 @@ const APIBase = "/api/v1";
 interface IGetLARAAuthoringAPIParams {
   activityId: string;
   host: string;
+  isAdmin: boolean;
 }
 
 export const getLaraAuthoringAPI =
   (authoringArgs: IGetLARAAuthoringAPIParams = {
     activityId: "",
-    host: window.location.origin
+    host: window.location.origin,
+    isAdmin: false
   }): IAuthoringAPIProvider => {
-  const { activityId, host } = authoringArgs;
+  const { activityId, host, isAdmin } = authoringArgs;
   const prefix = `${host}${APIBase}`;
   // endpoints:
 
@@ -259,7 +261,8 @@ export const getLaraAuthoringAPI =
           type: "MwInteractive",
           useCount: 0,
           dateAdded: 0,
-          isQuickAddItem: true
+          isQuickAddItem: true,
+          official: true,
         });
         result.allEmbeddables.push({
           id: "Embeddable::Xhtml",
@@ -268,7 +271,8 @@ export const getLaraAuthoringAPI =
           type: "Embeddable::Xhtml",
           useCount: 0,
           dateAdded: 0,
-          isQuickAddItem: true
+          isQuickAddItem: true,
+          official: true,
         });
         const plugins = (json.plugins as IPluginType[]);
         for (const plugin of plugins) {
@@ -291,6 +295,7 @@ export const getLaraAuthoringAPI =
     createSection, updateSections, updateSection, copySection, getPageItemPlugins,
     createPageItem, updatePageItem, deletePageItem, copyPageItem, getAvailablePlugins,
     getAllEmbeddables, getLibraryInteractives, getPortals, getPreviewOptions, getPageItemEmbeddableMetaData,
-    pathToTinyMCE: "/assets/tinymce.js", pathToTinyMCECSS: "/assets/tinymce-content.css"
+    pathToTinyMCE: "/assets/tinymce.js", pathToTinyMCECSS: "/assets/tinymce-content.css",
+    isAdmin
   };
 };

lara-typescript/src/section-authoring/api/mock-api-provider.ts

@@ -439,6 +439,7 @@ const getLibraryInteractives = () => {
       native_height: 435,
       native_width: 576,
       no_snapshots: false,
+      official: false,
       show_delete_data_button: false,
       thumbnail_url: "",
       updated_at: "2021-05-04T21:26:18Z"
@@ -467,6 +468,7 @@ const getLibraryInteractives = () => {
       native_height: 435,
       native_width: 576,
       no_snapshots: false,
+      official: false,
       show_delete_data_button: false,
       thumbnail_url: "",
       updated_at: "2021-05-04T21:26:18Z"
@@ -495,6 +497,7 @@ const getLibraryInteractives = () => {
       native_height: 435,
       native_width: 576,
       no_snapshots: false,
+      official: false,
       show_delete_data_button: false,
       thumbnail_url: "",
       updated_at: "2021-05-04T21:26:18Z"
@@ -523,6 +526,7 @@ const getLibraryInteractives = () => {
       native_height: 435,
       native_width: 576,
       no_snapshots: false,
+      official: false,
       show_delete_data_button: false,
       thumbnail_url: "",
       updated_at: "2021-05-04T21:26:18Z"
@@ -552,6 +556,7 @@ const getLibraryInteractives = () => {
       native_height: 435,
       native_width: 576,
       no_snapshots: false,
+      official: false,
       show_delete_data_button: false,
       thumbnail_url: "",
       updated_at: "2021-05-04T21:26:18Z"
@@ -631,5 +636,6 @@ export const API: IAuthoringAPIProvider = {
   createPageItem, updatePageItem, deletePageItem, copyPageItem,
   getAllEmbeddables, getLibraryInteractives, getAvailablePlugins, getPortals,
   getPreviewOptions, getPageItemPlugins, getPageItemEmbeddableMetaData,
-  pathToTinyMCE: "https://cdnjs.cloudflare.com/ajax/libs/tinymce/5.10.0/tinymce.min.js", pathToTinyMCECSS: undefined
+  pathToTinyMCE: "https://cdnjs.cloudflare.com/ajax/libs/tinymce/5.10.0/tinymce.min.js", pathToTinyMCECSS: undefined,
+  isAdmin: false
 };

lara-typescript/src/section-authoring/components/query-bound-page.tsx

@@ -5,14 +5,14 @@ import { AuthoringPageUsingAPI, IPageProps } from "./authoring-page";
 export interface IQueryBoundPage extends IPageProps {
   host?: string;
   activityId?: string;
+  isAdmin?: boolean;
 }
 
 export const QueryBoundPage = (props: IQueryBoundPage) => {
   const host = props.host || "https://app.lara.docker";
   const activityId = props.activityId || "55";
-  const pageId = props.id;
   return (
-    <APIContainer activityId={activityId} host={host}>
+    <APIContainer activityId={activityId} host={host} isAdmin={props.isAdmin}>
       <AuthoringPageUsingAPI />
     </APIContainer>
   );