SCAL-237376 Initial Commit for powerpoint add-in

packages/slides/manifest.xml

@@ -0,0 +1,85 @@
+<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
+<OfficeApp xmlns="http://schemas.microsoft.com/office/appforoffice/1.1" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bt="http://schemas.microsoft.com/office/officeappbasictypes/1.0" xmlns:ov="http://schemas.microsoft.com/office/taskpaneappversionoverrides" xsi:type="TaskPaneApp">
+  <Id>58b7b7ec-ecf6-4803-a6be-dbf22303c630</Id>
+  <Version>1.0.0.0</Version>
+  <ProviderName>Contoso</ProviderName>
+  <DefaultLocale>en-US</DefaultLocale>
+  <DisplayName DefaultValue="ThoughtSpot"/>
+  <Description DefaultValue="A template to get started."/>
+  <IconUrl DefaultValue="https://localhost:3000/assets/ts_logo_32x32.png"/>
+  <HighResolutionIconUrl DefaultValue="https://localhost:3000/assets/ts_logo_64x64.png"/>
+  <SupportUrl DefaultValue="https://www.contoso.com/help"/>
+  <AppDomains>
+    <AppDomain>https://localhost:3000</AppDomain>
+  </AppDomains>
+  <Hosts>
+    <Host Name="Presentation"/>
+  </Hosts>
+  <DefaultSettings>
+    <SourceLocation DefaultValue="https://localhost:3000/powerpoint.html"/>
+  </DefaultSettings>
+  <Permissions>ReadWriteDocument</Permissions>
+  <VersionOverrides xmlns="http://schemas.microsoft.com/office/taskpaneappversionoverrides" xsi:type="VersionOverridesV1_0">
+    <Hosts>
+      <Host xsi:type="Presentation">
+        <DesktopFormFactor>
+          <GetStarted>
+            <Title resid="GetStarted.Title"/>
+            <Description resid="GetStarted.Description"/>
+            <LearnMoreUrl resid="GetStarted.LearnMoreUrl"/>
+          </GetStarted>
+          <FunctionFile resid="Commands.Url"/>
+          <ExtensionPoint xsi:type="PrimaryCommandSurface">
+            <OfficeTab id="TabHome">
+              <Group id="CommandsGroup">
+                <Label resid="CommandsGroup.Label"/>
+                <Icon>
+                  <bt:Image size="16" resid="Icon.16x16"/>
+                  <bt:Image size="32" resid="Icon.32x32"/>
+                  <bt:Image size="80" resid="Icon.80x80"/>
+                </Icon>
+                <Control xsi:type="Button" id="TaskpaneButton">
+                  <Label resid="TaskpaneButton.Label"/>
+                  <Supertip>
+                    <Title resid="TaskpaneButton.Label"/>
+                    <Description resid="TaskpaneButton.Tooltip"/>
+                  </Supertip>
+                  <Icon>
+                    <bt:Image size="16" resid="Icon.16x16"/>
+                    <bt:Image size="32" resid="Icon.32x32"/>
+                    <bt:Image size="80" resid="Icon.80x80"/>
+                  </Icon>
+                  <Action xsi:type="ShowTaskpane">
+                    <TaskpaneId>ButtonId1</TaskpaneId>
+                    <SourceLocation resid="Taskpane.Url"/>
+                  </Action>
+                </Control>
+              </Group>
+            </OfficeTab>
+          </ExtensionPoint>
+        </DesktopFormFactor>
+      </Host>
+    </Hosts>
+    <Resources>
+      <bt:Images>
+        <bt:Image id="Icon.16x16" DefaultValue="https://localhost:3000/assets/ts_logo_16x16.png"/>
+        <bt:Image id="Icon.32x32" DefaultValue="https://localhost:3000/assets/ts_logo_32x32.png"/>
+        <bt:Image id="Icon.80x80" DefaultValue="https://localhost:3000/assets/ts_logo_80x80.png"/>
+      </bt:Images>
+      <bt:Urls>
+        <bt:Url id="GetStarted.LearnMoreUrl" DefaultValue="https://go.microsoft.com/fwlink/?LinkId=276812"/>
+        <bt:Url id="Commands.Url" DefaultValue="https://localhost:3000/commands.html"/>
+        <bt:Url id="Taskpane.Url" DefaultValue="https://localhost:3000/powerpoint.html"/>
+      </bt:Urls>
+      <bt:ShortStrings>
+        <bt:String id="GetStarted.Title" DefaultValue="Congratulations!"/>
+        <bt:String id="CommandsGroup.Label" DefaultValue="Commands Group"/>
+        <bt:String id="TaskpaneButton.Label" DefaultValue="ThoughtSpot Analytics"/>
+      </bt:ShortStrings>
+      <bt:LongStrings>
+        <bt:String id="GetStarted.Description" DefaultValue="ThoughtSpot Analytics has been successfully installed."/>
+        <bt:String id="TaskpaneButton.Tooltip" DefaultValue="Click to Show a Taskpane"/>
+      </bt:LongStrings>
+    </Resources>
+  </VersionOverrides>
+</OfficeApp>

