feat: enable analytics panel (#736)

* feat: enable analytics panel

* refactor: returns to home for builder icon

.github/workflows/deploy-dev.yml

@@ -33,6 +33,7 @@ jobs:
           VITE_GRAASP_LIBRARY_HOST: ${{ vars.VITE_GRAASP_LIBRARY_HOST }}
           VITE_GRAASP_ANALYZER_HOST: ${{ vars.VITE_GRAASP_ANALYZER_HOST }}
           VITE_H5P_INTEGRATION_URL: ${{ secrets.VITE_H5P_INTEGRATION_URL }}
+          VITE_GRAASP_ASSETS_URL: ${{ secrets.VITE_GRAASP_ASSETS_URL }}
           VITE_SENTRY_ENV: ${{ vars.VITE_SENTRY_ENV }}
           VITE_SENTRY_DSN: ${{ secrets.VITE_SENTRY_DSN }}
           # VITE_GA_MEASUREMENT_ID: ${{ secrets.VITE_GA_MEASUREMENT_ID }}

.github/workflows/deploy-prod.yml

@@ -36,6 +36,7 @@ jobs:
           VITE_GRAASP_LIBRARY_HOST: ${{ vars.VITE_GRAASP_LIBRARY_HOST }}
           VITE_GRAASP_ANALYZER_HOST: ${{ vars.VITE_GRAASP_ANALYZER_HOST }}
           VITE_H5P_INTEGRATION_URL: ${{ secrets.VITE_H5P_INTEGRATION_URL }}
+          VITE_GRAASP_ASSETS_URL: ${{ secrets.VITE_GRAASP_ASSETS_URL }}
           VITE_SENTRY_ENV: ${{ vars.VITE_SENTRY_ENV }}
           VITE_SENTRY_DSN: ${{ secrets.VITE_SENTRY_DSN }}
           VITE_GA_MEASUREMENT_ID: ${{ secrets.VITE_GA_MEASUREMENT_ID }}

.github/workflows/deploy-stage.yml

@@ -36,6 +36,7 @@ jobs:
           VITE_GRAASP_LIBRARY_HOST: ${{ vars.VITE_GRAASP_LIBRARY_HOST }}
           VITE_GRAASP_ANALYZER_HOST: ${{ vars.VITE_GRAASP_ANALYZER_HOST }}
           VITE_H5P_INTEGRATION_URL: ${{ secrets.VITE_H5P_INTEGRATION_URL }}
+          VITE_GRAASP_ASSETS_URL: ${{ secrets.VITE_GRAASP_ASSETS_URL }}
           VITE_SENTRY_ENV: ${{ vars.VITE_SENTRY_ENV }}
           VITE_SENTRY_DSN: ${{ secrets.VITE_SENTRY_DSN }}
           # un-comment to enable Google Analytics

package.json

@@ -13,13 +13,14 @@
     "node": ">=16"
   },
   "dependencies": {
+    "@emotion/cache": "11.11.0",
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
     "@graasp/chatbox": "2.0.0",
     "@graasp/query-client": "1.3.2",
     "@graasp/sdk": "1.2.0",
     "@graasp/translations": "1.18.1",
-    "@graasp/ui": "3.3.0",
+    "@graasp/ui": "3.3.1",
     "@mui/icons-material": "5.14.3",
     "@mui/lab": "5.0.0-alpha.138",
     "@mui/material": "5.14.4",
@@ -58,6 +59,7 @@
     "react-router": "6.14.2",
     "react-router-dom": "6.14.2",
     "react-toastify": "9.1.3",
+    "stylis": "4.3.0",
     "stylis-plugin-rtl": "2.1.1",
     "uuid": "9.0.0",
     "validator": "13.11.0"

src/components/item/ItemContent.tsx

@@ -39,12 +39,11 @@ import {
 
 import { List } from 'immutable';
 
-import { API_HOST, H5P_INTEGRATION_URL } from '@/config/env';
+import { API_HOST, GRAASP_ASSETS_URL, H5P_INTEGRATION_URL } from '@/config/env';
 
 import {
   DEFAULT_LINK_SHOW_BUTTON,
   DEFAULT_LINK_SHOW_IFRAME,
-  GRAASP_ASSETS_URL,
   ITEM_DEFAULT_HEIGHT,
 } from '../../config/constants';
 import { useCommonTranslation } from '../../config/i18n';

src/components/item/header/ItemHeaderActions.tsx

@@ -14,7 +14,6 @@ import {
   getHighestPermissionForMemberFromMemberships,
   isItemUpdateAllowedForUser,
 } from '../../../utils/membership';
-import AnalyticsDashboardButton from '../../common/AnalyticsDashboardButton';
 import EditItemCaptionButton from '../../common/EditItemCaptionButton';
 import ItemMetadataButton from '../../common/ItemMetadataButton';
 import PublishButton from '../../common/PublishButton';
@@ -78,7 +77,6 @@ const ItemHeaderActions = ({ item }: Props): JSX.Element => {
             onClick={onClickChatbox}
           />
           {canAdmin && <PublishButton itemId={item.id} />}
-          {canEdit && <AnalyticsDashboardButton id={item.id} />}
         </>
       );
 

src/components/main/ItemScreen.tsx

@@ -25,7 +25,6 @@ import ItemMain from '../item/ItemMain';
 import ItemPublishTab from '../item/publish/ItemPublishTab';
 import ItemSettings from '../item/settings/ItemSettings';
 import ItemSharingTab from '../item/sharing/ItemSharingTab';
-import GraaspAnalyzer from './GraaspAnalyzer';
 import ItemForbiddenScreen from './ItemForbiddenScreen';
 import Main from './Main';
 
@@ -81,9 +80,6 @@ const ItemScreen = (): JSX.Element => {
       case ItemActionTabs.Sharing: {
         return <ItemSharingTab item={item} memberships={memberships} />;
       }
-      case ItemActionTabs.Dashboard: {
-        return <GraaspAnalyzer item={item} />;
-      }
       case ItemActionTabs.Library: {
         return <ItemPublishTab item={item} permission={permission} />;
       }

src/components/main/Main.tsx

@@ -40,6 +40,7 @@ type Props = { children: JSX.Element | (JSX.Element & string) };
 export const platformsHostsMap = defaultHostsMapper({
   [Platform.Player]: HOST_MAP.player,
   [Platform.Library]: HOST_MAP.library,
+  [Platform.Analytics]: HOST_MAP.analytics,
 });
 
 const Main = ({ children }: Props): JSX.Element => {
@@ -50,6 +51,7 @@ const Main = ({ children }: Props): JSX.Element => {
   const platformProps = {
     [Platform.Builder]: {
       id: APP_NAVIGATION_PLATFORM_SWITCH_BUTTON_IDS[Platform.Builder],
+      href: '/',
     },
     [Platform.Player]: {
       id: APP_NAVIGATION_PLATFORM_SWITCH_BUTTON_IDS[Platform.Player],
@@ -61,7 +63,7 @@ const Main = ({ children }: Props): JSX.Element => {
     },
     [Platform.Analytics]: {
       id: APP_NAVIGATION_PLATFORM_SWITCH_BUTTON_IDS[Platform.Analytics],
-      disabled: true,
+      ...getNavigationEvents(Platform.Analytics),
     },
   };
 
@@ -77,7 +79,6 @@ const Main = ({ children }: Props): JSX.Element => {
         id={APP_NAVIGATION_PLATFORM_SWITCH_ID}
         selected={Platform.Builder}
         platformsProps={platformProps}
-        disabledColor="#999"
       />
     </Box>
   );

src/config/constants.ts

@@ -152,7 +152,6 @@ export const AVATAR_ICON_HEIGHT = 30;
 export const DEFAULT_LINK_SHOW_IFRAME = false;
 export const DEFAULT_LINK_SHOW_BUTTON = true;
 
-export const GRAASP_ASSETS_URL = process.env.REACT_APP_GRAASP_ASSETS_URL;
 export const EXPORT_CSV_HEADERS = [
   { label: 'message_id', key: 'id' },
   { label: 'item_id', key: 'chatId' },

src/config/env.ts

@@ -15,6 +15,7 @@ export const GRAASP_ANALYZER_HOST =
 
 export const H5P_INTEGRATION_URL =
   import.meta.env.VITE_H5P_INTEGRATION_URL || `${API_HOST}/p/h5p-integration`;
+export const GRAASP_ASSETS_URL = import.meta.env.VITE_GRAASP_ASSETS_URL;
 
 export const SENTRY_ENV = import.meta.env.VITE_SENTRY_ENV;
 export const SENTRY_DSN = import.meta.env.VITE_SENTRY_DSN;

src/config/externalPaths.ts

@@ -22,5 +22,5 @@ export const HOST_MAP = {
   [Context.Builder]: '/',
   [Context.Library]: GRAASP_LIBRARY_HOST,
   [Context.Player]: GRAASP_PLAYER_HOST,
-  [Context.Analytics]: '',
+  [Context.Analytics]: GRAASP_ANALYZER_HOST,
 };

src/config/selectors.ts

@@ -228,8 +228,6 @@ export const buildCategoryMenuOptionSelector = (
 ): string => `#${menuName} .MuiAutocomplete-option`;
 export const buildDashboardButtonId = (id: string): string =>
   `dashboard-button-${id}`;
-export const buildGraaspAnalyzerId = (id: string): string =>
-  `graasp-analyzer-${id}`;
 export const buildPlayerTabName = (id: string): string => `builder-tab-${id}`;
 
 export const ITEM_PUBLISH_SECTION_TITLE_ID = 'itemPublishSectionTitle';

src/enums/index.ts

@@ -8,7 +8,6 @@ enum TreePreventSelection {
 
 enum ItemActionTabs {
   Settings = 'settings',
-  Dashboard = 'dashboard',
   Library = 'library',
   Sharing = 'sharing',
 }

src/env.d.ts

@@ -10,6 +10,7 @@ interface ImportMetaEnv {
   readonly VITE_GRAASP_LIBRARY_HOST?: string;
   readonly VITE_GRAASP_ANALYZER_HOST?: string;
   readonly VITE_H5P_INTEGRATION_URL?: string;
+  readonly VITE_GRAASP_ASSETS_URL?: string;
   readonly VITE_SENTRY_ENV: string;
   readonly VITE_SENTRY_DSN: string;
   readonly VITE_GA_MEASUREMENT_ID: string;

vite.config.ts

@@ -58,9 +58,6 @@ const config = ({ mode }: { mode: string }): UserConfigExport => {
         '@': resolve(__dirname, 'src'),
       },
     },
-    define: {
-      'process.env.REACT_APP_GRAASP_ASSETS_URL': `"${process.env.VITE_GRAASP_ASSETS_URL}"`,
-    },
   });
 };
 export default config;

yarn.lock

@@ -1618,7 +1618,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/cache@npm:^11.11.0":
+"@emotion/cache@npm:11.11.0, @emotion/cache@npm:^11.11.0":
   version: 11.11.0
   resolution: "@emotion/cache@npm:11.11.0"
   dependencies:
@@ -2125,9 +2125,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@graasp/ui@npm:3.3.0":
-  version: 3.3.0
-  resolution: "@graasp/ui@npm:3.3.0"
+"@graasp/ui@npm:3.3.1":
+  version: 3.3.1
+  resolution: "@graasp/ui@npm:3.3.1"
   dependencies:
     "@graasp/sdk": 1.1.3
     clsx: 2.0.0
@@ -2163,7 +2163,7 @@ __metadata:
       optional: true
     ag-grid-react:
       optional: true
-  checksum: a1d2f7735c959ae662aaae47be4f2a89b1561041dce07c069135b8f7ab0ff81efc68849787f7d4e6bec6833fccb7c445ec0d8265ccc4da664f7f4ff721847960
+  checksum: 1fee38056662a914aee7aed22aeba1836a4c64f2b6422e0bafcd6f6773eae1eb6634019c07a4469b92bc4ef05737b2e696f3c4706c5f2b4d12b87099cad9a104
   languageName: node
   linkType: hard
 
@@ -7456,13 +7456,14 @@ __metadata:
     "@commitlint/cli": 17.7.0
     "@commitlint/config-conventional": 17.7.0
     "@cypress/code-coverage": 3.11.0
+    "@emotion/cache": 11.11.0
     "@emotion/react": 11.11.1
     "@emotion/styled": 11.11.0
     "@graasp/chatbox": 2.0.0
     "@graasp/query-client": 1.3.2
     "@graasp/sdk": 1.2.0
     "@graasp/translations": 1.18.1
-    "@graasp/ui": 3.3.0
+    "@graasp/ui": 3.3.1
     "@mui/icons-material": 5.14.3
     "@mui/lab": 5.0.0-alpha.138
     "@mui/material": 5.14.4
@@ -7535,6 +7536,7 @@ __metadata:
     react-router-dom: 6.14.2
     react-toastify: 9.1.3
     rollup-plugin-visualizer: 5.9.2
+    stylis: 4.3.0
     stylis-plugin-rtl: 2.1.1
     typescript: 5.1.6
     uuid: 9.0.0
@@ -12341,6 +12343,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"stylis@npm:4.3.0":
+  version: 4.3.0
+  resolution: "stylis@npm:4.3.0"
+  checksum: 6120de3f03eacf3b5adc8e7919c4cca991089156a6badc5248752a3088106afaaf74996211a6817a7760ebeadca09004048eea31875bd8d4df51386365c50025
+  languageName: node
+  linkType: hard
+
 "substyle@npm:^9.1.0":
   version: 9.4.1
   resolution: "substyle@npm:9.4.1"