@canva/cli 0.0.1-beta.35 → 0.0.1-beta.36

package/templates/common/utils/use_feature_support.ts

@@ -1,6 +1,6 @@
 import { features } from "@canva/platform";
 import type { Feature } from "@canva/platform";
-import { useState, useEffect } from "react";
+import { useEffect, useState } from "react";
 
 /**
  * This hook allows re-rendering of a React component whenever

package/templates/dam/backend/routers/dam.ts

@@ -1,6 +1,6 @@
-import * as express from "express";
-import * as crypto from "crypto";
 import type { Container, Resource } from "@canva/app-components";
+import * as crypto from "crypto";
+import * as express from "express";
 
 /**
  * Generates a unique hash for a url.

package/templates/dam/backend/server.ts

@@ -1,5 +1,5 @@
-import * as express from "express";
 import * as cors from "cors";
+import * as express from "express";
 import { createBaseServer } from "../utils/backend/base_backend/create";
 import { createDamRouter } from "./routers/dam";
 

package/templates/dam/scripts/ssl/ssl.ts

@@ -1,7 +1,7 @@
 import * as crypto from "crypto";
+import * as fs from "fs/promises";
 import { pki } from "node-forge";
 import * as path from "path";
-import * as fs from "fs/promises";
 
 const SSL_CERT_DIR = path.resolve(process.cwd(), "..", "..", ".ssl");
 const CERT_FILE = path.resolve(SSL_CERT_DIR, "certificate.pem");

package/templates/dam/scripts/start/app_runner.ts

@@ -1,16 +1,16 @@
 /* eslint-disable no-console */
-import type { Context } from "./context";
-import * as chalk from "chalk";
-import { buildConfig } from "../../webpack.config";
+import { generatePreviewUrl } from "@canva/cli";
 import * as ngrok from "@ngrok/ngrok";
-import * as nodemon from "nodemon";
+import * as chalk from "chalk";
 import * as Table from "cli-table3";
+import * as nodemon from "nodemon";
+import * as open from "open";
 import * as webpack from "webpack";
 import * as WebpackDevServer from "webpack-dev-server";
-import * as open from "open";
-import { generatePreviewUrl } from "@canva/cli";
+import { buildConfig } from "../../webpack.config";
 import type { Certificate } from "../ssl/ssl";
 import { createOrRetrieveCertificate } from "../ssl/ssl";
+import type { Context } from "./context";
 
 export const infoChalk = chalk.blue.bold;
 export const warnChalk = chalk.bgYellow.bold;

package/templates/dam/scripts/start/start.ts

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 import * as yargs from "yargs";
-import { AppRunner } from "./app_runner";
 import { hideBin } from "yargs/helpers";
+import { AppRunner } from "./app_runner";
 import { Context } from "./context";
 
 const appRunner = new AppRunner();

package/templates/dam/src/app.tsx

@@ -1,8 +1,8 @@
 import { SearchableListView } from "@canva/app-components";
 import { Box } from "@canva/app-ui-kit";
 import "@canva/app-ui-kit/styles.css";
-import { useConfig } from "./config";
 import { findResources } from "./adapter";