packages/slides/package.json

@@ -6,8 +6,15 @@
     "@google/clasp": "^2.4.2",
     "@preact/preset-vite": "^2.5.0",
     "@types/google-apps-script": "^1.0.57",
+    "@types/office-js": "^1.0.457",
     "@vitejs/plugin-basic-ssl": "^1.0.1",
     "npm-run-all": "^4.1.5",
+    "office-addin-cli": "^1.6.5",
+    "office-addin-debugging": "^5.1.6",
+    "office-addin-dev-certs": "^1.13.5",
+    "office-addin-lint": "^2.3.5",
+    "office-addin-manifest": "^1.13.6",
+    "office-addin-prettier-config": "^1.2.1",
     "rollup-plugin-visualizer": "^5.9.0",
     "sass": "^1.58.0",
     "vite": "^4.2.0"
@@ -23,7 +30,15 @@
     "deploy": "HOST=$SLIDES_HOST npm-run-all -p build dist",
     "lint": "eslint src/**",
     "start": "HOST=https://localhost:5173/ npm-run-all -p dist:dev vite",
+    "start-powerpoint": "HOST=https://localhost:3000/ npm-run-all -p vite-powerpoint powerpoint:debug",
+    "start-powerpoint:desktop": "HOST=https://localhost:3000/ npm-run-all -p vite-powerpoint && powerpoint:desktop",
+    "start-powerpoint:web": "HOST=https://localhost:3000/ npm-run-all -p vite-powerpoint && powerpoint:web",
+    "stop-powerpoint": "office-addin-debugging stop manifest.xml",
     "vite": "vite",
+    "vite-powerpoint": "HOST=https://localhost:3000/ vite --config vite.config.ppt.ts",
+    "powerpoint:debug": "office-addin-debugging start manifest.xml",
+    "powerpoint:desktop": "office-addin-debugging start manifest.xml desktop",
+    "powerpoint:web": "office-addin-debugging start manifest.xml web",
     "copy-index": "gsuite-shell",
     "test": "vitest run"
   },

packages/slides/src/ui/components/app.context.tsx

@@ -6,20 +6,23 @@ export interface AppConfigInterface {
   segmentIndex?: any;
   userID?: string;
   isPersonalisedViewSupported?: boolean;
+  isPowerpoint?: boolean;
 }
 
 export enum AppConfigActions {
   SEARCH_PATTERN,
   SEGMENT_INDEX,
   USER_ID,
   IS_PERSONALISED_VIEW_SUPPORTED,
+  IS_POWERPOINT,
 }
 
 const defaultAppConfigValues = {
   searchPattern: '',
   segmentIndex: listCategory.ALL,
   userID: '',
   isPersonalisedViewSupported: false,
+  isPowerpoint: false,
 };
 
 const reducer: any = (state, action) => {
@@ -44,6 +47,11 @@ const reducer: any = (state, action) => {
         ...state,
         isPersonalisedViewSupported: action.newIsPersonalisedViewSupported,
       };
+    case AppConfigActions.IS_POWERPOINT:
+      return {
+        ...state,
+        isPowerpoint: action.newIsPowerpoint,
+      };
     default:
       return state;
   }
@@ -55,8 +63,13 @@ export const AppContextProvider = ({ children }) => {
   const [state, dispatch] = React.useReducer(reducer, {
     ...defaultAppConfigValues,
   });
-  const { searchPattern, segmentIndex, userID, isPersonalisedViewSupported } =
-    state;
+  const {
+    searchPattern,
+    segmentIndex,
+    userID,
+    isPersonalisedViewSupported,
+    isPowerpoint,
+  } = state;
   const setSearchPattern = (newSearchPattern: string) => {
     dispatch({ type: AppConfigActions.SEARCH_PATTERN, newSearchPattern });
   };
@@ -77,6 +90,10 @@ export const AppContextProvider = ({ children }) => {
       newIsPersonalisedViewSupported,
     });
   };
