implement prompt (#4698)

scripts/core/get-superdesk-api-implementation.tsx

@@ -120,6 +120,7 @@ import {getSortedFields, getSortedFieldsFiltered} from 'apps/authoring/preview/u
 import {editor3ToOperationalFormat} from 'apps/authoring-react/fields/editor3';
 import {prepareSuperdeskQuery} from './helpers/universal-query';
 import {showPopup} from 'superdesk-ui-framework/react';
+import {ui} from './ui-utils';
 
 export function openArticle(
     id: IArticle['_id'],
@@ -418,6 +419,7 @@ export function getSuperdeskApiImplementation(
                 title: title ?? gettext('Confirm'),
                 message,
             }),
+            prompt: ui.prompt,
             showIgnoreCancelSaveDialog,
             notify: notify,
             framework: {

scripts/core/prompt-modal.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import {Button, Input, Modal, Spacer} from 'superdesk-ui-framework/react';
+import {gettext} from './utils';
+
+interface IProps {
+    label: string;
+    closeModal(result: {value: string | null}): void;
+    okButtonText?: string;
+    cancelButtonText?: string;
+}
+
+interface IState {
+    value: string;
+}
+
+export class PromptModal extends React.Component<IProps, IState> {
+    constructor(props: IProps) {
+        super(props);
+
+        this.state = {
+            value: '',
+        };
+    }
+    render() {
+        return (
+            <Modal
+                position="top"
+                visible
+                onHide={() => this.props.closeModal({value: null})}
+                footerTemplate={
+                    (
+                        <Spacer h gap="4" justifyContent="end" noWrap>
+                            <Button
+                                type="default"
+                                text={this.props.cancelButtonText ?? gettext('Cancel')}
+                                onClick={() => this.props.closeModal({value: null})}
+                            />
+                            <Button
+                                type="primary"
+                                text={this.props.okButtonText ?? gettext('Ok')}
+                                onClick={() => {
+                                    this.props.closeModal({value: this.state.value});
+                                }}
+                            />
+                        </Spacer>
+                    )
+                }
+            >
+                <Input
+                    label={this.props.label}
+                    type="text"
+                    value={this.state.value}
+                    onChange={(value) => {
+                        this.setState({value});
+                    }}
+                />
+            </Modal>
+        );
+    }
+}

scripts/core/superdesk-api.d.ts

@@ -2843,6 +2843,12 @@ declare module 'superdesk-api' {
         initialState?: any;
     }
 
+    export interface IPromptOptions {
+        inputLabel: string;
+        okButtonText?: string;
+        cancelButtonText?: string;
+    }
+
     export type ISuperdesk = DeepReadonly<{
         dataApi: IDataApi,
         dataApiByEntity: {
@@ -2895,6 +2901,7 @@ declare module 'superdesk-api' {
             showModal: (Component: React.ComponentType<{closeModal(): void;}>, containerClass?: string) => Promise<void>;
             alert(message: string): Promise<void>;
             confirm(message: string, title?: string): Promise<boolean>;
+            prompt(options: IPromptOptions): Promise<string>
             showIgnoreCancelSaveDialog(props: IIgnoreCancelSaveProps): Promise<IIgnoreCancelSaveResponse>;
             notify: {
                 info(text: string, displayDuration?: number, options?: INotifyMessageOptions): void;

scripts/core/ui-utils.tsx

@@ -1,8 +1,10 @@
+import React from 'react';
 import {showModal} from '@superdesk/common';
 import {Modal} from 'superdesk-ui-framework/react';
-import React from 'react';
 import ng from 'core/services/ng';
 import {gettext} from './utils';
+import {PromptModal} from './prompt-modal';
+import {IPromptOptions} from 'superdesk-api';
 
 export const ui = {
     alert: (message: string) => (
@@ -18,6 +20,26 @@ export const ui = {
             );
         })
     ),
+    prompt: (options: IPromptOptions): Promise<string> => {
+        return new Promise((resolve) => {
+            showModal(({closeModal}) => {
+                return (
+                    <PromptModal
+                        closeModal={({value}) => {
+                            closeModal();
+
+                            if (value != null) {
+                                resolve(value);
+                            }
+                        }}
+                        label={options.inputLabel}
+                        okButtonText={options.okButtonText}
+                        cancelButtonText={options.cancelButtonText}
+                    />
+                );
+            });
+        });
+    },
     confirm: (message: string, title?: string) => new Promise((resolve) => {
         ng.get('modal').confirm(message, title ?? gettext('Confirm'))
             .then(() => resolve(true))