Remove lingui (#1874)

* remove lingui

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* babelless

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* tweak ts-loader options

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* tweak renderer webpack config

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

src/renderer/components/dock/create-resource.tsx

@@ -4,14 +4,12 @@ import React from "react";
 import jsYaml from "js-yaml";
 import { observable } from "mobx";
 import { observer } from "mobx-react";
-import { Plural, t, Trans } from "@lingui/macro";
 import { cssNames } from "../../utils";
 import { createResourceStore } from "./create-resource.store";
 import { IDockTab } from "./dock.store";
 import { EditorPanel } from "./editor-panel";
 import { InfoPanel } from "./info-panel";
 import { resourceApplierApi } from "../../api/endpoints/resource-applier.api";
-import { _i18n } from "../../i18n";
 import { JsonApiErrorParsed } from "../../api/json-api";
 import { Notifications } from "../notifications";
 
@@ -59,8 +57,8 @@ export class CreateResource extends React.Component<Props> {
     }
     const successMessage = (
       <p>
-        <Plural value={createdResources.length} one="Resource" other="Resources"/>{" "}
-        <Trans><b>{createdResources.join(", ")}</b> successfully created</Trans>
+        {createdResources.length === 1 ? "Resource" : "Resources"}{" "}
+        <b>{createdResources.join(", ")}</b> successfully created
       </p>
     );
 
@@ -79,7 +77,7 @@ export class CreateResource extends React.Component<Props> {
           tabId={tabId}
           error={error}
           submit={create}
-          submitLabel={_i18n._(t`Create`)}
+          submitLabel={`Create`}
           showNotifications={false}
         />
         <EditorPanel

src/renderer/components/dock/dock-tab.tsx

@@ -2,14 +2,12 @@ import "./dock-tab.scss";
 
 import React from "react";
 import { observer } from "mobx-react";
-import { t, Trans } from "@lingui/macro";
 import { autobind, cssNames, prevDefault } from "../../utils";
 import { dockStore, IDockTab } from "./dock.store";
 import { Tab, TabProps } from "../tabs";
 import { Icon } from "../icon";
 import { Menu, MenuItem } from "../menu";
 import { observable } from "mobx";
-import { _i18n } from "../../i18n";
 
 export interface DockTabProps extends TabProps<IDockTab> {
   moreActions?: React.ReactNode;
@@ -45,16 +43,16 @@ export class DockTab extends React.Component<DockTabProps> {
         toggleEvent="contextmenu"
       >
         <MenuItem onClick={() => closeTab(this.tabId)}>
-          <Trans>Close</Trans>
+          Close
         </MenuItem>
         <MenuItem onClick={() => closeAllTabs()} disabled={closeAllDisabled}>
-          <Trans>Close all tabs</Trans>
+          Close all tabs
         </MenuItem>
         <MenuItem onClick={() => closeOtherTabs(this.tabId)} disabled={closeOtherDisabled}>
-          <Trans>Close other tabs</Trans>
+          Close other tabs
         </MenuItem>
         <MenuItem onClick={() => closeTabsToTheRight(this.tabId)} disabled={closeRightDisabled}>
-          <Trans>Close tabs to the right</Trans>
+          Close tabs to the right
         </MenuItem>
       </Menu>
     );
@@ -70,7 +68,7 @@ export class DockTab extends React.Component<DockTabProps> {
         {!pinned && (
           <Icon
             small material="close"
-            title={_i18n._(t`Close (Ctrl+W)`)}
+            title={`Close (Ctrl+W)`}
             onClick={prevDefault(this.close)}
           />
         )}
@@ -90,4 +88,4 @@ export class DockTab extends React.Component<DockTabProps> {
       </>
     );
   }
-}
+}

src/renderer/components/dock/dock.tsx

@@ -1,7 +1,6 @@
 import "./dock.scss";
 
 import React from "react";
-import { Trans } from "@lingui/macro";
 import { observer } from "mobx-react";
 
 import { cssNames, prevDefault } from "../../utils";
@@ -100,14 +99,14 @@ export class Dock extends React.Component<Props> {
           />
           <div className="toolbar flex gaps align-center box grow">
             <div className="dock-menu box grow">
-              <MenuActions usePortal triggerIcon={{ material: "add", className: "new-dock-tab", tooltip: <Trans>New tab</Trans> }} closeOnScroll={false}>
+              <MenuActions usePortal triggerIcon={{ material: "add", className: "new-dock-tab", tooltip: "New tab" }} closeOnScroll={false}>
                 <MenuItem className="create-terminal-tab" onClick={() => createTerminalTab()}>
                   <Icon small svg="terminal" size={15} />
-                  <Trans>Terminal session</Trans>
+                  Terminal session
                 </MenuItem>
                 <MenuItem className="create-resource-tab" onClick={() => createResourceTab()}>
                   <Icon small material="create" />
-                  <Trans>Create resource</Trans>
+                  Create resource
                 </MenuItem>
               </MenuActions>
             </div>
@@ -115,12 +114,12 @@ export class Dock extends React.Component<Props> {
               <>
                 <Icon
                   material={fullSize ? "fullscreen_exit" : "fullscreen"}
-                  tooltip={fullSize ? <Trans>Exit full size mode</Trans> : <Trans>Fit to window</Trans>}
+                  tooltip={fullSize ? "Exit full size mode" : "Fit to window"}
                   onClick={toggleFillSize}
                 />
                 <Icon
                   material={`keyboard_arrow_${isOpen ? "down" : "up"}`}
-                  tooltip={isOpen ? <Trans>Minimize</Trans> : <Trans>Open</Trans>}
+                  tooltip={isOpen ? "Minimize" : "Open"}
                   onClick={toggle}
                 />
               </>

src/renderer/components/dock/edit-resource.tsx

@@ -4,7 +4,6 @@ import React from "react";
 import { autorun, observable } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 import jsYaml from "js-yaml";
-import { t, Trans } from "@lingui/macro";
 import { IDockTab } from "./dock.store";
 import { cssNames } from "../../utils";
 import { editResourceStore } from "./edit-resource.store";
@@ -12,7 +11,6 @@ import { InfoPanel } from "./info-panel";
 import { Badge } from "../badge";
 import { EditorPanel } from "./editor-panel";
 import { Spinner } from "../spinner";
-import { _i18n } from "../../i18n";
 import { apiManager } from "../../api/api-manager";
 import { KubeObject } from "../../api/kube-object";
 
@@ -80,7 +78,7 @@ export class EditResource extends React.Component<Props> {
 
     return (
       <p>
-        <Trans>{resourceType} <b>{resourceName}</b> updated.</Trans>
+        {resourceType} <b>{resourceName}</b> updated.
       </p>
     );
   };
@@ -100,13 +98,13 @@ export class EditResource extends React.Component<Props> {
           tabId={tabId}
           error={error}
           submit={save}
-          submitLabel={_i18n._(t`Save`)}
-          submittingMessage={_i18n._(t`Applying..`)}
+          submitLabel={`Save`}
+          submittingMessage={`Applying..`}
           controls={(
             <div className="resource-info flex gaps align-center">
-              <span><Trans>Kind</Trans>:</span> <Badge label={kind}/>
-              <span><Trans>Name</Trans>:</span><Badge label={getName()}/>
-              <span><Trans>Namespace</Trans>:</span> <Badge label={getNs() || "global"}/>
+              <span>Kind:</span> <Badge label={kind}/>
+              <span>Name:</span><Badge label={getName()}/>
+              <span>Namespace:</span> <Badge label={getNs() || "global"}/>
             </div>
           )}
         />

src/renderer/components/dock/info-panel.tsx

@@ -3,7 +3,6 @@ import "./info-panel.scss";
 import React, { Component, ReactNode } from "react";
 import { computed, observable, reaction } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
-import { Trans } from "@lingui/macro";
 import { cssNames } from "../../utils";
 import { Button } from "../button";
 import { Icon } from "../icon";
@@ -33,8 +32,8 @@ interface OptionalProps {
 @observer
 export class InfoPanel extends Component<Props> {
   static defaultProps: OptionalProps = {
-    submitLabel: <Trans>Submit</Trans>,
-    submittingMessage: <Trans>Submitting..</Trans>,
+    submitLabel: "Submit",
+    submittingMessage: "Submitting..",
     showButtons: true,
     showSubmitClose: true,
     showInlineInfo: true,
@@ -111,7 +110,7 @@ export class InfoPanel extends Component<Props> {
         )}
         {showButtons && (
           <>
-            <Button plain label={<Trans>Cancel</Trans>} onClick={close} />
+            <Button plain label="Cancel" onClick={close} />
             <Button
               active
               outlined={showSubmitClose}
@@ -123,7 +122,7 @@ export class InfoPanel extends Component<Props> {
             {showSubmitClose && (
               <Button
                 primary active
-                label={<Trans>{submitLabel} & Close</Trans>}
+                label={`${submitLabel} & Close`}
                 onClick={submitAndClose}
                 disabled={isDisabled}
               />

src/renderer/components/dock/install-chart.store.ts

@@ -1,10 +1,8 @@
 import { action, autorun } from "mobx";
 import { dockStore, IDockTab, TabId, TabKind } from "./dock.store";
 import { DockTabStore } from "./dock-tab.store";
-import { t } from "@lingui/macro";
 import { HelmChart, helmChartsApi } from "../../api/endpoints/helm-charts.api";
 import { IReleaseUpdateDetails } from "../../api/endpoints/helm-releases.api";
-import { _i18n } from "../../i18n";
 import { Notifications } from "../notifications";
 
 export interface IChartInstallData {
@@ -82,7 +80,7 @@ export function createInstallChartTab(chart: HelmChart, tabParams: Partial<IDock
   const { name, repo, version } = chart;
   const tab = dockStore.createTab({
     kind: TabKind.INSTALL_CHART,
-    title: _i18n._(t`Helm Install: ${repo}/${name}`),
+    title: `Helm Install: ${repo}/${name}`,
     ...tabParams
   }, false);
 

src/renderer/components/dock/install-chart.tsx

@@ -3,7 +3,6 @@ import "./install-chart.scss";
 import React, { Component } from "react";
 import { observable } from "mobx";
 import { observer } from "mobx-react";
-import { t, Trans } from "@lingui/macro";
 import { dockStore, IDockTab } from "./dock.store";
 import { InfoPanel } from "./info-panel";
 import { Badge } from "../badge";
@@ -20,7 +19,6 @@ import { Select, SelectOption } from "../select";
 import { Input } from "../input";
 import { EditorPanel } from "./editor-panel";
 import { navigate } from "../../navigation";
-import { _i18n } from "../../i18n";
 
 interface Props {
   tab: IDockTab;
@@ -106,7 +104,7 @@ export class InstallChart extends Component<Props> {
     installChartStore.details.setData(this.tabId, details);
 
     return (
-      <p><Trans>Chart Release <b>{details.release.name}</b> successfully created.</Trans></p>
+      <p>Chart Release <b>{details.release.name}</b> successfully created.</p>
     );
   };
 
@@ -123,21 +121,21 @@ export class InstallChart extends Component<Props> {
           <p>
             <Icon material="check" big sticker />
           </p>
-          <p><Trans>Installation complete!</Trans></p>
+          <p>Installation complete!</p>
           <div className="flex gaps align-center">
             <Button
               autoFocus primary
-              label={_i18n._(t`View Helm Release`)}
+              label={`View Helm Release`}
               onClick={prevDefault(this.viewRelease)}
             />
             <Button
               plain active
-              label={_i18n._(t`Show Notes`)}
+              label={`Show Notes`}
               onClick={() => this.showNotes = true}
             />
           </div>
           <LogsDialog
-            title={_i18n._(t`Helm Chart Install`)}
+            title={`Helm Chart Install`}
             isOpen={this.showNotes}
             close={() => this.showNotes = false}
             logs={this.releaseDetails.log}
@@ -149,9 +147,9 @@ export class InstallChart extends Component<Props> {
     const { repo, name, version, namespace, releaseName } = chartData;
     const panelControls = (
       <div className="install-controls flex gaps align-center">
-        <span><Trans>Chart</Trans></span>
-        <Badge label={`${repo}/${name}`} title={_i18n._(t`Repo/Name`)} />
-        <span><Trans>Version</Trans></span>
+        <span>Chart</span>
+        <Badge label={`${repo}/${name}`} title={`Repo/Name`} />
+        <span>Version</span>
         <Select
           className="chart-version"
           value={version}
@@ -160,7 +158,7 @@ export class InstallChart extends Component<Props> {
           menuPlacement="top"
           themeName="outlined"
         />
-        <span><Trans>Namespace</Trans></span>
+        <span>Namespace</span>
         <NamespaceSelect
           showIcons={false}
           menuPlacement="top"
@@ -169,8 +167,8 @@ export class InstallChart extends Component<Props> {
           onChange={this.onNamespaceChange}
         />
         <Input
-          placeholder={_i18n._(t`Name (optional)`)}
-          title={_i18n._(t`Release name`)}
+          placeholder={`Name (optional)`}
+          title={`Release name`}
           maxLength={50}
           value={releaseName}
           onChange={this.onReleaseNameChange}
@@ -185,8 +183,8 @@ export class InstallChart extends Component<Props> {
           controls={panelControls}
           error={this.error}
           submit={install}
-          submitLabel={_i18n._(t`Install`)}
-          submittingMessage={_i18n._(t`Installing...`)}
+          submitLabel={`Install`}
+          submittingMessage={`Installing...`}
           showSubmitClose={false}
         />
         <EditorPanel

src/renderer/components/dock/pod-log-controls.tsx

@@ -2,11 +2,9 @@ import "./pod-log-controls.scss";
 import React from "react";
 import { observer } from "mobx-react";
 import { IPodLogsData, podLogsStore } from "./pod-logs.store";
-import { t, Trans } from "@lingui/macro";
 import { Select, SelectOption } from "../select";
 import { Badge } from "../badge";
 import { Icon } from "../icon";
-import { _i18n } from "../../i18n";
 import { cssNames, saveFileDialog } from "../../utils";
 import { Pod } from "../../api/endpoints";
 import { PodLogSearch, PodLogSearchProps } from "./pod-log-search";
@@ -59,13 +57,13 @@ export const PodLogControls = observer((props: Props) => {
 
     return [
       {
-        label: _i18n._(t`Containers`),
+        label: `Containers`,
         options: containers.map(container => {
           return { value: container.name };
         }),
       },
       {
-        label: _i18n._(t`Init Containers`),
+        label: `Init Containers`,
         options: initContainers.map(container => {
           return { value: container.name };
         }),
@@ -81,9 +79,9 @@ export const PodLogControls = observer((props: Props) => {
 
   return (
     <div className="PodLogControls flex gaps align-center">
-      <span><Trans>Pod</Trans>:</span> <Badge label={pod.getName()}/>
-      <span><Trans>Namespace</Trans>:</span> <Badge label={pod.getNs()}/>
-      <span><Trans>Container</Trans></span>
+      <span>Pod:</span> <Badge label={pod.getName()}/>
+      <span>Namespace:</span> <Badge label={pod.getNs()}/>
+      <span>Container</span>
       <Select
         options={containerSelectOptions()}
         value={{ value: selectedContainer.name }}
@@ -94,7 +92,7 @@ export const PodLogControls = observer((props: Props) => {
       <div className="time-range">
         {since && (
           <>
-            <Trans>Since</Trans>{" "}
+            Since{" "}
             <b>{new Date(since[0]).toLocaleString()}</b>
           </>
         )}
@@ -104,18 +102,18 @@ export const PodLogControls = observer((props: Props) => {
           material="av_timer"
           onClick={toggleTimestamps}
           className={cssNames("timestamps-icon", { active: showTimestamps })}
-          tooltip={`${showTimestamps ? _i18n._(t`Hide`) : _i18n._(t`Show`)} ${_i18n._(t`timestamps`)}`}
+          tooltip={`${showTimestamps ? `Hide` : `Show`} timestamps`}
         />
         <Icon
           material="history"
           onClick={togglePrevious}
           className={cssNames("undo-icon", { active: previous })}
-          tooltip={(previous ? _i18n._(t`Show current logs`) : _i18n._(t`Show previous terminated container logs`))}
+          tooltip={(previous ? `Show current logs` : `Show previous terminated container logs`)}
         />
         <Icon
           material="get_app"
           onClick={downloadLogs}
-          tooltip={_i18n._(t`Save`)}
+          tooltip={`Save`}
           className="download-icon"
         />
         <PodLogSearch
@@ -125,4 +123,4 @@ export const PodLogControls = observer((props: Props) => {
       </div>
     </div>
   );
-});
+});

src/renderer/components/dock/pod-log-list.tsx

@@ -4,7 +4,6 @@ import React from "react";
 import AnsiUp from "ansi_up";
 import DOMPurify from "dompurify";
 import debounce from "lodash/debounce";
-import { Trans } from "@lingui/macro";
 import { action, computed, observable } from "mobx";
 import { observer } from "mobx-react";
 import { Align, ListOnScrollProps } from "react-window";
@@ -213,7 +212,7 @@ export class PodLogList extends React.Component<Props> {
     if (!this.logs.length) {
       return (
         <div className="PodLogList flex box grow align-center justify-center">
-          <Trans>There are no logs available for container</Trans>
+          There are no logs available for container
         </div>
       );
     }
@@ -251,8 +250,8 @@ const JumpToBottom = ({ onClick }: JumpToBottomProps) => {
         onClick();
       }}
     >
-      <Trans>Jump to bottom</Trans>
+      Jump to bottom
       <Icon material="expand_more" />
     </Button>
   );
-};
+};

src/renderer/components/dock/pod-log-search.tsx

@@ -5,8 +5,6 @@ import { observer } from "mobx-react";
 import { SearchInput } from "../input";
 import { searchStore } from "../../../common/search-store";
 import { Icon } from "../icon";
-import { _i18n } from "../../i18n";
-import { t } from "@lingui/macro";
 
 export interface PodLogSearchProps {
   onSearch: (query: string) => void
@@ -70,21 +68,21 @@ export const PodLogSearch = observer((props: Props) => {
       />
       <Icon
         material="keyboard_arrow_up"
-        tooltip={_i18n._(t`Previous`)}
+        tooltip={`Previous`}
         onClick={onPrevOverlay}
         disabled={jumpDisabled}
       />
       <Icon
         material="keyboard_arrow_down"
-        tooltip={_i18n._(t`Next`)}
+        tooltip={`Next`}
         onClick={onNextOverlay}
         disabled={jumpDisabled}
       />
       <Icon
         material="close"
-        tooltip={_i18n._(t`Clear`)}
+        tooltip={`Clear`}
         onClick={onClear}
       />
     </div>
   );
-});
+});

src/renderer/components/dock/pod-logs.store.ts

@@ -3,8 +3,6 @@ import { Pod, IPodContainer, podsApi, IPodLogsQuery } from "../../api/endpoints"
 import { autobind, interval } from "../../utils";
 import { DockTabStore } from "./dock-tab.store";
 import { dockStore, IDockTab, TabKind } from "./dock.store";
-import { t } from "@lingui/macro";
-import { _i18n } from "../../i18n";
 import { searchStore } from "../../../common/search-store";
 
 export interface IPodLogsData {
@@ -75,8 +73,8 @@ export class PodLogsStore extends DockTabStore<IPodLogsData> {
       this.podLogs.set(tabId, logs);
     } catch ({error}) {
       const message = [
-        _i18n._(t`Failed to load logs: ${error.message}`),
-        _i18n._(t`Reason: ${error.reason} (${error.code})`)
+        `Failed to load logs: ${error.message}`,
+        `Reason: ${error.reason} (${error.code})`
       ];
 
       this.refresher.stop();

src/renderer/components/dock/terminal-tab.tsx

@@ -2,7 +2,6 @@ import "./terminal-tab.scss";
 
 import React from "react";
 import { observer } from "mobx-react";
-import { Trans } from "@lingui/macro";
 import { autobind, cssNames } from "../../utils";
 import { DockTab, DockTabProps } from "./dock-tab";
 import { Icon } from "../icon";
@@ -50,7 +49,7 @@ export class TerminalTab extends React.Component<Props> {
             small
             material="refresh"
             className="restart-icon"
-            tooltip={<Trans>Restart session</Trans>}
+            tooltip="Restart session"
             onClick={this.reconnect}
           />
         )}

src/renderer/components/dock/terminal.store.ts

@@ -1,11 +1,9 @@
 import { autorun, observable } from "mobx";
-import { t } from "@lingui/macro";
 import { autobind } from "../../utils";
 import { Terminal } from "./terminal";
 import { TerminalApi } from "../../api/terminal-api";
 import { dockStore, IDockTab, TabId, TabKind } from "./dock.store";
 import { WebSocketApiState } from "../../api/websocket-api";
-import { _i18n } from "../../i18n";
 
 export interface ITerminalTab extends IDockTab {
   node?: string; // activate node shell mode
@@ -18,7 +16,7 @@ export function isTerminalTab(tab: IDockTab) {
 export function createTerminalTab(tabParams: Partial<ITerminalTab> = {}) {
   return dockStore.createTab({
     kind: TabKind.TERMINAL,
-    title: _i18n._(t`Terminal`),
+    title: `Terminal`,
     ...tabParams
   });
 }

src/renderer/components/dock/upgrade-chart.store.ts

@@ -1,10 +1,8 @@
 import { action, autorun, IReactionDisposer, reaction } from "mobx";
-import { t } from "@lingui/macro";
 import { dockStore, IDockTab, TabId, TabKind } from "./dock.store";
 import { DockTabStore } from "./dock-tab.store";
 import { HelmRelease, helmReleasesApi } from "../../api/endpoints/helm-releases.api";
 import { releaseStore } from "../+apps-releases/release.store";
-import { _i18n } from "../../i18n";
 
 export interface IChartUpgradeData {
   releaseName: string;
@@ -120,7 +118,7 @@ export function createUpgradeChartTab(release: HelmRelease, tabParams: Partial<I
   if (!tab) {
     tab = dockStore.createTab({
       kind: TabKind.UPGRADE_CHART,
-      title: _i18n._(t`Helm Upgrade: ${release.getName()}`),
+      title: `Helm Upgrade: ${release.getName()}`,
       ...tabParams
     }, false);
 

src/renderer/components/dock/upgrade-chart.tsx

@@ -3,7 +3,6 @@ import "./upgrade-chart.scss";
 import React from "react";
 import { observable, reaction } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
-import { t, Trans } from "@lingui/macro";
 import { cssNames } from "../../utils";
 import { IDockTab } from "./dock.store";
 import { InfoPanel } from "./info-panel";
@@ -15,7 +14,6 @@ import { EditorPanel } from "./editor-panel";
 import { helmChartStore, IChartVersion } from "../+apps-helm-charts/helm-chart.store";
 import { HelmRelease } from "../../api/endpoints/helm-releases.api";
 import { Select, SelectOption } from "../select";
-import { _i18n } from "../../i18n";
 
 interface Props {
   className?: string;
@@ -81,7 +79,7 @@ export class UpgradeChart extends React.Component<Props> {
 
     return (
       <p>
-        <Trans>Release <b>{releaseName}</b> successfully upgraded to version <b>{version}</b></Trans>
+        Release <b>{releaseName}</b> successfully upgraded to version <b>{version}</b>
       </p>
     );
   };
@@ -103,10 +101,10 @@ export class UpgradeChart extends React.Component<Props> {
     const currentVersion = release.getVersion();
     const controlsAndInfo = (
       <div className="upgrade flex gaps align-center">
-        <span><Trans>Release</Trans></span> <Badge label={release.getName()}/>
-        <span><Trans>Namespace</Trans></span> <Badge label={release.getNs()}/>
-        <span><Trans>Version</Trans></span> <Badge label={currentVersion}/>
-        <span><Trans>Upgrade version</Trans></span>
+        <span>Release</span> <Badge label={release.getName()}/>
+        <span>Namespace</span> <Badge label={release.getNs()}/>
+        <span>Version</span> <Badge label={currentVersion}/>
+        <span>Upgrade version</span>
         <Select
           className="chart-version"
           menuPlacement="top"
@@ -125,8 +123,8 @@ export class UpgradeChart extends React.Component<Props> {
           tabId={tabId}
           error={error}
           submit={upgrade}
-          submitLabel={_i18n._(t`Upgrade`)}
-          submittingMessage={_i18n._(t`Updating..`)}
+          submitLabel={`Upgrade`}
+          submittingMessage={`Updating..`}
           controls={controlsAndInfo}
         />
         <EditorPanel