Moved the NodeJS version of the application to the app/ directory.
This commit is contained in:
12
app/frontend/index.html
Normal file
12
app/frontend/index.html
Normal file
@@ -0,0 +1,12 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Azure Image Chooser</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
4339
app/frontend/package-lock.json
generated
Normal file
4339
app/frontend/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
31
app/frontend/package.json
Normal file
31
app/frontend/package.json
Normal file
@@ -0,0 +1,31 @@
|
||||
{
|
||||
"name": "azure-image-chooser-frontend",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "tsc -p tsconfig.json && vite build",
|
||||
"preview": "vite preview",
|
||||
"test": "vitest run"
|
||||
},
|
||||
"dependencies": {
|
||||
"@emotion/react": "^11.14.0",
|
||||
"@emotion/styled": "^11.14.1",
|
||||
"@mui/material": "^9.0.0",
|
||||
"@tanstack/react-query": "^5.99.2",
|
||||
"react": "^19.2.5",
|
||||
"react-dom": "^19.2.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@testing-library/jest-dom": "^6.9.1",
|
||||
"@testing-library/react": "^16.3.0",
|
||||
"@types/react": "^19.2.14",
|
||||
"@types/react-dom": "^19.2.3",
|
||||
"@vitejs/plugin-react": "^6.0.1",
|
||||
"jsdom": "^27.0.1",
|
||||
"typescript": "^6.0.3",
|
||||
"vite": "^8.0.8",
|
||||
"vitest": "^3.2.4"
|
||||
}
|
||||
}
|
||||
292
app/frontend/src/App.tsx
Normal file
292
app/frontend/src/App.tsx
Normal file
@@ -0,0 +1,292 @@
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import {
|
||||
Alert,
|
||||
Autocomplete,
|
||||
Box,
|
||||
Button,
|
||||
Card,
|
||||
CardContent,
|
||||
CircularProgress,
|
||||
Container,
|
||||
FormControl,
|
||||
Grid,
|
||||
InputLabel,
|
||||
MenuItem,
|
||||
Select,
|
||||
Stack,
|
||||
TextField,
|
||||
Typography
|
||||
} from "@mui/material";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { api } from "./api";
|
||||
import type { SelectionState } from "./types";
|
||||
|
||||
const EMPTY_SELECTION: SelectionState = {
|
||||
location: "",
|
||||
publisher: "",
|
||||
offer: "",
|
||||
sku: "",
|
||||
version: ""
|
||||
};
|
||||
|
||||
const App = () => {
|
||||
const [selection, setSelection] = useState<SelectionState>(EMPTY_SELECTION);
|
||||
const [templateFile, setTemplateFile] = useState("");
|
||||
const [renderedUsage, setRenderedUsage] = useState("");
|
||||
const [skuExport, setSkuExport] = useState("");
|
||||
const [renderError, setRenderError] = useState("");
|
||||
|
||||
const healthQuery = useQuery({ queryKey: ["health"], queryFn: api.health });
|
||||
const locationsQuery = useQuery({ queryKey: ["locations"], queryFn: api.locations });
|
||||
const publishersQuery = useQuery({
|
||||
queryKey: ["publishers", selection.location],
|
||||
queryFn: () => api.publishers(selection.location),
|
||||
enabled: Boolean(selection.location)
|
||||
});
|
||||
const offersQuery = useQuery({
|
||||
queryKey: ["offers", selection.location, selection.publisher],
|
||||
queryFn: () => api.offers(selection.location, selection.publisher),
|
||||
enabled: Boolean(selection.location && selection.publisher)
|
||||
});
|
||||
const skusQuery = useQuery({
|
||||
queryKey: ["skus", selection.location, selection.publisher, selection.offer],
|
||||
queryFn: () => api.skus(selection.location, selection.publisher, selection.offer),
|
||||
enabled: Boolean(selection.location && selection.publisher && selection.offer)
|
||||
});
|
||||
const versionsQuery = useQuery({
|
||||
queryKey: ["versions", selection.location, selection.publisher, selection.offer, selection.sku],
|
||||
queryFn: () => api.versions(selection.location, selection.publisher, selection.offer, selection.sku),
|
||||
enabled: Boolean(selection.location && selection.publisher && selection.offer && selection.sku)
|
||||
});
|
||||
const templatesQuery = useQuery({ queryKey: ["templates"], queryFn: api.templates });
|
||||
|
||||
useEffect(() => {
|
||||
setSelection((previous) => ({ ...previous, publisher: "", offer: "", sku: "", version: "" }));
|
||||
setRenderedUsage("");
|
||||
setSkuExport("");
|
||||
}, [selection.location]);
|
||||
|
||||
useEffect(() => {
|
||||
setSelection((previous) => ({ ...previous, offer: "", sku: "", version: "" }));
|
||||
setRenderedUsage("");
|
||||
setSkuExport("");
|
||||
}, [selection.publisher]);
|
||||
|
||||
useEffect(() => {
|
||||
setSelection((previous) => ({ ...previous, sku: "", version: "" }));
|
||||
setRenderedUsage("");
|
||||
}, [selection.offer]);
|
||||
|
||||
useEffect(() => {
|
||||
setSelection((previous) => ({ ...previous, version: "" }));
|
||||
setRenderedUsage("");
|
||||
}, [selection.sku]);
|
||||
|
||||
const canRender = useMemo(
|
||||
() => Boolean(selection.location && selection.publisher && selection.offer && selection.sku && selection.version && templateFile),
|
||||
[selection, templateFile]
|
||||
);
|
||||
|
||||
const publishers = useMemo(
|
||||
() => [...(publishersQuery.data ?? [])].sort((a, b) => a.localeCompare(b)),
|
||||
[publishersQuery.data]
|
||||
);
|
||||
const offers = useMemo(
|
||||
() => [...(offersQuery.data ?? [])].sort((a, b) => a.localeCompare(b)),
|
||||
[offersQuery.data]
|
||||
);
|
||||
const skus = useMemo(
|
||||
() => [...(skusQuery.data ?? [])].sort((a, b) => a.localeCompare(b)),
|
||||
[skusQuery.data]
|
||||
);
|
||||
const versions = useMemo(
|
||||
() => [...(versionsQuery.data ?? [])].sort((a, b) => a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" })),
|
||||
[versionsQuery.data]
|
||||
);
|
||||
|
||||
const containsFilter = (options: string[], inputValue: string) => {
|
||||
const query = inputValue.trim().toLowerCase();
|
||||
if (!query) {
|
||||
return options;
|
||||
}
|
||||
|
||||
return options.filter((option) => option.toLowerCase().includes(query));
|
||||
};
|
||||
|
||||
const onRender = async () => {
|
||||
setRenderError("");
|
||||
try {
|
||||
const [usage, skuBlock] = await Promise.all([
|
||||
api.render(templateFile, selection),
|
||||
api.skuExport(selection.location, selection.publisher, selection.offer)
|
||||
]);
|
||||
setRenderedUsage(usage);
|
||||
setSkuExport(skuBlock);
|
||||
} catch (error) {
|
||||
setRenderError(error instanceof Error ? error.message : "Unexpected render error");
|
||||
}
|
||||
};
|
||||
|
||||
const loading = locationsQuery.isLoading || templatesQuery.isLoading;
|
||||
const healthError = healthQuery.error instanceof Error ? healthQuery.error.message : "";
|
||||
const appNotConfigured = healthError.includes("Missing AZURE_SUBSCRIPTION_ID");
|
||||
const locationsError = locationsQuery.error instanceof Error ? locationsQuery.error.message : "Failed to load locations";
|
||||
|
||||
return (
|
||||
<Box sx={{ minHeight: "100vh", py: 4 }}>
|
||||
<Container maxWidth="lg">
|
||||
<Stack spacing={3}>
|
||||
<Typography variant="h4" sx={{ fontWeight: 500 }}>
|
||||
Azure Image Chooser
|
||||
</Typography>
|
||||
<Typography color="text.secondary">
|
||||
Select a marketplace image and generate reusable snippets.
|
||||
</Typography>
|
||||
|
||||
{appNotConfigured ? (
|
||||
<Alert severity="warning">
|
||||
App is not configured. Set AZURE_SUBSCRIPTION_ID (and Azure credentials) in the container start environment, then restart the app.
|
||||
</Alert>
|
||||
) : null}
|
||||
|
||||
{loading ? (
|
||||
<CircularProgress />
|
||||
) : locationsQuery.isError ? (
|
||||
<Alert severity={appNotConfigured ? "warning" : "error"}>{locationsError}</Alert>
|
||||
) : (
|
||||
<Card>
|
||||
<CardContent>
|
||||
<Grid container spacing={2}>
|
||||
<Grid size={{ xs: 12, md: 6 }}>
|
||||
<FormControl fullWidth>
|
||||
<InputLabel id="location-label">Location</InputLabel>
|
||||
<Select
|
||||
labelId="location-label"
|
||||
label="Location"
|
||||
value={selection.location}
|
||||
onChange={(event) => setSelection((prev) => ({ ...prev, location: event.target.value }))}
|
||||
>
|
||||
{(locationsQuery.data ?? []).map((location) => (
|
||||
<MenuItem key={location.name} value={location.name}>
|
||||
{location.displayName}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
|
||||
<Grid size={{ xs: 12, md: 6 }}>
|
||||
<Autocomplete
|
||||
options={publishers}
|
||||
value={selection.publisher || null}
|
||||
disabled={!selection.location}
|
||||
onChange={(_event, value) => setSelection((prev) => ({ ...prev, publisher: value ?? "" }))}
|
||||
filterOptions={(options, state) => containsFilter(options, state.inputValue)}
|
||||
renderInput={(params) => <TextField {...params} label="Publisher" />}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
<Grid size={{ xs: 12, md: 4 }}>
|
||||
<Autocomplete
|
||||
options={offers}
|
||||
value={selection.offer || null}
|
||||
disabled={!selection.publisher}
|
||||
onChange={(_event, value) => setSelection((prev) => ({ ...prev, offer: value ?? "" }))}
|
||||
filterOptions={(options, state) => containsFilter(options, state.inputValue)}
|
||||
renderInput={(params) => <TextField {...params} label="Offer" />}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
<Grid size={{ xs: 12, md: 4 }}>
|
||||
<Autocomplete
|
||||
options={skus}
|
||||
value={selection.sku || null}
|
||||
disabled={!selection.offer}
|
||||
onChange={(_event, value) => setSelection((prev) => ({ ...prev, sku: value ?? "" }))}
|
||||
filterOptions={(options, state) => containsFilter(options, state.inputValue)}
|
||||
renderInput={(params) => <TextField {...params} label="SKU" />}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
<Grid size={{ xs: 12, md: 4 }}>
|
||||
<FormControl fullWidth disabled={!selection.sku}>
|
||||
<InputLabel id="version-label">Version</InputLabel>
|
||||
<Select
|
||||
labelId="version-label"
|
||||
label="Version"
|
||||
value={selection.version}
|
||||
onChange={(event) => setSelection((prev) => ({ ...prev, version: event.target.value }))}
|
||||
>
|
||||
{versions.map((version) => (
|
||||
<MenuItem key={version} value={version}>
|
||||
{version}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
|
||||
<Grid size={{ xs: 12, md: 8 }}>
|
||||
<FormControl fullWidth>
|
||||
<InputLabel id="template-label">Usage scenario</InputLabel>
|
||||
<Select
|
||||
labelId="template-label"
|
||||
label="Usage scenario"
|
||||
value={templateFile}
|
||||
onChange={(event) => setTemplateFile(event.target.value)}
|
||||
>
|
||||
{(templatesQuery.data ?? []).map((template) => (
|
||||
<MenuItem key={template.file} value={template.file}>
|
||||
{template.label}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
|
||||
<Grid size={{ xs: 12, md: 4 }}>
|
||||
<Button fullWidth variant="contained" sx={{ height: "100%" }} color="primary" onClick={onRender} disabled={!canRender}>
|
||||
Generate usage
|
||||
</Button>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{renderError ? <Alert severity="error">{renderError}</Alert> : null}
|
||||
|
||||
{renderedUsage ? (
|
||||
<Card>
|
||||
<CardContent>
|
||||
<Typography variant="h6">Usage snippet</Typography>
|
||||
<Box
|
||||
component="pre"
|
||||
sx={{ overflowX: "auto", p: 2, bgcolor: "grey.100", color: "text.primary", borderRadius: 1, border: 1, borderColor: "divider" }}
|
||||
>
|
||||
{renderedUsage}
|
||||
</Box>
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : null}
|
||||
|
||||
{skuExport ? (
|
||||
<Card>
|
||||
<CardContent>
|
||||
<Typography variant="h6">Available SKUs</Typography>
|
||||
<Box
|
||||
component="pre"
|
||||
sx={{ overflowX: "auto", p: 2, bgcolor: "grey.100", color: "text.primary", borderRadius: 1, border: 1, borderColor: "divider" }}
|
||||
>
|
||||
{skuExport}
|
||||
</Box>
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : null}
|
||||
</Stack>
|
||||
</Container>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
55
app/frontend/src/api.ts
Normal file
55
app/frontend/src/api.ts
Normal file
@@ -0,0 +1,55 @@
|
||||
import type { LocationOption, SelectionState, UsageTemplate } from "./types";
|
||||
|
||||
const json = async <T>(path: string): Promise<T> => {
|
||||
const response = await fetch(path);
|
||||
if (!response.ok) {
|
||||
let details = "";
|
||||
try {
|
||||
const payload = (await response.json()) as { message?: string };
|
||||
details = payload.message ?? "";
|
||||
} catch {
|
||||
// Ignore non-JSON error payloads.
|
||||
}
|
||||
|
||||
throw new Error(details || `Request failed for ${path} (${response.status})`);
|
||||
}
|
||||
|
||||
return (await response.json()) as T;
|
||||
};
|
||||
|
||||
export const api = {
|
||||
health: () => json<{ status: string; message?: string }>("/api/health"),
|
||||
locations: () => json<LocationOption[]>("/api/locations"),
|
||||
publishers: (location: string) => json<string[]>(`/api/publishers?location=${encodeURIComponent(location)}`),
|
||||
offers: (location: string, publisher: string) =>
|
||||
json<string[]>(`/api/offers?location=${encodeURIComponent(location)}&publisher=${encodeURIComponent(publisher)}`),
|
||||
skus: (location: string, publisher: string, offer: string) =>
|
||||
json<string[]>(
|
||||
`/api/skus?location=${encodeURIComponent(location)}&publisher=${encodeURIComponent(publisher)}&offer=${encodeURIComponent(offer)}`
|
||||
),
|
||||
versions: (location: string, publisher: string, offer: string, sku: string) =>
|
||||
json<string[]>(
|
||||
`/api/versions?location=${encodeURIComponent(location)}&publisher=${encodeURIComponent(publisher)}&offer=${encodeURIComponent(offer)}&sku=${encodeURIComponent(sku)}`
|
||||
),
|
||||
templates: () => json<UsageTemplate[]>("/api/templates"),
|
||||
render: async (templateFile: string, selection: SelectionState): Promise<string> => {
|
||||
const response = await fetch("/api/render", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ templateFile, selection })
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error("Failed to render template");
|
||||
}
|
||||
|
||||
const payload = (await response.json()) as { rendered: string };
|
||||
return payload.rendered;
|
||||
},
|
||||
skuExport: async (location: string, publisher: string, offer: string): Promise<string> => {
|
||||
const payload = await json<{ rendered: string }>(
|
||||
`/api/sku-export?location=${encodeURIComponent(location)}&publisher=${encodeURIComponent(publisher)}&offer=${encodeURIComponent(offer)}`
|
||||
);
|
||||
return payload.rendered;
|
||||
}
|
||||
};
|
||||
16
app/frontend/src/main.tsx
Normal file
16
app/frontend/src/main.tsx
Normal file
@@ -0,0 +1,16 @@
|
||||
import { StrictMode } from "react";
|
||||
import { createRoot } from "react-dom/client";
|
||||
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
||||
import { CssBaseline } from "@mui/material";
|
||||
import App from "./App";
|
||||
|
||||
const queryClient = new QueryClient();
|
||||
|
||||
createRoot(document.getElementById("root")!).render(
|
||||
<StrictMode>
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<CssBaseline />
|
||||
<App />
|
||||
</QueryClientProvider>
|
||||
</StrictMode>
|
||||
);
|
||||
18
app/frontend/src/types.ts
Normal file
18
app/frontend/src/types.ts
Normal file
@@ -0,0 +1,18 @@
|
||||
export type LocationOption = {
|
||||
name: string;
|
||||
displayName: string;
|
||||
};
|
||||
|
||||
export type UsageTemplate = {
|
||||
label: string;
|
||||
language: string;
|
||||
file: string;
|
||||
};
|
||||
|
||||
export type SelectionState = {
|
||||
location: string;
|
||||
publisher: string;
|
||||
offer: string;
|
||||
sku: string;
|
||||
version: string;
|
||||
};
|
||||
57
app/frontend/test/app.test.tsx
Normal file
57
app/frontend/test/app.test.tsx
Normal file
@@ -0,0 +1,57 @@
|
||||
import { render, screen } from "@testing-library/react";
|
||||
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
||||
import { ThemeProvider, createTheme } from "@mui/material";
|
||||
import { beforeEach, afterEach, describe, expect, it, vi } from "vitest";
|
||||
import App from "../src/App";
|
||||
|
||||
const originalFetch = globalThis.fetch;
|
||||
|
||||
const createResponse = (payload: unknown) =>
|
||||
new Response(JSON.stringify(payload), {
|
||||
status: 200,
|
||||
headers: { "Content-Type": "application/json" }
|
||||
});
|
||||
|
||||
describe("App", () => {
|
||||
beforeEach(() => {
|
||||
globalThis.fetch = vi.fn((url: string) => {
|
||||
if (url === "/api/locations") {
|
||||
return Promise.resolve(createResponse([{ name: "westeurope", displayName: "West Europe" }]));
|
||||
}
|
||||
|
||||
if (url === "/api/templates") {
|
||||
return Promise.resolve(createResponse([{ label: "Azure CLI", language: "shell", file: "shell.tpl" }]));
|
||||
}
|
||||
|
||||
return Promise.resolve(createResponse([]));
|
||||
}) as typeof fetch;
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
globalThis.fetch = originalFetch;
|
||||
});
|
||||
|
||||
it("renders application heading", async () => {
|
||||
const client = new QueryClient({
|
||||
defaultOptions: {
|
||||
queries: {
|
||||
retry: false,
|
||||
gcTime: 0
|
||||
}
|
||||
}
|
||||
});
|
||||
const theme = createTheme();
|
||||
|
||||
const view = render(
|
||||
<QueryClientProvider client={client}>
|
||||
<ThemeProvider theme={theme}>
|
||||
<App />
|
||||
</ThemeProvider>
|
||||
</QueryClientProvider>
|
||||
);
|
||||
|
||||
expect(await screen.findByText("Azure Image Chooser")).toBeInTheDocument();
|
||||
view.unmount();
|
||||
client.clear();
|
||||
});
|
||||
});
|
||||
1
app/frontend/test/setup.ts
Normal file
1
app/frontend/test/setup.ts
Normal file
@@ -0,0 +1 @@
|
||||
import "@testing-library/jest-dom/vitest";
|
||||
15
app/frontend/tsconfig.json
Normal file
15
app/frontend/tsconfig.json
Normal file
@@ -0,0 +1,15 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2022",
|
||||
"lib": ["ES2022", "DOM", "DOM.Iterable"],
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "Bundler",
|
||||
"jsx": "react-jsx",
|
||||
"strict": true,
|
||||
"skipLibCheck": true,
|
||||
"noEmit": true,
|
||||
"resolveJsonModule": true,
|
||||
"types": ["vite/client", "vitest/globals"]
|
||||
},
|
||||
"include": ["src", "test", "vite.config.ts"]
|
||||
}
|
||||
19
app/frontend/vite.config.ts
Normal file
19
app/frontend/vite.config.ts
Normal file
@@ -0,0 +1,19 @@
|
||||
import { defineConfig } from "vite";
|
||||
import react from "@vitejs/plugin-react";
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
build: {
|
||||
outDir: "../dist/frontend",
|
||||
emptyOutDir: true
|
||||
},
|
||||
server: {
|
||||
port: 5173,
|
||||
proxy: {
|
||||
"/api": {
|
||||
target: "http://localhost:3000",
|
||||
changeOrigin: true
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
8
app/frontend/vitest.config.ts
Normal file
8
app/frontend/vitest.config.ts
Normal file
@@ -0,0 +1,8 @@
|
||||
import { defineConfig } from "vitest/config";
|
||||
|
||||
export default defineConfig({
|
||||
test: {
|
||||
environment: "jsdom",
|
||||
setupFiles: ["./test/setup.ts"]
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user