@adaptabletools/adaptable-plugin-ipushpull 22.0.1 → 22.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adaptabletools/adaptable-plugin-ipushpull",
-  "version": "22.0.1",
+  "version": "22.0.3",
   "description": "",
   "homepage": "http://www.adaptabletools.com/",
   "author": {
@@ -9,12 +9,10 @@
   },
   "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"
   },
   "type": "module",

package/src/IPushPullApiImpl.d.ts

@@ -1,8 +1,9 @@
 import { ApiBase } from '@adaptabletools/adaptable/src/Api/Implementation/ApiBase';
 import { IPushPullDomain, IPushPullReport, IPushPullSchedule } from '@adaptabletools/adaptable/src/AdaptableState/IPushPullState';
 import { IPushPullApi } from '@adaptabletools/adaptable/src/Api/IPushPullApi';
-import { IPushPullPluginOptions } from '@adaptabletools/adaptable/src/AdaptableOptions/IPushPullPluginOptions';
+import { IPushPullPluginOptions } from './IPushPullPluginOptions';
 import { IAdaptable } from '@adaptabletools/adaptable/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

@@ -4,7 +4,7 @@ import * as IPushPullRedux from './Redux/ActionReducers/IPushPullRedux';
 import ArrayExtensions from '@adaptabletools/adaptable/src/Utilities/Extensions/ArrayExtensions';
 import Helper from '@adaptabletools/adaptable/src/Utilities/Helpers/Helper';
 export class IPushPullApiImpl extends 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

@@ -16,60 +16,58 @@ export class PushPullModule extends AdaptableModuleBase {
             setTimeout(() => {
                 this.throttledRecomputeAndSendLiveDataEvent = throttle(() => 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 !== 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 !== 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 !== 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 !== 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 === 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 === SELECTED_DATA_REPORT) {
+                        this.throttledRecomputeAndSendLiveDataEvent();
                     }
-                });
-                this.api.eventApi.on('RowSelectionChanged', () => {
-                    if (this.getIPPApi().isIPushPullLiveDataRunning()) {
-                        let currentLiveIPushPullReport = this.getIPPApi().getCurrentLiveIPushPullReport();
-                        if (currentLiveIPushPullReport &&
-                            currentLiveIPushPullReport.ReportName === SELECTED_DATA_REPORT) {
-                            this.throttledRecomputeAndSendLiveDataEvent();
-                        }
+                }
+            });
+            this.api.eventApi.on('RowSelectionChanged', () => {
+                if (this.getIPPApi().isIPushPullLiveDataRunning()) {
+                    let currentLiveIPushPullReport = this.getIPPApi().getCurrentLiveIPushPullReport();
+                    if (currentLiveIPushPullReport &&
+                        currentLiveIPushPullReport.ReportName === SELECTED_DATA_REPORT) {
+                        this.throttledRecomputeAndSendLiveDataEvent();
                     }
-                });
-            }
+                }
+            });
         });
     }
     getViewAccessLevel() {

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

@@ -0,0 +1,39 @@
+import { IAdaptable } from '@adaptabletools/adaptable/src/AdaptableInterfaces/IAdaptable';
+import { IIPushPullService } from './Interface/IIPushPullService';
+import { IPushPullDomain } from '@adaptabletools/adaptable/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,202 @@
+import StringExtensions from '@adaptabletools/adaptable/src/Utilities/Extensions/StringExtensions';
+import { buildPageContentPayload, getThemeStyles, } from '../../ipushpull-client';
+export var ServiceStatus;
+(function (ServiceStatus) {
+    ServiceStatus["Unknown"] = "Unknown";
+    ServiceStatus["Disconnected"] = "Disconnected";
+    ServiceStatus["Connected"] = "Connected";
+    ServiceStatus["Error"] = "Error";
+})(ServiceStatus || (ServiceStatus = {}));
+export 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.IsNotNullOrEmpty(userName) &&
+                            StringExtensions.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 = 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 = 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;
+        }
+    }
+}

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/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 @@
+export {};

package/src/View/IPushPullAddPagePopup.js

@@ -4,15 +4,14 @@ import * as PopupRedux from '@adaptabletools/adaptable/src/Redux/ActionsReducers
 import * as IPushPullRedux from '../Redux/ActionReducers/IPushPullRedux';
 import { StringExtensions } from '@adaptabletools/adaptable/src/Utilities/Extensions/StringExtensions';
 import FormLayout, { FormRow } from '@adaptabletools/adaptable/src/components/FormLayout';