+
+  const setIsPowerpoint = (newIsPowerpoint: boolean) => {
+    dispatch({ type: AppConfigActions.IS_POWERPOINT, newIsPowerpoint });
+  };
   return (
     <AppContext.Provider
       value={{
@@ -88,6 +105,8 @@ export const AppContextProvider = ({ children }) => {
         setUserID,
         isPersonalisedViewSupported,
         setIsPersonalisedViewSupported,
+        setIsPowerpoint,
+        isPowerpoint,
       }}
     >
       {children}

packages/slides/src/ui/components/app.tsx

@@ -5,7 +5,6 @@ import { Analytics } from '@vercel/analytics/react';
 import { I18N } from 'i18n';
 import { TSInit } from 'ts-init';
 import React from 'preact';
-import { Vertical } from 'widgets/lib/layout/flex-layout';
 import { Routes } from '../routes';
 import { Home } from './home/home';
 import { ListPage } from './listPage/listPage';
@@ -17,18 +16,18 @@ import styles from './app.module.scss';
 
 const history: any = createMemoryHistory();
 
-export function App() {
+export function App({ isPowerpoint = false }) {
   return (
     <I18N>
       <ShellContext.Provider value={defaultShellContextOptions}>
-        <TSInit>
+        <TSInit isPowerpoint={isPowerpoint}>
           <Header history={history}></Header>
           <div className={styles.content}>
             <Analytics />
             <AppContextProvider>
               <PrerenderdLiveboardProvider>
                 <Router history={history}>
-                  <Home path={Routes.HOME} />
+                  <Home path={Routes.HOME} isPowerpoint={isPowerpoint} />
                   <ListPage path={Routes.LIST} />
                   <Liveboard path={Routes.LIVEBOARD} />
                   <Answer path={Routes.ANSWER} />

packages/slides/src/ui/components/home/home.tsx

@@ -18,12 +18,17 @@ import { Routes } from '../../routes';
 import styles from './home.module.scss';
 import { getToken } from '../../services/api';
 import { updateVizType } from '../../services/services.util';
+import { useAppContext } from '../app.context';
+import { runPluginFn } from '../../../utils/plugin-utils';
+import { setToken } from '../../../utils/ppt-code';
 
-export const Home = () => {
+export const Home = ({ isPowerpoint = false }) => {
   const loader = useLoader();
   const { run } = useShellContext();
   const { t, pt } = useTranslations();
 
+  const { setIsPowerpoint } = useAppContext();
+
   const [selectedTabId, setSelectedTabId] = useState(updateVizType.MANUAL);
   const [selectedManualUpdate, setSelectedManualUpdate] = useState(
     t.SLIDES_MANUAL_UPDATE_ALL
@@ -70,13 +75,14 @@ export const Home = () => {
       }
     };
     getUserInfo();
+    setIsPowerpoint(isPowerpoint);
   }, []);
 
   useEffect(() => {
     if (isPrivileged) {
       getToken().then((token) => {
         if (token.token) {
-          run('setToken', token.token, token.ttl);
+          runPluginFn(isPowerpoint, run, setToken, token.token, token.ttl);
           setErrorMessage({
             visible: false,
             message: '',

packages/slides/src/ui/components/liveboard/liveboard.tsx

@@ -24,14 +24,16 @@ import styles from './liveboard.module.scss';
 import { getOffset, getTSLBVizLink } from '../../utils';
 import { getLBTabs, getPersonalisedViews } from '../../services/api';
 import { useAppContext } from '../app.context';
+import { addImage } from '../../../utils/ppt-code';
+import { runPluginFn } from '../../../utils/plugin-utils';
 
 const prerenderdLiveboardContext = createContext<any>({});
 
 export const Liveboard = () => {
   const [router] = useRouter();
   const { show: showLoader, hide: hideLoader } = useLoader();
   const { t } = useTranslations();
-  const { isPersonalisedViewSupported } = useAppContext();
+  const { isPersonalisedViewSupported, isPowerpoint } = useAppContext();
   const liveboardId = router?.matches?.id;
   const loader = useLoader();
   const { run } = useShellContext();
@@ -150,7 +152,7 @@ export const Liveboard = () => {
       loader.show();
       setErrorMessage({ ...errorMessage, visible: false });
       setSuccess(false);
-      run('addImage', link)
+      runPluginFn(isPowerpoint, run, addImage, link)
         .then((res) => {
           loader.hide();
           if (res === 200) {

packages/slides/src/ui/powerpoint.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Preact + TS</title>
+    <!-- Office JavaScript API -->
+    <script type="text/javascript" src="https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js"></script>
+  </head>
+  <body>
+    <div id="app" style="background-color: white;"></div>
+    <script type="module" src="/powerpoint.tsx"></script>
+    <div style="display: none"><%- iconSprite %></div>
+  </body>
+</html>

packages/slides/src/ui/powerpoint.tsx

@@ -0,0 +1,14 @@
+import { render } from 'preact';
+import './index.scss';
+import { App } from './components/app';
+
+// /* global document, Office, module, require, HTMLElement */
+
+Office.onReady((info) => {
+  if (info.host === Office.HostType.PowerPoint) {
+    console.log('PowerPoint add-in is ready', Office);
+    render(<App isPowerpoint={true} />, document.getElementById('app'));
+  } else {
+    console.error('This add-in is intended for PowerPoint only.');
+  }
+});

packages/slides/src/utils/plugin-utils.ts

@@ -0,0 +1,6 @@
+export function runPluginFn(isPowerpoint, run, fn, ...args) {
+  if (isPowerpoint) {
+    return fn(...args);
+  }
+  return run(fn.name, ...args);
+}