<commit_before>/** @jsx jsx **/
import { jsx, css } from "@emotion/core";

import * as React from "react";
import { useL10n } from "../../react_components/l10nHooks";
import BloomButton from "../../react_components/bloomButton";
import { BloomApi } from "../../utils/bloomApi";
import {
    BloomDialog,
    DialogMiddle,
    DialogBottomButtons,
    DialogBottomLeftButtons,
    DialogTitle,
    IBloomDialogProps
} from "../../react_components/BloomDialog/BloomDialog";
import {
    DialogCancelButton,
    DialogFolderChooser,
    WarningBox
} from "../../react_components/BloomDialog/commonDialogComponents";

import { kVerticalSpacingBetweenDialogSections } from "../../bloomMaterialUITheme";
import { ExperimentalBadge } from "../../react_components/experimentalBadge";
import { Div } from "../../react_components/l10nComponents";
import { useEventLaunchedBloomDialog } from "../../react_components/BloomDialog/BloomDialogPlumbing";

export const SpreadsheetExportDialogLauncher: React.FunctionComponent<{}> = () => {
    const {
        openingEvent,
        closeDialog,
        propsForBloomDialog
    } = useEventLaunchedBloomDialog("SpreadsheetExportDialog");

    // We extract the core here so that we can avoid running most of the hook code when this dialog is not visible.
    return propsForBloomDialog.open ? (
        <SpreadsheetExportDialog
            closeDialog={closeDialog}
            propsForBloomDialog={propsForBloomDialog}
            folderPath={openingEvent.folderPath}
        />
    ) : null;
};