+import { useConfig } from "./config";
 import * as styles from "./index.css";
 
 export function App() {

package/templates/dam/src/index.tsx

@@ -1,8 +1,8 @@
+import { AppI18nProvider } from "@canva/app-i18n-kit";
 import { AppUiProvider } from "@canva/app-ui-kit";
 import { createRoot } from "react-dom/client";
 import { App } from "./app";
 import "@canva/app-ui-kit/styles.css";
-import { AppI18nProvider } from "@canva/app-i18n-kit";
 
 const root = createRoot(document.getElementById("root") as Element);
 function render() {

package/templates/dam/utils/backend/base_backend/create.ts

@@ -1,10 +1,10 @@
 /* eslint-disable no-console */
+import debug from "debug";
 import * as express from "express";
+import type { NextFunction, Request, Response } from "express";
+import * as fs from "fs";
 import * as http from "http";
 import * as https from "https";
-import * as fs from "fs";
-import type { Request, Response, NextFunction } from "express";
-import debug from "debug";
 
 const serverDebug = debug("server");
 

package/templates/dam/utils/backend/jwt_middleware/jwt_middleware.ts

@@ -1,11 +1,11 @@
 /* eslint-disable no-console */
 import * as chalk from "chalk";
 import * as debug from "debug";
-import type { Request, Response, NextFunction } from "express";
-import * as jwt from "jsonwebtoken";
-import { JwksClient, SigningKeyNotFoundError } from "jwks-rsa";
+import type { NextFunction, Request, Response } from "express";
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import Express from "express-serve-static-core";
+import * as jwt from "jsonwebtoken";
+import { JwksClient, SigningKeyNotFoundError } from "jwks-rsa";
 
 /**
  * Prefix your start command with `DEBUG=express:middleware:jwt` to enable debug logging

package/templates/dam/webpack.config.ts

@@ -182,7 +182,7 @@ export function buildConfig({
       new DefinePlugin({
         BACKEND_HOST: JSON.stringify(backendHost),
       }),
-      // Apps can only submit a single JS file via the developer portal
+      // Apps can only submit a single JS file via the Developer Portal
       new optimize.LimitChunkCountPlugin({ maxChunks: 1 }),
     ].filter(Boolean),
     ...buildDevConfig(devConfig),

package/templates/data_connector/scripts/ssl/ssl.ts

@@ -1,7 +1,7 @@
 import * as crypto from "crypto";
+import * as fs from "fs/promises";
 import { pki } from "node-forge";
 import * as path from "path";
-import * as fs from "fs/promises";
 
 const SSL_CERT_DIR = path.resolve(process.cwd(), "..", "..", ".ssl");
 const CERT_FILE = path.resolve(SSL_CERT_DIR, "certificate.pem");

package/templates/data_connector/scripts/start/app_runner.ts

@@ -1,16 +1,16 @@
 /* eslint-disable no-console */
-import type { Context } from "./context";
-import * as chalk from "chalk";
-import { buildConfig } from "../../webpack.config";
+import { generatePreviewUrl } from "@canva/cli";
 import * as ngrok from "@ngrok/ngrok";
-import * as nodemon from "nodemon";
+import * as chalk from "chalk";
 import * as Table from "cli-table3";
+import * as nodemon from "nodemon";
+import * as open from "open";
 import * as webpack from "webpack";
 import * as WebpackDevServer from "webpack-dev-server";
-import * as open from "open";
-import { generatePreviewUrl } from "@canva/cli";
+import { buildConfig } from "../../webpack.config";
 import type { Certificate } from "../ssl/ssl";
 import { createOrRetrieveCertificate } from "../ssl/ssl";
+import type { Context } from "./context";
 
 export const infoChalk = chalk.blue.bold;
 export const warnChalk = chalk.bgYellow.bold;

package/templates/data_connector/scripts/start/start.ts

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 import * as yargs from "yargs";
-import { AppRunner } from "./app_runner";
 import { hideBin } from "yargs/helpers";
+import { AppRunner } from "./app_runner";
 import { Context } from "./context";
 
 const appRunner = new AppRunner();

package/templates/data_connector/src/api/data_source.ts

@@ -1,5 +1,5 @@
 import type { DataTable } from "@canva/intents/data";
-import { toDataTable, type DataTableColumn } from "src/utils";
+import { type DataTableColumn, toDataTable } from "src/utils";
 
 /**
  * This file defines types and classes related to data source configuration, fetching and outputting as a data table.

package/templates/data_connector/src/api/data_sources/designs.tsx

@@ -1,23 +1,23 @@
 /* eslint-disable formatjs/no-literal-string-in-object */
-import type { APIResponseItem, DataSourceConfig } from "../data_source";
-import { DataAPIError, DataSourceHandler } from "../data_source";
-import type { CanvaItemResponse } from "../connect_client";
 
 import type { SelectOption } from "@canva/app-ui-kit";
 import { Button, DatabaseIcon, HorizontalCard, Rows } from "@canva/app-ui-kit";
-import { useAppContext } from "src/context";
+import { useEffect, useState } from "react";
+import { useIntl } from "react-intl";
+import { useNavigate } from "react-router-dom";
 import { Header } from "src/components";
 import {
   ownershipFilter,
   sortOrderField,
 } from "src/components/inputs/messages";
-import { useIntl } from "react-intl";
+import { SearchFilter } from "src/components/inputs/search_filter";
 import { SelectField } from "src/components/inputs/select_field";
-import { dateCell, numberCell, stringCell } from "src/utils";
+import { useAppContext } from "src/context";
 import { Paths } from "src/routes";
-import { useNavigate } from "react-router-dom";
-import { useEffect, useState } from "react";
-import { SearchFilter } from "src/components/inputs/search_filter";
+import { dateCell, numberCell, stringCell } from "src/utils";
+import type { CanvaItemResponse } from "../connect_client";
+import { DataAPIError, DataSourceHandler } from "../data_source";
+import type { APIResponseItem, DataSourceConfig } from "../data_source";
 
 export interface DesignsDataSource extends DataSourceConfig {
   query: string;

package/templates/data_connector/src/api/data_sources/templates.tsx

@@ -1,9 +1,4 @@
 /* eslint-disable formatjs/no-literal-string-in-object */
-import { useAppContext } from "src/context";
-import type { APIResponseItem, DataSourceConfig } from "../data_source";
-import { DataAPIError, DataSourceHandler } from "../data_source";
-import type { CanvaItemResponse } from "../connect_client";
-import { dateCell, stringCell } from "src/utils";
 import type { SelectOption } from "@canva/app-ui-kit";
 import {
   Button,
@@ -11,18 +6,23 @@ import {
   Rows,
   TableMergedHeaderCellsIcon,
 } from "@canva/app-ui-kit";
+import { useEffect, useState } from "react";
 import { useIntl } from "react-intl";
+import { useNavigate } from "react-router-dom";
+import { Header } from "src/components";
 import {
   datasetFilter,
   ownershipFilter,
   sortOrderField,
 } from "src/components/inputs/messages";
+import { SearchFilter } from "src/components/inputs/search_filter";
 import { SelectField } from "src/components/inputs/select_field";
-import { Header } from "src/components";
-import { useNavigate } from "react-router-dom";
+import { useAppContext } from "src/context";
 import { Paths } from "src/routes";
-import { useEffect, useState } from "react";
-import { SearchFilter } from "src/components/inputs/search_filter";
+import { dateCell, stringCell } from "src/utils";
+import type { CanvaItemResponse } from "../connect_client";
+import { DataAPIError, DataSourceHandler } from "../data_source";
+import type { APIResponseItem, DataSourceConfig } from "../data_source";
 
 export interface BrandTemplatesDataSource extends DataSourceConfig {
   query: string;

package/templates/data_connector/src/api/fetch_data_table.ts

@@ -2,13 +2,13 @@ import type {
   GetDataTableRequest,
   GetDataTableResponse,
 } from "@canva/intents/data";
-import { DATA_SOURCES } from "./data_sources";
 import {
   appError,
   completeDataTable,
   outdatedSourceRef,
   remoteRequestFailed,
 } from "src/utils/fetch_result";
+import { DATA_SOURCES } from "./data_sources";
 import { DataAPIError } from ".";
 
 /**

package/templates/data_connector/src/api/tests/data_source.test.tsx

@@ -1,8 +1,8 @@
 /* eslint-disable formatjs/no-literal-string-in-object */
 /* eslint-disable formatjs/no-literal-string-in-jsx */
-import type { DataSourceConfig, APIResponseItem } from "../data_source";
-import { DataSourceHandler, DataAPIError } from "../data_source";
 import { toDataTable } from "src/utils";
+import type { APIResponseItem, DataSourceConfig } from "../data_source";
+import { DataAPIError, DataSourceHandler } from "../data_source";
 
 // Mock dependencies
 jest.mock("src/utils", () => ({

package/templates/data_connector/src/app.tsx

@@ -1,11 +1,11 @@
-import { createHashRouter, RouterProvider } from "react-router-dom";
-import { ContextProvider } from "./context";
-import { routes } from "./routes";
-import { AppUiProvider } from "@canva/app-ui-kit";
 import { AppI18nProvider } from "@canva/app-i18n-kit";
+import { AppUiProvider } from "@canva/app-ui-kit";
+import type { RenderSelectionUiRequest } from "@canva/intents/data";
 import { ErrorBoundary } from "react-error-boundary";
+import { createHashRouter, RouterProvider } from "react-router-dom";
+import { ContextProvider } from "./context";
 import { ErrorPage } from "./pages";
-import type { RenderSelectionUiRequest } from "@canva/intents/data";
+import { routes } from "./routes";
 
 export const App = ({ request }: { request: RenderSelectionUiRequest }) => (
   <AppI18nProvider>

package/templates/data_connector/src/components/footer.tsx

@@ -1,4 +1,4 @@
-import { Rows, Button } from "@canva/app-ui-kit";
+import { Button, Rows } from "@canva/app-ui-kit";
 import { useIntl } from "react-intl";
 import { useAppContext } from "src/context";
 

package/templates/data_connector/src/components/header.tsx

@@ -1,4 +1,3 @@
-import { useNavigate } from "react-router-dom";
 import {
   ArrowLeftIcon,
   Box,
@@ -7,6 +6,7 @@ import {
   Columns,
   Title,
 } from "@canva/app-ui-kit";
+import { useNavigate } from "react-router-dom";
 import { Paths } from "src/routes";
 
 export const Header = ({

package/templates/data_connector/src/context/app_context.tsx

@@ -1,7 +1,7 @@
-import { createContext, useState, useCallback } from "react";
 import type { RenderSelectionUiRequest } from "@canva/intents/data";
 import type { AccessTokenResponse } from "@canva/user";
 import { auth } from "@canva/user";
+import { createContext, useCallback, useState } from "react";
 import type { APIResponseItem, DataSourceHandler } from "src/api/data_source";
 import { type DataSourceConfig } from "src/api/data_source";
 

package/templates/data_connector/src/entrypoint.tsx

@@ -1,19 +1,19 @@
 import { LoadingIndicator } from "@canva/app-ui-kit";
 import { useEffect } from "react";
 import { useNavigate } from "react-router-dom";
+import type {
+  APIResponseItem,
+  DataSourceConfig,
+  DataSourceHandler,
+} from "./api";
+import { DATA_SOURCES } from "./api/data_sources";
 import { useAppContext } from "./context";
+import { Paths } from "./routes";
 import {
   isDataRefEmpty,
   isLaunchedWithError,
   isOutdatedSource,
 } from "./utils/data_params";
-import { Paths } from "./routes";
-import { DATA_SOURCES } from "./api/data_sources";
-import type {
-  APIResponseItem,
-  DataSourceConfig,
-  DataSourceHandler,
-} from "./api";
 
 const parseDataSource = (source: string) => {
   try {

package/templates/data_connector/src/home.tsx

@@ -1,7 +1,7 @@
-import { Outlet } from "react-router-dom";
 import { Box, Rows } from "@canva/app-ui-kit";
-import { AppError } from "./components";
+import { Outlet } from "react-router-dom";
 import * as styles from "styles/components.css";
+import { AppError } from "./components";
 
 export const Home = () => (
   <div className={styles.scrollContainer}>

package/templates/data_connector/src/index.tsx

@@ -1,16 +1,15 @@
+import { Alert, AppUiProvider } from "@canva/app-ui-kit";
 import type {
-  RenderSelectionUiRequest,
   GetDataTableRequest,
   GetDataTableResponse,
+  RenderSelectionUiRequest,
 } from "@canva/intents/data";
 import { prepareDataConnector } from "@canva/intents/data";
-import { createRoot } from "react-dom/client";
-import { App } from "./app";
 import { auth } from "@canva/user";
+import { createRoot } from "react-dom/client";
 import { buildDataTableResult, scope } from "./api";
-
+import { App } from "./app";
 import "@canva/app-ui-kit/styles.css";
-import { Alert, AppUiProvider } from "@canva/app-ui-kit";
 
 const root = createRoot(document.getElementById("root") as Element);
 prepareDataConnector({
@@ -63,7 +62,7 @@ root.render(
     {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
     <Alert tone="critical">
       If you're seeing this, you need to turn on the data connector intent in
-      the developer portal for this app.
+      the Developer Portal for this app.
     </Alert>
   </AppUiProvider>,
 );

package/templates/data_connector/src/pages/error.tsx

@@ -1,8 +1,8 @@
-import { useNavigate } from "react-router-dom";
 import { Button, Rows, Text } from "@canva/app-ui-kit";
+import { FormattedMessage, useIntl } from "react-intl";
+import { useNavigate } from "react-router-dom";
 import { Paths } from "src/routes";
 import * as styles from "styles/components.css";
-import { FormattedMessage, useIntl } from "react-intl";
 
 /**
  * Bare bones Error Page, please add relevant information and behavior that your app requires.

package/templates/data_connector/src/pages/login.tsx

@@ -1,19 +1,19 @@
 import {
+  Box,
   Button,
   LoadingIndicator,
   Rows,
-  Title,
   Text,
-  Box,
+  Title,
 } from "@canva/app-ui-kit";
-import { useState, useEffect, useCallback } from "react";
+import { useCallback, useEffect, useState } from "react";
+import { defineMessages, FormattedMessage, useIntl } from "react-intl";
+import { useNavigate } from "react-router-dom";
+import { scope } from "src/api";
+import { Header } from "src/components";
 import * as styles from "styles/components.css";
 import { useAppContext } from "../context";
-import { useNavigate } from "react-router-dom";
 import { Paths } from "../routes";
-import { Header } from "src/components";
-import { useIntl, FormattedMessage, defineMessages } from "react-intl";
-import { scope } from "src/api";
 
 export const Login = () => {
   const intl = useIntl();

package/templates/data_connector/src/routes/routes.tsx

@@ -1,6 +1,6 @@
 import { Entrypoint } from "src/entrypoint";
 import { Home } from "src/home";
-import { ErrorPage, Login, DataSourceConfig, SelectSource } from "src/pages";
+import { DataSourceConfig, ErrorPage, Login, SelectSource } from "src/pages";
 import { ProtectedRoute } from "./protected_route";
 
 export enum Paths {

package/templates/data_connector/src/utils/data_table.ts

@@ -1,11 +1,11 @@
 import type {
   BooleanDataTableCell,
+  ColumnConfig,
   DataTable,
   DataTableCell,
   DateDataTableCell,
   NumberDataTableCell,
   StringDataTableCell,
-  ColumnConfig,
 } from "@canva/intents/data";
 import type { APIResponseItem } from "src/api";
 

package/templates/data_connector/src/utils/fetch_result.ts

@@ -1,8 +1,8 @@
 import type {
   DataTable,
   DataTableMetadata,
-  GetDataTableError,
   GetDataTableCompleted,
+  GetDataTableError,
 } from "@canva/intents/data";
 
 export const completeDataTable = (

package/templates/data_connector/src/utils/tests/data_table.test.ts

@@ -1,13 +1,13 @@
 /* eslint-disable formatjs/no-literal-string-in-object */
+import type { APIResponseItem } from "src/api";
 import {
-  toDataTable,
-  stringCell,
-  numberCell,
-  dateCell,
   booleanCell,
+  dateCell,
+  numberCell,
+  stringCell,
+  toDataTable,
 } from "../data_table";
 import type { DataTableColumn } from "../data_table";
-import type { APIResponseItem } from "src/api";
 
 describe("data table utils", () => {
   interface TestItem extends APIResponseItem {

package/templates/data_connector/webpack.config.ts

@@ -182,7 +182,7 @@ export function buildConfig({
       new DefinePlugin({
         BACKEND_HOST: JSON.stringify(backendHost),
       }),
-      // Apps can only submit a single JS file via the developer portal
+      // Apps can only submit a single JS file via the Developer Portal
       new optimize.LimitChunkCountPlugin({ maxChunks: 1 }),
     ].filter(Boolean),
     ...buildDevConfig(devConfig),

package/templates/gen_ai/backend/server.ts

@@ -1,5 +1,5 @@
-import * as express from "express";
 import * as cors from "cors";
+import * as express from "express";
 import { createBaseServer } from "../utils/backend/base_backend/create";
 import { createImageRouter } from "./routers/image";
 

package/templates/gen_ai/scripts/ssl/ssl.ts

@@ -1,7 +1,7 @@
 import * as crypto from "crypto";
+import * as fs from "fs/promises";
 import { pki } from "node-forge";
 import * as path from "path";
-import * as fs from "fs/promises";
 
 const SSL_CERT_DIR = path.resolve(process.cwd(), "..", "..", ".ssl");
 const CERT_FILE = path.resolve(SSL_CERT_DIR, "certificate.pem");

package/templates/gen_ai/scripts/start/app_runner.ts

@@ -1,16 +1,16 @@
 /* eslint-disable no-console */
-import type { Context } from "./context";
-import * as chalk from "chalk";
-import { buildConfig } from "../../webpack.config";
+import { generatePreviewUrl } from "@canva/cli";
 import * as ngrok from "@ngrok/ngrok";
-import * as nodemon from "nodemon";
+import * as chalk from "chalk";
 import * as Table from "cli-table3";
+import * as nodemon from "nodemon";
+import * as open from "open";
 import * as webpack from "webpack";
 import * as WebpackDevServer from "webpack-dev-server";
-import * as open from "open";
-import { generatePreviewUrl } from "@canva/cli";
+import { buildConfig } from "../../webpack.config";
 import type { Certificate } from "../ssl/ssl";
 import { createOrRetrieveCertificate } from "../ssl/ssl";
+import type { Context } from "./context";
 
 export const infoChalk = chalk.blue.bold;
 export const warnChalk = chalk.bgYellow.bold;

package/templates/gen_ai/scripts/start/start.ts

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 import * as yargs from "yargs";
-import { AppRunner } from "./app_runner";
 import { hideBin } from "yargs/helpers";
+import { AppRunner } from "./app_runner";
 import { Context } from "./context";
 
 const appRunner = new AppRunner();

package/templates/gen_ai/src/app.tsx

@@ -1,10 +1,10 @@
-import { createHashRouter, RouterProvider } from "react-router-dom";
-import { ContextProvider } from "./context";
-import { routes } from "./routes";
 import { AppI18nProvider } from "@canva/app-i18n-kit";
 import { AppUiProvider } from "@canva/app-ui-kit";
 import { ErrorBoundary } from "react-error-boundary";
+import { createHashRouter, RouterProvider } from "react-router-dom";
+import { ContextProvider } from "./context";
 import { ErrorPage } from "./pages";
+import { routes } from "./routes";
 
 export const App = () => (
   <AppI18nProvider>

package/templates/gen_ai/src/components/footer.tsx

@@ -1,12 +1,12 @@
-import { useNavigate, useLocation } from "react-router-dom";
-import { Rows, Button } from "@canva/app-ui-kit";
-import { queueImageGeneration, purchaseCredits } from "src/api";
+import { Button, Rows } from "@canva/app-ui-kit";
+import { useIntl } from "react-intl";
+import { useLocation, useNavigate } from "react-router-dom";
+import { purchaseCredits, queueImageGeneration } from "src/api";
 import { RemainingCredits } from "src/components";
 import { NUMBER_OF_IMAGES_TO_GENERATE } from "src/config";
 import { useAppContext } from "src/context";
 import { Paths } from "src/routes";
 import { getObsceneWords } from "src/utils";
-import { useIntl } from "react-intl";
 import { FooterMessages as Messages } from "./footer.messages";
 
 export const Footer = () => {

package/templates/gen_ai/src/components/image_grid.tsx

@@ -2,10 +2,10 @@ import { Grid, ImageCard, Rows, Text } from "@canva/app-ui-kit";
 import type { QueuedImage } from "@canva/asset";
 import { upload } from "@canva/asset";
 import { addElementAtPoint, ui } from "@canva/design";
+import { FormattedMessage, useIntl } from "react-intl";
 import type { ImageType } from "src/api";
 import { useAppContext } from "src/context";
 import * as styles from "styles/utils.css";
-import { FormattedMessage, useIntl } from "react-intl";
 
 const THUMBNAIL_HEIGHT = 150;
 

package/templates/gen_ai/src/components/loading_results.tsx

@@ -1,18 +1,18 @@
-import { useEffect, useState } from "react";
-import { useNavigate } from "react-router-dom";
 import {
-  Rows,
+  Box,
+  Button,
   Grid,
   Placeholder,
   ProgressBar,
+  Rows,
   Text,
-  Button,
-  Box,
 } from "@canva/app-ui-kit";
-import { Paths } from "src/routes";
-import { useAppContext } from "src/context";
-import { cancelImageGenerationJob, getImageGenerationJobStatus } from "src/api";
+import { useEffect, useState } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
+import { useNavigate } from "react-router-dom";
+import { cancelImageGenerationJob, getImageGenerationJobStatus } from "src/api";
+import { useAppContext } from "src/context";
+import { Paths } from "src/routes";
 
 const INTERVAL_DURATION_IN_MS = 100;
 const TOTAL_PROGRESS_PERCENTAGE = 100;