-import Input from '@adaptabletools/adaptable/src/components/Input';
+import AdaptableInput from '@adaptabletools/adaptable/src/View/Components/AdaptableInput';
 import SimpleButton from '@adaptabletools/adaptable/src/components/SimpleButton';
-import FlexWithFooter from '@adaptabletools/adaptable/src/components/FlexWithFooter';
 import { PanelWithImage } from '@adaptabletools/adaptable/src/View/Components/Panels/PanelWithImage';
 import { usePopupContext } from '@adaptabletools/adaptable/src/View/Components/Popups/AdaptablePopup/PopupContext';
 import ErrorBox from '@adaptabletools/adaptable/src/components/ErrorBox';
 import HelpBlock from '@adaptabletools/adaptable/src/components/HelpBlock';
 import { Flex } from '@adaptabletools/adaptable/src/components/Flex';
-import Dropdown from '@adaptabletools/adaptable/src/components/Dropdown';
+import { Select } from '@adaptabletools/adaptable/src/components/Select';
 import { EMPTY_STRING, EMPTY_ARRAY, } from '@adaptabletools/adaptable/src/Utilities/Constants/GeneralConstants';
 import ArrayExtensions from '@adaptabletools/adaptable/src/Utilities/Extensions/ArrayExtensions';
 const IPushPullAddPageComponent = (props) => {
@@ -36,11 +35,11 @@ const IPushPullAddPageComponent = (props) => {
         setState({ ...state, Page: e.value });
     };
     const onFolderChanged = (folderName) => {
-        if (StringExtensions.IsNotNullOrEmpty(folderName) && folderName !== 'Select Folder') {
-            let avaialablePages = props.IPushPullDomainsPages.find((f) => f.Name == folderName).Pages;
+        if (StringExtensions.IsNotNullOrEmpty(folderName)) {
+            let availablePages = props.IPushPullDomainsPages.find((f) => f.Name == folderName)?.Pages ?? [];
             setState({
                 Folder: folderName,
-                AvailablePages: avaialablePages,
+                AvailablePages: availablePages,
                 Page: EMPTY_STRING,
                 ErrorMessage: EMPTY_STRING,
             });
@@ -60,29 +59,27 @@ const IPushPullAddPageComponent = (props) => {
             value: iPushPullDomain.Name,
         };
     });
-    return (React.createElement(PanelWithImage, { header: "Add ipushpull Page", glyphicon: "newpage", variant: "primary", style: { height: '100%' } },
-        React.createElement(FlexWithFooter, { as: "form", onSubmit: (e) => {
+    return (React.createElement(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, { tone: "neutral", variant: "text", tooltip: "Close", onClick: (e) => {
-                        e.stopPropagation();
-                        hidePopup();
-                    } }, "CLOSE"),
-                React.createElement("div", { style: { flex: 1 } }),
-                React.createElement(SimpleButton, { tone: "accent", variant: "raised", type: "submit", disabled: StringExtensions.IsNullOrEmpty(state.Folder) ||
-                        StringExtensions.IsNullOrEmpty(state.Page), icon: 'check' }, "Add Page")) },
+            } },
             React.createElement(Flex, { flexDirection: "column", className: "twa:p-2 twa:m-2" },
                 React.createElement(HelpBlock, { className: "twa:mb-1" }, "Select a folder and then choose the name of the new ipushpull page it should contain."),
                 React.createElement(FormLayout, { className: "twa:m-3" },
-                    React.createElement(FormRow, { label: "Folder:" },
-                        React.createElement(Dropdown, { 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(FormRow, { label: "Folder" },
+                        React.createElement(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(FormRow, { label: "Page" },
-                        React.createElement(Input, { className: "twa:w-1/2", type: "text", placeholder: "Page Name", value: state.Page, onChange: onPageNameChange })),
+                        React.createElement(AdaptableInput, { className: "twa:w-1/2", type: "text", placeholder: "Page Name", value: state.Page, disabled: StringExtensions.IsNullOrEmpty(state.Folder), onChange: onPageNameChange })),
                     state.ErrorMessage ? (React.createElement(FormRow, { label: "" },
-                        React.createElement(ErrorBox, null, state.ErrorMessage))) : null)))));
+                        React.createElement(ErrorBox, null, state.ErrorMessage))) : null)),
+            React.createElement(Flex, { className: "twa:p-2", justifyContent: "space-between" },
+                React.createElement(SimpleButton, { tone: "neutral", variant: "outlined", tooltip: "Close", onClick: (e) => {
+                        e.stopPropagation();
+                        hidePopup();
+                    } }, "CLOSE"),
+                React.createElement(SimpleButton, { tone: "accent", variant: "raised", type: "submit", disabled: StringExtensions.IsNullOrEmpty(state.Folder) ||
+                        StringExtensions.IsNullOrEmpty(state.Page), icon: 'check' }, "Add Page")))));
 };
 function mapStateToProps(state) {
     return {

package/src/View/IPushPullLoginPopup.js

@@ -5,9 +5,8 @@ import * as PopupRedux from '@adaptabletools/adaptable/src/Redux/ActionsReducers
 import * as IPushPullRedux from '../Redux/ActionReducers/IPushPullRedux';
 import { StringExtensions } from '@adaptabletools/adaptable/src/Utilities/Extensions/StringExtensions';
 import FormLayout, { FormRow } from '@adaptabletools/adaptable/src/components/FormLayout';
-import Input from '@adaptabletools/adaptable/src/components/Input';
+import AdaptableInput from '@adaptabletools/adaptable/src/View/Components/AdaptableInput';
 import SimpleButton from '@adaptabletools/adaptable/src/components/SimpleButton';
-import FlexWithFooter from '@adaptabletools/adaptable/src/components/FlexWithFooter';
 import { PanelWithImage } from '@adaptabletools/adaptable/src/View/Components/Panels/PanelWithImage';
 import { usePopupContext } from '@adaptabletools/adaptable/src/View/Components/Popups/AdaptablePopup/PopupContext';
 import ErrorBox from '@adaptabletools/adaptable/src/components/ErrorBox';
@@ -32,28 +31,26 @@ const IPushPullLoginComponent = (props) => {
         const e = event.target;
         setState({ ...state, Password: e.value });
     };
-    return (React.createElement(PanelWithImage, { header: "ipushpull Login Details", glyphicon: "login", variant: "primary", style: { height: '100%' } },
-        React.createElement(FlexWithFooter, { as: "form", onSubmit: (e) => {
+    return (React.createElement(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, { tone: "neutral", variant: "text", tooltip: "Close", onClick: (e) => {
-                        e.stopPropagation();
-                        hidePopup();
-                    } }, "CLOSE"),
-                React.createElement("div", { style: { flex: 1 } }),
-                React.createElement(SimpleButton, { tone: "accent", variant: "raised", type: "submit", disabled: StringExtensions.IsNullOrEmpty(state.Password), icon: 'check' }, "Login")) },
+            } },
             React.createElement(Flex, { flexDirection: "column", className: "twa:p-2 twa:m-2" },
                 React.createElement(HelpBlock, { className: "twa:mb-1" }, "Login to ipushpull using your login (email address) and password."),
                 React.createElement(FormLayout, { className: "twa:m-3" },
-                    React.createElement(FormRow, { label: "ipushpull login:" },
-                        React.createElement(Input, { className: "twa:w-full", type: "email", placeholder: "Email address", value: state.Login, onChange: onLoginChange })),
-                    React.createElement(FormRow, { label: "ipushpull password:" },
-                        React.createElement(Input, { className: "twa:w-full", type: "password", placeholder: "Password", value: state.Password, onChange: onPasswordChange })),
+                    React.createElement(FormRow, { label: "User" },
+                        React.createElement(AdaptableInput, { className: "twa:w-full", type: "email", placeholder: "Email address", value: state.Login, onChange: onLoginChange })),
+                    React.createElement(FormRow, { label: "Password" },
+                        React.createElement(AdaptableInput, { className: "twa:w-full", type: "password", placeholder: "Password", value: state.Password, onChange: onPasswordChange })),
                     props.pushpullLoginErrorMessage ? (React.createElement(FormRow, { label: "" },
-                        React.createElement(ErrorBox, null, props.pushpullLoginErrorMessage))) : null)))));
+                        React.createElement(ErrorBox, null, props.pushpullLoginErrorMessage))) : null)),
+            React.createElement(Flex, { className: "twa:p-2", justifyContent: "space-between" },
+                React.createElement(SimpleButton, { tone: "neutral", variant: "outlined", tooltip: "Close", onClick: (e) => {
+                        e.stopPropagation();
+                        hidePopup();
+                    } }, "CLOSE"),
+                React.createElement(SimpleButton, { tone: "accent", variant: "raised", type: "submit", disabled: StringExtensions.IsNullOrEmpty(state.Password), icon: 'check' }, "Login")))));
 };
 function mapStateToProps(state) {
     return {