@adaptabletools/adaptable-plugin-ipushpull-cjs 22.0.1 → 22.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adaptabletools/adaptable-plugin-ipushpull-cjs",
-  "version": "22.0.1",
+  "version": "22.0.3",
   "description": "",
   "homepage": "http://www.adaptabletools.com/",
   "author": {
@@ -10,12 +10,10 @@
   "main": "src/index.js",
   "typings": "src/index.d.ts",
   "dependencies": {
-    "ipushpull-js": "^2.25.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-redux": "^9.2.0",
     "redux": "^5.0.1",
     "styled-components": "^4.4.1",
-    "tinycolor2": "^1.4.2",
     "tslib": "^2.8.1"
   },
   "peerDependencies": {}

package/src/IPushPullApiImpl.d.ts

@@ -1,8 +1,9 @@
 import { ApiBase } from "@adaptabletools/adaptable-cjs/src/Api/Implementation/ApiBase";
 import { IPushPullDomain, IPushPullReport, IPushPullSchedule } from "@adaptabletools/adaptable-cjs/src/AdaptableState/IPushPullState";
 import { IPushPullApi } from "@adaptabletools/adaptable-cjs/src/Api/IPushPullApi";
-import { IPushPullPluginOptions } from "@adaptabletools/adaptable-cjs/src/AdaptableOptions/IPushPullPluginOptions";
+import { IPushPullPluginOptions } from './IPushPullPluginOptions';
 import { IAdaptable } from "@adaptabletools/adaptable-cjs/src/AdaptableInterfaces/IAdaptable";
+import { IPushPullClient } from './ipushpull-client';
 export declare class IPushPullApiImpl extends ApiBase implements IPushPullApi {
     private ippInstance;
     private ippService;
@@ -14,8 +15,8 @@ export declare class IPushPullApiImpl extends ApiBase implements IPushPullApi {
     getIPushPullPassword(): string | undefined;
     getAutoLogin(): boolean;
     getCurrentLiveIPushPullReport(): IPushPullReport | undefined;
-    setIPushPullInstance(ippInstance: any): void;
-    getIPushPullInstance(): any;
+    setIPushPullInstance(ippInstance: IPushPullClient): void;
+    getIPushPullInstance(): IPushPullClient | null;
     sendSnapshot(iPushPullReport: IPushPullReport): void;
     startLiveData(iPushPullReport: IPushPullReport): void;
     stopLiveData(): void;

package/src/IPushPullApiImpl.js

@@ -8,7 +8,7 @@ const IPushPullRedux = tslib_1.__importStar(require("./Redux/ActionReducers/IPus
 const ArrayExtensions_1 = tslib_1.__importDefault(require("@adaptabletools/adaptable-cjs/src/Utilities/Extensions/ArrayExtensions"));
 const Helper_1 = tslib_1.__importDefault(require("@adaptabletools/adaptable-cjs/src/Utilities/Helpers/Helper"));
 class IPushPullApiImpl extends ApiBase_1.ApiBase {
-    ippInstance;
+    ippInstance = null;
     ippService = null;
     options;
     constructor(_adaptable, options) {

package/src/IPushPullPluginOptions.d.ts

@@ -0,0 +1,59 @@
+/**
+ * Connection config for the ipushpull REST API.
+ *
+ * Only `api_key` and `api_secret` are required -- `api_url` defaults to the
+ * ipushpull test environment (`https://test.ipushpull.com/api/1.0`).
+ */
+export interface IPushPullConfig {
+    /**
+     * Base URL for the ipushpull REST API
+     *
+     * @defaultValue 'https://test.ipushpull.com/api/1.0'
+     */
+    api_url?: string;
+    /** OAuth Client ID */
+    api_key: string;
+    /** OAuth Client Secret */
+    api_secret: string;
+}
+/**
+ * Options available in ipushpull plugin; allows users to collaborate and share data in powerful ways
+ */
+export interface IPushPullPluginOptions {
+    /**
+     * The config required to run ipushpull; use your ipushpull credentials
+     */
+    ippConfig?: IPushPullConfig;
+    /**
+     * User's ipushpull user name (usually email address); if supplied, pre-populates the login screen's username textbox
+     */
+    username?: string;
+    /**
+     * The user's ipushpull password; if supplied, pre-populates the login screen's password textbox
+     */
+    password?: string;
+    /**
+     * How many miliseconds AdapTable should throttle when sending data updates to ipushpull
+     *
+     * @defaultValue 2000
+     */
+    throttleTime?: number;
+    /**
+     * Whether AdapTable should try log in to ipushpull automatically at start-up
+     *
+     * @defaultValue false
+     */
+    autoLogin?: boolean;
+    /**
+     * Whether AdapTable will include System Reports (e.g. 'All Data', 'Selected Cells' etc) in the ipushpull toolbar dropdown
+     *
+     * @defaultValue true
+     */
+    includeSystemReports?: boolean;
+    /**
+     * The color theme to use when styling data pushed to ipushpull pages
+     *
+     * @defaultValue derived from Adaptable's current theme (lightTheme or darkTheme)
+     */
+    cellStyles?: 'lightTheme' | 'darkTheme';
+}

package/src/Module/PushPullModule.js

@@ -20,60 +20,58 @@ class PushPullModule extends AdaptableModuleBase_1.AdaptableModuleBase {
             setTimeout(() => {
                 this.throttledRecomputeAndSendLiveDataEvent = (0, throttle_1.default)(() => this.sendNewLiveData(), this.getThrottleTimeFromState());
             }, 1000);
-            if (this.getIPPApi().isIPushPullRunning()) {
-                // if a piece of data has updated then update any live reports except cell or row selected where the data change is relevant
-                // currently we DONT send deltas - we simply send everything to ipushpull every time a relevant change happens
-                this.api.internalApi
-                    .getDataService()
-                    .on('CellDataChanged', (cellDataChangedInfo) => {
-                    const api = this.getIPPApi();
-                    const exportApi = this.api.exportApi;
-                    if (api.isIPushPullLiveDataRunning()) {
-                        let currentLiveIPushPullReport = api.getCurrentLiveIPushPullReport();
-                        if (currentLiveIPushPullReport &&
-                            currentLiveIPushPullReport.ReportName !== GeneralConstants_1.SELECTED_DATA_REPORT &&
-                            exportApi.internalApi.isDataChangeInReport(cellDataChangedInfo, this.getCurrentReport())) {
-                            this.throttledRecomputeAndSendLiveDataEvent();
-                        }
-                    }
-                });
-                // if the grid has refreshed then update all live reports
-                this.adaptable._on('GridRefreshed', () => {
-                    if (this.getIPPApi().isIPushPullLiveDataRunning()) {
+            // if a piece of data has updated then update any live reports except cell or row selected where the data change is relevant
+            // currently we DONT send deltas - we simply send everything to ipushpull every time a relevant change happens
+            this.api.internalApi
+                .getDataService()
+                .on('CellDataChanged', (cellDataChangedInfo) => {
+                const api = this.getIPPApi();
+                const exportApi = this.api.exportApi;
+                if (api.isIPushPullLiveDataRunning()) {
+                    let currentLiveIPushPullReport = api.getCurrentLiveIPushPullReport();
+                    if (currentLiveIPushPullReport &&
+                        currentLiveIPushPullReport.ReportName !== GeneralConstants_1.SELECTED_DATA_REPORT &&
+                        exportApi.internalApi.isDataChangeInReport(cellDataChangedInfo, this.getCurrentReport())) {
                         this.throttledRecomputeAndSendLiveDataEvent();
                     }
-                });
-                // if the grid filters have changed then update any live reports except cell or row selected
-                this.adaptable._on('AdapTableFiltersApplied', () => {
-                    // Rerun all reports except selected cells / rows when filter changes
-                    if (this.getIPPApi().isIPushPullLiveDataRunning()) {
-                        let currentLiveIPushPullReport = this.getIPPApi().getCurrentLiveIPushPullReport();
-                        if (currentLiveIPushPullReport &&
-                            currentLiveIPushPullReport.ReportName !== GeneralConstants_1.SELECTED_DATA_REPORT) {
-                            this.throttledRecomputeAndSendLiveDataEvent();
-                        }
+                }
+            });
+            // if the grid has refreshed then update all live reports
+            this.adaptable._on('GridRefreshed', () => {
+                if (this.getIPPApi().isIPushPullLiveDataRunning()) {
+                    this.throttledRecomputeAndSendLiveDataEvent();
+                }
+            });
+            // if the grid filters have changed then update any live reports except cell or row selected
+            this.adaptable._on('AdapTableFiltersApplied', () => {
+                // Rerun all reports except selected cells / rows when filter changes
+                if (this.getIPPApi().isIPushPullLiveDataRunning()) {
+                    let currentLiveIPushPullReport = this.getIPPApi().getCurrentLiveIPushPullReport();
+                    if (currentLiveIPushPullReport &&
+                        currentLiveIPushPullReport.ReportName !== GeneralConstants_1.SELECTED_DATA_REPORT) {
+                        this.throttledRecomputeAndSendLiveDataEvent();
                     }
-                });
-                // if grid selection has changed and the ipushpull Live report is 'Selected Cells' or 'Selected Rows' then send updated data
-                this.api.eventApi.on('CellSelectionChanged', () => {
-                    if (this.getIPPApi().isIPushPullLiveDataRunning()) {
-                        let currentLiveIPushPullReport = this.getIPPApi().getCurrentLiveIPushPullReport();
-                        if (currentLiveIPushPullReport &&
-                            currentLiveIPushPullReport.ReportName === GeneralConstants_1.SELECTED_DATA_REPORT) {
-                            this.throttledRecomputeAndSendLiveDataEvent();
-                        }
+                }
+            });
+            // if grid selection has changed and the ipushpull Live report is 'Selected Cells' or 'Selected Rows' then send updated data
+            this.api.eventApi.on('CellSelectionChanged', () => {
+                if (this.getIPPApi().isIPushPullLiveDataRunning()) {
+                    let currentLiveIPushPullReport = this.getIPPApi().getCurrentLiveIPushPullReport();
+                    if (currentLiveIPushPullReport &&
+                        currentLiveIPushPullReport.ReportName === GeneralConstants_1.SELECTED_DATA_REPORT) {
+                        this.throttledRecomputeAndSendLiveDataEvent();
                     }
-                });
-                this.api.eventApi.on('RowSelectionChanged', () => {
-                    if (this.getIPPApi().isIPushPullLiveDataRunning()) {
-                        let currentLiveIPushPullReport = this.getIPPApi().getCurrentLiveIPushPullReport();
-                        if (currentLiveIPushPullReport &&
-                            currentLiveIPushPullReport.ReportName === GeneralConstants_1.SELECTED_DATA_REPORT) {
-                            this.throttledRecomputeAndSendLiveDataEvent();
-                        }
+                }
+            });
+            this.api.eventApi.on('RowSelectionChanged', () => {
+                if (this.getIPPApi().isIPushPullLiveDataRunning()) {
+                    let currentLiveIPushPullReport = this.getIPPApi().getCurrentLiveIPushPullReport();
+                    if (currentLiveIPushPullReport &&
+                        currentLiveIPushPullReport.ReportName === GeneralConstants_1.SELECTED_DATA_REPORT) {
+                        this.throttledRecomputeAndSendLiveDataEvent();
                     }
-                });
-            }
+                }
+            });
         });
     }
     getViewAccessLevel() {

package/src/Utilities/Services/IPushPullService.d.ts

@@ -0,0 +1,39 @@
+import { IAdaptable } from "@adaptabletools/adaptable-cjs/src/AdaptableInterfaces/IAdaptable";
+import { IIPushPullService } from './Interface/IIPushPullService';
+import { IPushPullDomain } from "@adaptabletools/adaptable-cjs/src/AdaptableState/InternalState";
+import { IPushPullPluginOptions } from '../../IPushPullPluginOptions';
+export declare enum ServiceStatus {
+    Unknown = "Unknown",
+    Disconnected = "Disconnected",
+    Connected = "Connected",
+    Error = "Error"
+}
+export declare class IPushPullService implements IIPushPullService {
+    adaptable: IAdaptable;
+    private client;
+    private status;
+    private cellStylesOption;
+    private pages;
+    private pageNameToId;
+    private folderNameToId;
+    constructor(adaptable: IAdaptable, cellStyles?: IPushPullPluginOptions['cellStyles']);
+    getIPushPullStatus(): ServiceStatus;
+    private getIPPApi;
+    /**
+     * Derives the IPushPull theme from Adaptable's current theme at call-time,
+     * respecting the 'os' theme by checking `prefers-color-scheme`.
+     */
+    private deriveDefaultTheme;
+    /**
+     * Returns the resolved IPushPull theme, honouring the `cellStyles` option.
+     * If `cellStyles` is a string, it's used directly.
+     * If not set, the theme is derived from Adaptable's current theme.
+     */
+    private getResolvedTheme;
+    login(login: string, password: string): Promise<any>;
+    getDomainPages(): Promise<IPushPullDomain[]>;
+    loadPage(folderIPP: string, pageIPP: string): Promise<void>;
+    unloadPage(page: string): void;
+    addNewPage(folderId: number, page: string): Promise<any>;
+    pushData(page: string, data: any[]): Promise<void>;
+}

package/src/Utilities/Services/IPushPullService.js

@@ -0,0 +1,207 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IPushPullService = exports.ServiceStatus = void 0;
+const tslib_1 = require("tslib");
+const StringExtensions_1 = tslib_1.__importDefault(require("@adaptabletools/adaptable-cjs/src/Utilities/Extensions/StringExtensions"));
+const ipushpull_client_1 = require("../../ipushpull-client");
+var ServiceStatus;
+(function (ServiceStatus) {
+    ServiceStatus["Unknown"] = "Unknown";
+    ServiceStatus["Disconnected"] = "Disconnected";
+    ServiceStatus["Connected"] = "Connected";
+    ServiceStatus["Error"] = "Error";
+})(ServiceStatus || (exports.ServiceStatus = ServiceStatus = {}));
+class IPushPullService {
+    adaptable;
+    client = null;
+    status = ServiceStatus.Unknown;
+    cellStylesOption;
+    pages = new Map();
+    pageNameToId = new Map();
+    folderNameToId = new Map();
+    constructor(adaptable, cellStyles) {
+        this.adaptable = adaptable;
+        this.adaptable = adaptable;
+        this.cellStylesOption = cellStyles;
+        this.adaptable.api.eventApi.on('AdaptableReady', async () => {
+            this.getIPPApi().clearIPushPullInternalState();
+            this.getIPPApi().setIPushPullAvailableOff();
+            if (!this.client) {
+                let instance = this.getIPPApi().getIPushPullInstance();
+                if (instance) {
+                    this.client = instance;
+                    this.getIPPApi().setIPushPullAvailableOn();
+                    let autoLogin = this.getIPPApi().getAutoLogin();
+                    if (autoLogin) {
+                        let userName = this.getIPPApi().getIPushPullUsername();
+                        let password = this.getIPPApi().getIPushPullPassword();
+                        if (StringExtensions_1.default.IsNotNullOrEmpty(userName) &&
+                            StringExtensions_1.default.IsNotNullOrEmpty(password)) {
+                            try {
+                                this.getIPPApi().loginToIPushPull(userName, password);
+                            }
+                            catch (err) {
+                                this.getIPPApi().setIPushPullRunningOff();
+                            }
+                        }
+                    }
+                }
+            }
+        });
+    }
+    getIPushPullStatus() {
+        if (!this.client) {
+            return ServiceStatus.Error;
+        }
+        return this.status;
+    }
+    getIPPApi() {
+        return this.adaptable.api.pluginsApi.getipushpullPluginApi();
+    }
+    /**
+     * Derives the IPushPull theme from Adaptable's current theme at call-time,
+     * respecting the 'os' theme by checking `prefers-color-scheme`.
+     */
+    deriveDefaultTheme() {
+        const themeName = this.adaptable.api.themeApi.getCurrentTheme();
+        if (themeName === 'os') {
+            const preferred = this.adaptable.api.themeApi.internalApi.getDOMPreferredColorScheme();
+            return preferred === 'dark' ? 'darkTheme' : 'lightTheme';
+        }
+        const themeObj = this.adaptable.api.themeApi.getCurrentThemeObject();
+        if (themeObj?.Variant === 'dark') {
+            return 'darkTheme';
+        }
+        if (themeName === 'dark') {
+            return 'darkTheme';
+        }
+        return 'lightTheme';
+    }
+    /**
+     * Returns the resolved IPushPull theme, honouring the `cellStyles` option.
+     * If `cellStyles` is a string, it's used directly.
+     * If not set, the theme is derived from Adaptable's current theme.
+     */
+    getResolvedTheme() {
+        const defaultCellStyles = this.deriveDefaultTheme();
+        if (!this.cellStylesOption) {
+            return defaultCellStyles;
+        }
+        return this.cellStylesOption;
+    }
+    async login(login, password) {
+        if (!this.client) {
+            return Promise.reject('No ipushpull instance found!');
+        }
+        try {
+            const result = await this.client.login(login, password);
+            this.status = ServiceStatus.Connected;
+            this.adaptable.logger.success('Logged in to ipushpull.');
+            return result;
+        }
+        catch (err) {
+            this.status = ServiceStatus.Error;
+            const message = err.data ? err.data.error_description || err.message : err.message;
+            this.getIPPApi().setIPushPullLoginErrorMessage(message);
+            throw message;
+        }
+    }
+    async getDomainPages() {
+        if (!this.client) {
+            return Promise.reject('No ipushpull instance found.');
+        }
+        try {
+            const domains = await this.client.getDomainsAndPages();
+            this.adaptable.logger.success('Retrieved ipushpull folder and page info.');
+            this.folderNameToId.clear();
+            this.pageNameToId.clear();
+            const result = domains.map((domain) => {
+                this.folderNameToId.set(domain.name, domain.id);
+                const writablePages = domain.pages
+                    .filter((page) => page.special_page_type == 0 && page.write_access)
+                    .map((page) => {
+                    this.pageNameToId.set(`${domain.name}/${page.name}`, page.id);
+                    return page.name;
+                });
+                return {
+                    Name: domain.name,
+                    FolderId: domain.id,
+                    Pages: writablePages,
+                };
+            });
+            return result;
+        }
+        catch (error) {
+            this.adaptable.logger.error('Failed to retrieve folders and pages from ipushpull.', error);
+            throw error.message ?? error;
+        }
+    }
+    async loadPage(folderIPP, pageIPP) {
+        if (!this.client) {
+            return Promise.reject('No ipushpull instance found.');
+        }
+        const folderId = this.folderNameToId.get(folderIPP);
+        const pageId = this.pageNameToId.get(`${folderIPP}/${pageIPP}`);
+        if (folderId == null || pageId == null) {
+            throw new Error(`Could not resolve IDs for folder "${folderIPP}" / page "${pageIPP}".`);
+        }
+        await this.client.getPageContent(folderId, pageId);
+        this.pages.set(pageIPP, { folderId, pageId });
+        this.adaptable.logger.info(`Page ready: "${pageIPP}".`);
+    }
+    unloadPage(page) {
+        if (this.pages.has(page)) {
+            this.pages.delete(page);
+            this.adaptable.logger.info(`Page unloaded: "${page}".`);
+        }
+    }
+    async addNewPage(folderId, page) {
+        if (!this.client) {
+            return Promise.reject('No ipushpull instance found.');
+        }
+        try {
+            await this.client.createPage(folderId, page);
+            let message = `Page "${page}" created successfully.`;
+            this.adaptable.api.alertApi.showAlertSuccess('ipushpull', message);
+            this.adaptable.api.internalApi.hidePopupScreen();
+            return this.getIPPApi().retrieveIPushPullDomainsFromIPushPull();
+        }
+        catch (err) {
+            this.adaptable.logger.error(`Failed to create page "${page}": ${err}`);
+        }
+    }
+    async pushData(page, data) {
+        const pageRef = this.pages.get(page);
+        if (!pageRef || !this.client) {
+            throw new Error(`Page "${page}" is not loaded or client is not available.`);
+        }
+        const themeStyles = (0, ipushpull_client_1.getThemeStyles)(this.getResolvedTheme());
+        const cellData = data.map((row, rowIndex) => row.map((cell) => {
+            let style;
+            if (rowIndex === 0) {
+                style = themeStyles.headerStyle;
+            }
+            else if (rowIndex % 2 === 1) {
+                style = themeStyles.rowStyle;
+            }
+            else {
+                style = themeStyles.altRowStyle;
+            }
+            return {
+                value: cell,
+                formatted_value: cell,
+                style,
+            };
+        }));
+        const payload = (0, ipushpull_client_1.buildPageContentPayload)(cellData);
+        try {
+            await this.client.updatePageContent(pageRef.folderId, pageRef.pageId, payload);
+            this.adaptable.logger.success(`Data pushed for ipushpull page "${page}".`);
+        }
+        catch (err) {
+            this.adaptable.logger.error(`Failed to push data for ipushpull page "${page}".`);
+            throw err;
+        }
+    }
+}
+exports.IPushPullService = IPushPullService;

package/src/Utilities/Services/Interface/{IPushPullService.d.ts → IIPushPullService.d.ts}

@@ -1,6 +1,6 @@
-import { ServiceStatus } from '../PushPullService';
+import { ServiceStatus } from '../IPushPullService';
 import { IPushPullDomain } from "@adaptabletools/adaptable-cjs/src/AdaptableState/InternalState";
-export interface IPushPullService {
+export interface IIPushPullService {
     login(login: string, password: string): Promise<any>;
     getDomainPages(): Promise<IPushPullDomain[]>;
     loadPage(folderIPP: string, pageIPP: string): Promise<void>;

package/src/Utilities/Services/Interface/IIPushPullService.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/src/View/IPushPullAddPagePopup.js

@@ -8,15 +8,14 @@ const PopupRedux = tslib_1.__importStar(require("@adaptabletools/adaptable-cjs/s
 const IPushPullRedux = tslib_1.__importStar(require("../Redux/ActionReducers/IPushPullRedux"));
 const StringExtensions_1 = require("@adaptabletools/adaptable-cjs/src/Utilities/Extensions/StringExtensions");
 const FormLayout_1 = tslib_1.__importStar(require("@adaptabletools/adaptable-cjs/src/components/FormLayout"));
-const Input_1 = tslib_1.__importDefault(require("@adaptabletools/adaptable-cjs/src/components/Input"));
+const AdaptableInput_1 = tslib_1.__importDefault(require("@adaptabletools/adaptable-cjs/src/View/Components/AdaptableInput"));
 const SimpleButton_1 = tslib_1.__importDefault(require("@adaptabletools/adaptable-cjs/src/components/SimpleButton"));
-const FlexWithFooter_1 = tslib_1.__importDefault(require("@adaptabletools/adaptable-cjs/src/components/FlexWithFooter"));
 const PanelWithImage_1 = require("@adaptabletools/adaptable-cjs/src/View/Components/Panels/PanelWithImage");
 const PopupContext_1 = require("@adaptabletools/adaptable-cjs/src/View/Components/Popups/AdaptablePopup/PopupContext");
 const ErrorBox_1 = tslib_1.__importDefault(require("@adaptabletools/adaptable-cjs/src/components/ErrorBox"));
 const HelpBlock_1 = tslib_1.__importDefault(require("@adaptabletools/adaptable-cjs/src/components/HelpBlock"));
 const Flex_1 = require("@adaptabletools/adaptable-cjs/src/components/Flex");
-const Dropdown_1 = tslib_1.__importDefault(require("@adaptabletools/adaptable-cjs/src/components/Dropdown"));
+const Select_1 = require("@adaptabletools/adaptable-cjs/src/components/Select");
 const GeneralConstants_1 = require("@adaptabletools/adaptable-cjs/src/Utilities/Constants/GeneralConstants");
 const ArrayExtensions_1 = tslib_1.__importDefault(require("@adaptabletools/adaptable-cjs/src/Utilities/Extensions/ArrayExtensions"));
 const IPushPullAddPageComponent = (props) => {
@@ -40,11 +39,11 @@ const IPushPullAddPageComponent = (props) => {
         setState({ ...state, Page: e.value });
     };
     const onFolderChanged = (folderName) => {
-        if (StringExtensions_1.StringExtensions.IsNotNullOrEmpty(folderName) && folderName !== 'Select Folder') {
-            let avaialablePages = props.IPushPullDomainsPages.find((f) => f.Name == folderName).Pages;
+        if (StringExtensions_1.StringExtensions.IsNotNullOrEmpty(folderName)) {
+            let availablePages = props.IPushPullDomainsPages.find((f) => f.Name == folderName)?.Pages ?? [];
             setState({
                 Folder: folderName,
-                AvailablePages: avaialablePages,
+                AvailablePages: availablePages,
                 Page: GeneralConstants_1.EMPTY_STRING,
                 ErrorMessage: GeneralConstants_1.EMPTY_STRING,
             });
@@ -64,29 +63,27 @@ const IPushPullAddPageComponent = (props) => {
             value: iPushPullDomain.Name,
         };
     });
-    return (React.createElement(PanelWithImage_1.PanelWithImage, { header: "Add ipushpull Page", glyphicon: "newpage", variant: "primary", style: { height: '100%' } },
-        React.createElement(FlexWithFooter_1.default, { as: "form", onSubmit: (e) => {
+    return (React.createElement(PanelWithImage_1.PanelWithImage, { header: "Add ipushpull Page", glyphicon: "newpage", variant: "primary" },
+        React.createElement("form", { onSubmit: (e) => {
                 e.preventDefault();
                 onSubmit();
-            }, footerProps: {
-                className: 'twa:text-4',
-            }, footer: React.createElement(React.Fragment, null,
-                React.createElement(SimpleButton_1.default, { tone: "neutral", variant: "text", tooltip: "Close", onClick: (e) => {
-                        e.stopPropagation();
-                        hidePopup();
-                    } }, "CLOSE"),
-                React.createElement("div", { style: { flex: 1 } }),
-                React.createElement(SimpleButton_1.default, { tone: "accent", variant: "raised", type: "submit", disabled: StringExtensions_1.StringExtensions.IsNullOrEmpty(state.Folder) ||
-                        StringExtensions_1.StringExtensions.IsNullOrEmpty(state.Page), icon: 'check' }, "Add Page")) },
+            } },
             React.createElement(Flex_1.Flex, { flexDirection: "column", className: "twa:p-2 twa:m-2" },
                 React.createElement(HelpBlock_1.default, { className: "twa:mb-1" }, "Select a folder and then choose the name of the new ipushpull page it should contain."),
                 React.createElement(FormLayout_1.default, { className: "twa:m-3" },
-                    React.createElement(FormLayout_1.FormRow, { label: "Folder:" },
-                        React.createElement(Dropdown_1.default, { disabled: availableFolders.length == 0, options: availableFolders, className: "ab-Popup__IPushPull__select twa:min-w-[50%] twa:mr-2", onChange: (folder) => onFolderChanged(folder), value: state.Folder ? state.Folder : null, placeholder: "Select Folder" })),
+                    React.createElement(FormLayout_1.FormRow, { label: "Folder" },
+                        React.createElement(Select_1.Select, { disabled: availableFolders.length == 0, options: availableFolders, className: "ab-Popup__IPushPull__select twa:min-w-[50%] twa:mr-2", onChange: (folder) => onFolderChanged(folder), value: state.Folder || undefined, placeholder: "Select Folder", isClearable: true })),
                     React.createElement(FormLayout_1.FormRow, { label: "Page" },
-                        React.createElement(Input_1.default, { className: "twa:w-1/2", type: "text", placeholder: "Page Name", value: state.Page, onChange: onPageNameChange })),
+                        React.createElement(AdaptableInput_1.default, { className: "twa:w-1/2", type: "text", placeholder: "Page Name", value: state.Page, disabled: StringExtensions_1.StringExtensions.IsNullOrEmpty(state.Folder), onChange: onPageNameChange })),
                     state.ErrorMessage ? (React.createElement(FormLayout_1.FormRow, { label: "" },
-                        React.createElement(ErrorBox_1.default, null, state.ErrorMessage))) : null)))));
+                        React.createElement(ErrorBox_1.default, null, state.ErrorMessage))) : null)),
+            React.createElement(Flex_1.Flex, { className: "twa:p-2", justifyContent: "space-between" },
+                React.createElement(SimpleButton_1.default, { tone: "neutral", variant: "outlined", tooltip: "Close", onClick: (e) => {
+                        e.stopPropagation();
+                        hidePopup();
+                    } }, "CLOSE"),
+                React.createElement(SimpleButton_1.default, { tone: "accent", variant: "raised", type: "submit", disabled: StringExtensions_1.StringExtensions.IsNullOrEmpty(state.Folder) ||
+                        StringExtensions_1.StringExtensions.IsNullOrEmpty(state.Page), icon: 'check' }, "Add Page")))));
 };
 function mapStateToProps(state) {
     return {

package/src/View/IPushPullLoginPopup.js

@@ -9,9 +9,8 @@ const PopupRedux = tslib_1.__importStar(require("@adaptabletools/adaptable-cjs/s
 const IPushPullRedux = tslib_1.__importStar(require("../Redux/ActionReducers/IPushPullRedux"));
 const StringExtensions_1 = require("@adaptabletools/adaptable-cjs/src/Utilities/Extensions/StringExtensions");
 const FormLayout_1 = tslib_1.__importStar(require("@adaptabletools/adaptable-cjs/src/components/FormLayout"));
-const Input_1 = tslib_1.__importDefault(require("@adaptabletools/adaptable-cjs/src/components/Input"));
+const AdaptableInput_1 = tslib_1.__importDefault(require("@adaptabletools/adaptable-cjs/src/View/Components/AdaptableInput"));
 const SimpleButton_1 = tslib_1.__importDefault(require("@adaptabletools/adaptable-cjs/src/components/SimpleButton"));
-const FlexWithFooter_1 = tslib_1.__importDefault(require("@adaptabletools/adaptable-cjs/src/components/FlexWithFooter"));
 const PanelWithImage_1 = require("@adaptabletools/adaptable-cjs/src/View/Components/Panels/PanelWithImage");
 const PopupContext_1 = require("@adaptabletools/adaptable-cjs/src/View/Components/Popups/AdaptablePopup/PopupContext");
 const ErrorBox_1 = tslib_1.__importDefault(require("@adaptabletools/adaptable-cjs/src/components/ErrorBox"));
@@ -36,28 +35,26 @@ const IPushPullLoginComponent = (props) => {
         const e = event.target;
         setState({ ...state, Password: e.value });
     };
-    return (React.createElement(PanelWithImage_1.PanelWithImage, { header: "ipushpull Login Details", glyphicon: "login", variant: "primary", style: { height: '100%' } },
-        React.createElement(FlexWithFooter_1.default, { as: "form", onSubmit: (e) => {
+    return (React.createElement(PanelWithImage_1.PanelWithImage, { header: "ipushpull Login Details", glyphicon: "login", variant: "primary" },
+        React.createElement("form", { onSubmit: (e) => {
                 e.preventDefault();
                 onSubmit();
-            }, footerProps: {
-                className: 'twa:text-4',
-            }, footer: React.createElement(React.Fragment, null,
-                React.createElement(SimpleButton_1.default, { tone: "neutral", variant: "text", tooltip: "Close", onClick: (e) => {
-                        e.stopPropagation();
-                        hidePopup();
-                    } }, "CLOSE"),
-                React.createElement("div", { style: { flex: 1 } }),
-                React.createElement(SimpleButton_1.default, { tone: "accent", variant: "raised", type: "submit", disabled: StringExtensions_1.StringExtensions.IsNullOrEmpty(state.Password), icon: 'check' }, "Login")) },
+            } },
             React.createElement(Flex_1.Flex, { flexDirection: "column", className: "twa:p-2 twa:m-2" },
                 React.createElement(HelpBlock_1.default, { className: "twa:mb-1" }, "Login to ipushpull using your login (email address) and password."),
                 React.createElement(FormLayout_1.default, { className: "twa:m-3" },
-                    React.createElement(FormLayout_1.FormRow, { label: "ipushpull login:" },
-                        React.createElement(Input_1.default, { className: "twa:w-full", type: "email", placeholder: "Email address", value: state.Login, onChange: onLoginChange })),
-                    React.createElement(FormLayout_1.FormRow, { label: "ipushpull password:" },
-                        React.createElement(Input_1.default, { className: "twa:w-full", type: "password", placeholder: "Password", value: state.Password, onChange: onPasswordChange })),
+                    React.createElement(FormLayout_1.FormRow, { label: "User" },
+                        React.createElement(AdaptableInput_1.default, { className: "twa:w-full", type: "email", placeholder: "Email address", value: state.Login, onChange: onLoginChange })),
+                    React.createElement(FormLayout_1.FormRow, { label: "Password" },
+                        React.createElement(AdaptableInput_1.default, { className: "twa:w-full", type: "password", placeholder: "Password", value: state.Password, onChange: onPasswordChange })),
                     props.pushpullLoginErrorMessage ? (React.createElement(FormLayout_1.FormRow, { label: "" },
-                        React.createElement(ErrorBox_1.default, null, props.pushpullLoginErrorMessage))) : null)))));
+                        React.createElement(ErrorBox_1.default, null, props.pushpullLoginErrorMessage))) : null)),
+            React.createElement(Flex_1.Flex, { className: "twa:p-2", justifyContent: "space-between" },
+                React.createElement(SimpleButton_1.default, { tone: "neutral", variant: "outlined", tooltip: "Close", onClick: (e) => {
+                        e.stopPropagation();
+                        hidePopup();
+                    } }, "CLOSE"),
+                React.createElement(SimpleButton_1.default, { tone: "accent", variant: "raised", type: "submit", disabled: StringExtensions_1.StringExtensions.IsNullOrEmpty(state.Password), icon: 'check' }, "Login")))));
 };
 function mapStateToProps(state) {
     return {