const SpreadsheetExportDialog: React.FunctionComponent<{
    closeDialog: () => void;
    propsForBloomDialog: IBloomDialogProps;
    folderPath: string;
}> = props => {
    const title = useL10n(
        "Export to Spreadsheet...",
        "CollectionTab.BookMenu.ExportToSpreadsheet" // same as the menu
    );
    const chooseFolderDescription = useL10n(
        "Target folder for the spreadsheet and images:",
        "Spreadsheet.ExportDialog.folderLabel"
    );
    const [folderPath, setFolderPath] = React.useState(props.folderPath);

    return (
        <BloomDialog {...props.propsForBloomDialog}>
            <DialogTitle title={title}>
                <ExperimentalBadge />
            </DialogTitle>
            <DialogMiddle
                css={css`
                    // our geckofx60 doesn't support this. So there is a <p></p> below instead
                    // gap: ${kVerticalSpacingBetweenDialogSections};
                `}
            >
                <Div l10nKey="Spreadsheet.ExportDialog.Description">
                    Bloom will create a spreadsheet containing the text and
                    images of this book. You can then make changes, like making
                    new translations. Finally, use the “Import &amp; Update from
                    Spreadsheet...” command to bring your changes back in.
                </Div>
                <p></p>
                <WarningBox>
                    <span>
                        This feature is still a work in progress. Though you can{" "}
                        <em>export</em> all books, Bloom cannot <em>import</em>{" "}
                        books with these features: Quizzes and other Activities.
                        Image descriptions are neither exported nor imported.
                        There may be other export and import limitations we are
                        not aware of.
                    </span>
                </WarningBox>
                <p></p>
                <div>{chooseFolderDescription}</div>

                <DialogFolderChooser
                    path={folderPath}
                    setPath={setFolderPath}
                    description={chooseFolderDescription}
                    forOutput={true}
                />
            </DialogMiddle>
            <DialogBottomButtons>
                <DialogBottomLeftButtons>
                    {/* Currently we don't really have any help for this.

                    <HelpLink
                        helpId="Tasks/Basic_tasks/Export_to_Spreadsheet.htm"
                        l10nKey="Common.Help"
                    >
                        Help
                    </HelpLink> */}
                </DialogBottomLeftButtons>
                <BloomButton
                    enabled={true}
                    variant="contained"
                    l10nKey="Spreadsheet.ExportDialog.ExportButton"
                    hasText={true}<commit_msg>Add SS warning about exporting with deleted vertical bar (BL-1150)5<commit_after>/** @jsx jsx **/
import { jsx, css } from "@emotion/core";

import * as React from "react";
import { useL10n } from "../../react_components/l10nHooks";
import BloomButton from "../../react_components/bloomButton";
import { BloomApi } from "../../utils/bloomApi";
import {
    BloomDialog,
    DialogMiddle,
    DialogBottomButtons,
    DialogBottomLeftButtons,
    DialogTitle,
    IBloomDialogProps
} from "../../react_components/BloomDialog/BloomDialog";
import {
    DialogCancelButton,
    DialogFolderChooser,
    WarningBox
} from "../../react_components/BloomDialog/commonDialogComponents";

import { kVerticalSpacingBetweenDialogSections } from "../../bloomMaterialUITheme";
import { ExperimentalBadge } from "../../react_components/experimentalBadge";
import { Div } from "../../react_components/l10nComponents";
import { useEventLaunchedBloomDialog } from "../../react_components/BloomDialog/BloomDialogPlumbing";

export const SpreadsheetExportDialogLauncher: React.FunctionComponent<{}> = () => {
    const {
        openingEvent,
        closeDialog,
        propsForBloomDialog
    } = useEventLaunchedBloomDialog("SpreadsheetExportDialog");

    // We extract the core here so that we can avoid running most of the hook code when this dialog is not visible.
    return propsForBloomDialog.open ? (
        <SpreadsheetExportDialog
            closeDialog={closeDialog}
            propsForBloomDialog={propsForBloomDialog}
            folderPath={openingEvent.folderPath}
        />
    ) : null;
};

const SpreadsheetExportDialog: React.FunctionComponent<{
    closeDialog: () => void;
    propsForBloomDialog: IBloomDialogProps;
    folderPath: string;
}> = props => {
    const title = useL10n(
        "Export to Spreadsheet...",
        "CollectionTab.BookMenu.ExportToSpreadsheet" // same as the menu
    );
    const chooseFolderDescription = useL10n(
        "Target folder for the spreadsheet and images:",
        "Spreadsheet.ExportDialog.folderLabel"
    );
    const [folderPath, setFolderPath] = React.useState(props.folderPath);

    return (
        <BloomDialog {...props.propsForBloomDialog}>
            <DialogTitle title={title}>
                <ExperimentalBadge />
            </DialogTitle>
            <DialogMiddle
                css={css`
                    // our geckofx60 doesn't support this. So there is a <p></p> below instead
                    // gap: ${kVerticalSpacingBetweenDialogSections};
                `}
            >
                <Div l10nKey="Spreadsheet.ExportDialog.Description">
                    Bloom will create a spreadsheet containing the text and
                    images of this book. You can then make changes, like making
                    new translations. Finally, use the “Import &amp; Update from
                    Spreadsheet...” command to bring your changes back in.
                </Div>
                <p></p>
                <WarningBox>
                    <span>
                        This feature is still a work in progress. Though you can{" "}
                        <em>export</em> all books, Bloom cannot <em>import</em>{" "}
                        books with these features: Quizzes and other Activities.
                        Image descriptions are neither exported nor imported. If
                        you change the text after recording audio and before
                        exporting, the audio may not import correctly. There may
                        be other export and import limitations we are not aware
                        of.
                    </span>
                </WarningBox>
                <p></p>
                <div>{chooseFolderDescription}</div>

                <DialogFolderChooser
                    path={folderPath}
                    setPath={setFolderPath}
                    description={chooseFolderDescription}
                    forOutput={true}
                />
            </DialogMiddle>
            <DialogBottomButtons>
                <DialogBottomLeftButtons>
                    {/* Currently we don't really have any help for this.

                    <HelpLink
                        helpId="Tasks/Basic_tasks/Export_to_Spreadsheet.htm"
                        l10nKey="Common.Help"
                    >
                        Help
                    </HelpLink> */}
                </DialogBottomLeftButtons>
                <BloomButton
                    enabled={true}
                    variant="contained"
                    l10nKey="Spreadsheet.ExportDialog.ExportButton"
                    hasText={true}
{'fraction_non_alphanumeric': 0.09204061578774976, 'fraction_numerical': 0.004476471230483677, 'mean_word_length': 1.7850410459106112, 'pattern_counts': {'":': 0, '<': 71, '<?xml version=': 0, '>': 75, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3752812', 'n_tokens_mistral': 2315, 'n_tokens_neox': 2175, 'n_words': 573}