refactor: reorder arguments in web ui

frontend/src/components/dialogs/DashboardDialog.tsx

@@ -30,23 +30,23 @@ import type React from "react";
 import { StatusHeaderStyles } from "theme/StatusColors";
 
 interface DashboardDialogProps {
-    open: boolean;
     onClose: () => void;
+    open: boolean;
 }
 
-export default function DashboardDialog({ open, onClose }: DashboardDialogProps): React.JSX.Element {
+export default function DashboardDialog({ onClose, open }: DashboardDialogProps): React.JSX.Element {
     const client = useClient();
     const { currentRepository } = useRepository();
 
     const { data: status } = useQuery<InternalStatus>({
-        queryKey: currentRepository ? QueryKeys.status(currentRepository) : ["status"],
-        queryFn: currentRepository ? () => client.fetch.fetchServerStatus(currentRepository) : skipToken,
         enabled: open,
+        queryFn: currentRepository ? () => client.fetch.fetchServerStatus(currentRepository) : skipToken,
+        queryKey: currentRepository ? QueryKeys.status(currentRepository) : ["status"],
     });
 
     const headerStyle = status ? StatusHeaderStyles[status.status.status] : {};
 
-    return <Dialog open={open} onClose={onClose} maxWidth="lg" fullWidth>
+    return <Dialog fullWidth maxWidth="lg" onClose={onClose} open={open}>
         <DialogHeader onClose={onClose} sx={headerStyle}>
             System health
         </DialogHeader>
@@ -55,43 +55,43 @@ export default function DashboardDialog({ open, onClose }: DashboardDialogProps)
             {status &&
                 <>
                     <Grid container spacing={2} sx={{ mt: 1 }}>
-                        <Grid size={{ xs: 6, md: 3 }}>
-                            <Typography variant="body2" color="text.secondary" align="right">Repository name</Typography>
+                        <Grid size={{ md: 3, xs: 6 }}>
+                            <Typography align="right" color="text.secondary" variant="body2">Repository name</Typography>
                         </Grid>
-                        <Grid size={{ xs: 6, md: 3 }}>
+                        <Grid size={{ md: 3, xs: 6 }}>
                             <Typography variant="body2">{status.repository}</Typography>
                         </Grid>
-                        <Grid size={{ xs: 6, md: 3 }}>
-                            <Typography variant="body2" color="text.secondary" align="right">Repository architecture</Typography>
+                        <Grid size={{ md: 3, xs: 6 }}>
+                            <Typography align="right" color="text.secondary" variant="body2">Repository architecture</Typography>
                         </Grid>
-                        <Grid size={{ xs: 6, md: 3 }}>
+                        <Grid size={{ md: 3, xs: 6 }}>
                             <Typography variant="body2">{status.architecture}</Typography>
                         </Grid>
                     </Grid>
 
                     <Grid container spacing={2} sx={{ mt: 1 }}>
-                        <Grid size={{ xs: 6, md: 3 }}>
-                            <Typography variant="body2" color="text.secondary" align="right">Current status</Typography>
+                        <Grid size={{ md: 3, xs: 6 }}>
+                            <Typography align="right" color="text.secondary" variant="body2">Current status</Typography>
                         </Grid>
-                        <Grid size={{ xs: 6, md: 3 }}>
+                        <Grid size={{ md: 3, xs: 6 }}>
                             <Typography variant="body2">{status.status.status}</Typography>
                         </Grid>
-                        <Grid size={{ xs: 6, md: 3 }}>
-                            <Typography variant="body2" color="text.secondary" align="right">Updated at</Typography>
+                        <Grid size={{ md: 3, xs: 6 }}>
+                            <Typography align="right" color="text.secondary" variant="body2">Updated at</Typography>
                         </Grid>
-                        <Grid size={{ xs: 6, md: 3 }}>
+                        <Grid size={{ md: 3, xs: 6 }}>
                             <Typography variant="body2">{new Date(status.status.timestamp * 1000).toISOStringShort()}</Typography>
                         </Grid>
                     </Grid>
 
                     <Grid container spacing={2} sx={{ mt: 2 }}>
-                        <Grid size={{ xs: 12, md: 6 }}>
+                        <Grid size={{ md: 6, xs: 12 }}>
                             <Box sx={{ height: 300 }}>
                                 <PackageCountBarChart stats={status.stats} />
                             </Box>
                         </Grid>
-                        <Grid size={{ xs: 12, md: 6 }}>
-                            <Box sx={{ height: 300, display: "flex", justifyContent: "center", alignItems: "center" }}>
+                        <Grid size={{ md: 6, xs: 12 }}>
+                            <Box sx={{ alignItems: "center", display: "flex", height: 300, justifyContent: "center" }}>
                                 <StatusPieChart counters={status.packages} />
                             </Box>
                         </Grid>

frontend/src/components/dialogs/KeyImportDialog.tsx

@@ -35,11 +35,11 @@ import { useNotification } from "hooks/useNotification";
 import React, { useState } from "react";
 
 interface KeyImportDialogProps {
-    open: boolean;
     onClose: () => void;
+    open: boolean;
 }
 
-export default function KeyImportDialog({ open, onClose }: KeyImportDialogProps): React.JSX.Element {
+export default function KeyImportDialog({ onClose, open }: KeyImportDialogProps): React.JSX.Element {
     const client = useClient();
     const { showSuccess, showError } = useNotification();
 
@@ -54,7 +54,7 @@ export default function KeyImportDialog({ open, onClose }: KeyImportDialogProps)
         onClose();
     };
 
-    const handleFetch: () => Promise<void> = async () => {
+    const handleFetch = async (): Promise<void> => {
         if (!fingerprint || !server) {
             return;
         }
@@ -67,7 +67,7 @@ export default function KeyImportDialog({ open, onClose }: KeyImportDialogProps)
         }
     };
 
-    const handleImport: () => Promise<void> = async () => {
+    const handleImport = async (): Promise<void> => {
         if (!fingerprint || !server) {
             return;
         }
@@ -81,38 +81,38 @@ export default function KeyImportDialog({ open, onClose }: KeyImportDialogProps)
         }
     };
 
-    return <Dialog open={open} onClose={handleClose} maxWidth="lg" fullWidth>
+    return <Dialog fullWidth maxWidth="lg" onClose={handleClose} open={open}>
         <DialogHeader onClose={handleClose}>
             Import key from PGP server
         </DialogHeader>
 
         <DialogContent>
             <TextField
-                label="fingerprint"
-                placeholder="PGP key fingerprint"
                 fullWidth
+                label="fingerprint"
                 margin="normal"
-                value={fingerprint}
                 onChange={event => setFingerprint(event.target.value)}
+                placeholder="PGP key fingerprint"
+                value={fingerprint}
             />
             <TextField
-                label="key server"
-                placeholder="PGP key server"
                 fullWidth
+                label="key server"
                 margin="normal"
-                value={server}
                 onChange={event => setServer(event.target.value)}
+                placeholder="PGP key server"
+                value={server}
             />
             {keyBody &&
                 <Box sx={{ mt: 2 }}>
-                    <CodeBlock content={keyBody} height={300} />
+                    <CodeBlock height={300} content={keyBody} />
                 </Box>
             }
         </DialogContent>
 
         <DialogActions>
-            <Button onClick={() => void handleImport()} variant="contained" startIcon={<PlayArrowIcon />}>import</Button>
-            <Button onClick={() => void handleFetch()} variant="contained" color="success" startIcon={<RefreshIcon />}>fetch</Button>
+            <Button onClick={() => void handleImport()} startIcon={<PlayArrowIcon />} variant="contained">import</Button>
+            <Button color="success" onClick={() => void handleFetch()} startIcon={<RefreshIcon />} variant="contained">fetch</Button>
         </DialogActions>
     </Dialog>;
 }

frontend/src/components/dialogs/LoginDialog.tsx

@@ -36,11 +36,11 @@ import { useNotification } from "hooks/useNotification";
 import React, { useState } from "react";
 
 interface LoginDialogProps {
-    open: boolean;
     onClose: () => void;
+    open: boolean;
 }
 
-export default function LoginDialog({ open, onClose }: LoginDialogProps): React.JSX.Element {
+export default function LoginDialog({ onClose, open }: LoginDialogProps): React.JSX.Element {
     const [username, setUsername] = useState("");
     const [password, setPassword] = useState("");
     const [showPassword, setShowPassword] = useState(false);
@@ -54,7 +54,7 @@ export default function LoginDialog({ open, onClose }: LoginDialogProps): React.
         onClose();
     };
 
-    const handleSubmit: () => Promise<void> = async () => {
+    const handleSubmit = async (): Promise<void> => {
         if (!username || !password) {
             return;
         }
@@ -72,26 +72,24 @@ export default function LoginDialog({ open, onClose }: LoginDialogProps): React.
         }
     };
 
-    return <Dialog open={open} onClose={handleClose} maxWidth="xs" fullWidth>
+    return <Dialog fullWidth maxWidth="xs" onClose={handleClose} open={open}>
         <DialogHeader onClose={handleClose}>
             Login
         </DialogHeader>
 
         <DialogContent>
             <TextField
-                label="username"
-                fullWidth
-                margin="normal"
-                value={username}
-                onChange={event => setUsername(event.target.value)}
                 autoFocus
+                fullWidth
+                label="username"
+                margin="normal"
+                onChange={event => setUsername(event.target.value)}
+                value={username}
             />
             <TextField
-                label="password"
                 fullWidth
+                label="password"
                 margin="normal"
-                type={showPassword ? "text" : "password"}
-                value={password}
                 onChange={event => setPassword(event.target.value)}
                 onKeyDown={event => {
                     if (event.key === "Enter") {
@@ -102,17 +100,24 @@ export default function LoginDialog({ open, onClose }: LoginDialogProps): React.
                     input: {
                         endAdornment:
                             <InputAdornment position="end">
-                                <IconButton aria-label={showPassword ? "Hide password" : "Show password"} onClick={() => setShowPassword(!showPassword)} edge="end" size="small">
+                                <IconButton
+                                    aria-label={showPassword ? "Hide password" : "Show password"}
+                                    edge="end"
+                                    onClick={() => setShowPassword(!showPassword)}
+                                    size="small"
+                                >
                                     {showPassword ? <VisibilityOffIcon /> : <VisibilityIcon />}
                                 </IconButton>
                             </InputAdornment>,
                     },
                 }}
+                type={showPassword ? "text" : "password"}
+                value={password}
             />
         </DialogContent>
 
         <DialogActions>
-            <Button onClick={() => void handleSubmit()} variant="contained" startIcon={<PersonIcon />}>login</Button>
+            <Button onClick={() => void handleSubmit()} startIcon={<PersonIcon />} variant="contained">login</Button>
         </DialogActions>
     </Dialog>;
 }

frontend/src/components/dialogs/PackageAddDialog.tsx

@@ -52,11 +52,11 @@ interface EnvironmentVariable {
 }
 
 interface PackageAddDialogProps {
-    open: boolean;
     onClose: () => void;
+    open: boolean;
 }
 
-export default function PackageAddDialog({ open, onClose }: PackageAddDialogProps): React.JSX.Element {
+export default function PackageAddDialog({ onClose, open }: PackageAddDialogProps): React.JSX.Element {
     const client = useClient();
     const { showSuccess, showError } = useNotification();
     const repositorySelect = useSelectedRepository();
@@ -77,9 +77,9 @@ export default function PackageAddDialog({ open, onClose }: PackageAddDialogProp
     const debouncedSearch = useDebounce(packageName, 500);
 
     const { data: searchResults = [] } = useQuery<AURPackage[]>({
-        queryKey: QueryKeys.search(debouncedSearch),
-        queryFn: () => client.service.servicePackageSearch(debouncedSearch),
         enabled: debouncedSearch.length >= 3,
+        queryFn: () => client.service.servicePackageSearch(debouncedSearch),
+        queryKey: QueryKeys.search(debouncedSearch),
     });
 
     const handleSubmit = async (action: "add" | "request"): Promise<void> => {
@@ -107,7 +107,7 @@ export default function PackageAddDialog({ open, onClose }: PackageAddDialogProp
         }
     };
 
-    return <Dialog open={open} onClose={handleClose} maxWidth="md" fullWidth>
+    return <Dialog fullWidth maxWidth="md" onClose={handleClose} open={open}>
         <DialogHeader onClose={handleClose}>
             Add new packages
         </DialogHeader>
@@ -117,20 +117,18 @@ export default function PackageAddDialog({ open, onClose }: PackageAddDialogProp
 
             <Autocomplete
                 freeSolo
-                options={searchResults.map(pkg => pkg.package)}
                 inputValue={packageName}
                 onInputChange={(_, value) => setPackageName(value)}
+                options={searchResults.map(pkg => pkg.package)}
+                renderInput={params =>
+                    <TextField {...params} label="package" margin="normal" placeholder="AUR package" />
+                }
                 renderOption={(props, option) => {
                     const pkg = searchResults.find(pkg => pkg.package === option);
-                    return (
-                        <li {...props} key={option}>
-                            {option}{pkg ? ` (${pkg.description})` : ""}
-                        </li>
-                    );
+                    return <li {...props} key={option}>
+                        {option}{pkg ? ` (${pkg.description})` : ""}
+                    </li>;
                 }}
-                renderInput={params =>
-                    <TextField {...params} label="package" placeholder="AUR package" margin="normal" />
-                }
             />
 
             <FormControlLabel
@@ -140,45 +138,50 @@ export default function PackageAddDialog({ open, onClose }: PackageAddDialogProp
 
             <Button
                 fullWidth
-                variant="outlined"
-                startIcon={<AddIcon />}
                 onClick={() => {
                     const id = variableIdCounter.current++;
                     setEnvironmentVariables(prev => [...prev, { id, key: "", value: "" }]);
                 }}
+                startIcon={<AddIcon />}
                 sx={{ mt: 1 }}
+                variant="outlined"
             >
                 add environment variable
             </Button>
 
             {environmentVariables.map(variable =>
-                <Box key={variable.id} sx={{ display: "flex", gap: 1, mt: 1, alignItems: "center" }}>
+                <Box key={variable.id} sx={{ alignItems: "center", display: "flex", gap: 1, mt: 1 }}>
                     <TextField
-                        size="small"
-                        placeholder="name"
-                        value={variable.key}
                         onChange={event => {
                             const newKey = event.target.value;
                             setEnvironmentVariables(prev =>
                                 prev.map(entry => entry.id === variable.id ? { ...entry, key: newKey } : entry),
                             );
                         }}
+                        placeholder="name"
+                        size="small"
                         sx={{ flex: 1 }}
+                        value={variable.key}
                     />
                     <Box>=</Box>
                     <TextField
-                        size="small"
                         placeholder="value"
-                        value={variable.value}
                         onChange={event => {
                             const newValue = event.target.value;
                             setEnvironmentVariables(prev =>
                                 prev.map(entry => entry.id === variable.id ? { ...entry, value: newValue } : entry),
                             );
                         }}
+                        size="small"
                         sx={{ flex: 1 }}
+                        value={variable.value}
                     />
-                    <IconButton size="small" color="error" aria-label="Remove variable" onClick={() => setEnvironmentVariables(prev => prev.filter(entry => entry.id !== variable.id))}>
+                    <IconButton
+                        aria-label="Remove variable"
+                        color="error"
+                        onClick={() => setEnvironmentVariables(prev => prev.filter(entry => entry.id !== variable.id))}
+                        size="small"
+                    >
                         <DeleteIcon />
                     </IconButton>
                 </Box>,
@@ -186,8 +189,8 @@ export default function PackageAddDialog({ open, onClose }: PackageAddDialogProp
         </DialogContent>
 
         <DialogActions>
-            <Button onClick={() => void handleSubmit("add")} variant="contained" startIcon={<PlayArrowIcon />}>add</Button>
-            <Button onClick={() => void handleSubmit("request")} variant="contained" color="success" startIcon={<AddIcon />}>request</Button>
+            <Button onClick={() => void handleSubmit("add")} startIcon={<PlayArrowIcon />} variant="contained">add</Button>
+            <Button color="success" onClick={() => void handleSubmit("request")} startIcon={<AddIcon />} variant="contained">request</Button>
         </DialogActions>
     </Dialog>;
 }

frontend/src/components/dialogs/PackageInfoDialog.tsx

@@ -45,17 +45,17 @@ import { StatusHeaderStyles } from "theme/StatusColors";
 import { defaultInterval } from "utils";
 
 interface PackageInfoDialogProps {
-    packageBase: string | null;
-    open: boolean;
-    onClose: () => void;
     autoRefreshIntervals: AutoRefreshInterval[];
+    onClose: () => void;
+    open: boolean;
+    packageBase: string | null;
 }
 
 export default function PackageInfoDialog({
-    packageBase,
-    open,
-    onClose,
     autoRefreshIntervals,
+    onClose,
+    open,
+    packageBase,
 }: PackageInfoDialogProps): React.JSX.Element {
     const client = useClient();
     const { currentRepository } = useRepository();
@@ -80,32 +80,32 @@ export default function PackageInfoDialog({
     const autoRefresh = useAutoRefresh("package-info-autoreload-button", defaultInterval(autoRefreshIntervals));
 
     const { data: packageData } = useQuery<PackageStatus[]>({
-        queryKey: localPackageBase && currentRepository ? QueryKeys.package(localPackageBase, currentRepository) : ["packages"],
+        enabled: open,
         queryFn: localPackageBase && currentRepository ?
             () => client.fetch.fetchPackage(localPackageBase, currentRepository) : skipToken,
-        enabled: open,
+        queryKey: localPackageBase && currentRepository ? QueryKeys.package(localPackageBase, currentRepository) : ["packages"],
         refetchInterval: autoRefresh.interval > 0 ? autoRefresh.interval : false,
     });
 
     const { data: dependencies } = useQuery<Dependencies>({
-        queryKey: localPackageBase && currentRepository ? QueryKeys.dependencies(localPackageBase, currentRepository) : ["dependencies"],
+        enabled: open,
         queryFn: localPackageBase && currentRepository ?
             () => client.fetch.fetchPackageDependencies(localPackageBase, currentRepository) : skipToken,
-        enabled: open,
+        queryKey: localPackageBase && currentRepository ? QueryKeys.dependencies(localPackageBase, currentRepository) : ["dependencies"],
     });
 
     const { data: patches = [] } = useQuery<Patch[]>({
-        queryKey: localPackageBase ? QueryKeys.patches(localPackageBase) : ["patches"],
-        queryFn: localPackageBase ? () => client.fetch.fetchPackagePatches(localPackageBase) : skipToken,
         enabled: open,
+        queryFn: localPackageBase ? () => client.fetch.fetchPackagePatches(localPackageBase) : skipToken,
+        queryKey: localPackageBase ? QueryKeys.patches(localPackageBase) : ["patches"],
     });
 
-    const description: PackageStatus | undefined = packageData?.[0];
+    const description = packageData?.[0];
     const pkg = description?.package;
     const status = description?.status;
     const headerStyle = status ? StatusHeaderStyles[status.status] : {};
 
-    const handleUpdate: () => Promise<void> = async () => {
+    const handleUpdate = async (): Promise<void> => {
         if (!localPackageBase || !currentRepository) {
             return;
         }
@@ -118,7 +118,7 @@ export default function PackageInfoDialog({
         }
     };
 
-    const handleRemove: () => Promise<void> = async () => {
+    const handleRemove = async (): Promise<void> => {
         if (!localPackageBase || !currentRepository) {
             return;
         }
@@ -131,20 +131,20 @@ export default function PackageInfoDialog({
         }
     };
 
-    const handleHoldToggle: () => Promise<void> = async () => {
+    const handleHoldToggle = async (): Promise<void> => {
         if (!localPackageBase || !currentRepository) {
             return;
         }
         try {
             const newHeldStatus = !(status?.is_held ?? false);
-            await client.service.servicePackageHoldUpdate(localPackageBase, currentRepository, newHeldStatus);
+            await client.service.servicePackageHold(localPackageBase, currentRepository, newHeldStatus);
             void queryClient.invalidateQueries({ queryKey: QueryKeys.package(localPackageBase, currentRepository) });
         } catch (exception) {
             showError("Action failed", `Could not update hold status: ${ApiError.errorDetail(exception)}`);
         }
     };
 
-    const handleDeletePatch: (key: string) => Promise<void> = async key => {
+    const handleDeletePatch = async (key: string): Promise<void> => {
         if (!localPackageBase) {
             return;
         }
@@ -156,7 +156,7 @@ export default function PackageInfoDialog({
         }
     };
 
-    return <Dialog open={open} onClose={handleClose} maxWidth="lg" fullWidth>
+    return <Dialog fullWidth maxWidth="lg" onClose={handleClose} open={open}>
         <DialogHeader onClose={handleClose} sx={headerStyle}>
             {pkg && status
                 ? `${pkg.base} ${status.status} at ${new Date(status.timestamp * 1000).toISOStringShort()}`
@@ -166,24 +166,24 @@ export default function PackageInfoDialog({
         <DialogContent>
             {pkg &&
                 <>
-                    <PackageDetailsGrid pkg={pkg} dependencies={dependencies} />
+                    <PackageDetailsGrid dependencies={dependencies} pkg={pkg} />
                     <PackagePatchesList
-                        patches={patches}
                         editable={isAuthorized}
                         onDelete={key => void handleDeletePatch(key)}
+                        patches={patches}
                     />
 
                     <Box sx={{ borderBottom: 1, borderColor: "divider", mt: 2 }}>
-                        <Tabs value={activeTab} onChange={(_, tab: TabKey) => setActiveTab(tab)}>
-                            {tabs.map(({ key, label }) => <Tab key={key} value={key} label={label} />)}
+                        <Tabs onChange={(_, tab: TabKey) => setActiveTab(tab)} value={activeTab}>
+                            {tabs.map(({ key, label }) => <Tab key={key} label={label} value={key} />)}
                         </Tabs>
                     </Box>
 
                     {activeTab === "logs" && localPackageBase && currentRepository &&
                         <BuildLogsTab
                             packageBase={localPackageBase}
-                            repository={currentRepository}
                             refreshInterval={autoRefresh.interval}
+                            repository={currentRepository}
                         />
                     }
                     {activeTab === "changes" && localPackageBase && currentRepository &&
@@ -197,25 +197,26 @@ export default function PackageInfoDialog({
                     }
                     {activeTab === "artifacts" && localPackageBase && currentRepository &&
                         <ArtifactsTab
+                            currentVersion={pkg.version}
                             packageBase={localPackageBase}
                             repository={currentRepository}
-                            currentVersion={pkg.version} />
+                        />
                     }
                 </>
             }
         </DialogContent>
 
         <PackageInfoActions
-            isAuthorized={isAuthorized}
-            refreshDatabase={refreshDatabase}
-            onRefreshDatabaseChange={setRefreshDatabase}
-            isHeld={status?.is_held ?? false}
-            onHoldToggle={() => void handleHoldToggle()}
-            onUpdate={() => void handleUpdate()}
-            onRemove={() => void handleRemove()}
-            autoRefreshIntervals={autoRefreshIntervals}
             autoRefreshInterval={autoRefresh.interval}
+            autoRefreshIntervals={autoRefreshIntervals}
+            isAuthorized={isAuthorized}
+            isHeld={status?.is_held ?? false}
             onAutoRefreshIntervalChange={autoRefresh.setInterval}
+            onHoldToggle={() => void handleHoldToggle()}
+            onRefreshDatabaseChange={setRefreshDatabase}
+            onRemove={() => void handleRemove()}
+            onUpdate={() => void handleUpdate()}
+            refreshDatabase={refreshDatabase}
         />
     </Dialog>;
 }

frontend/src/components/dialogs/PackageRebuildDialog.tsx

@@ -28,11 +28,11 @@ import { useSelectedRepository } from "hooks/useSelectedRepository";
 import React, { useState } from "react";
 
 interface PackageRebuildDialogProps {
-    open: boolean;
     onClose: () => void;
+    open: boolean;
 }
 
-export default function PackageRebuildDialog({ open, onClose }: PackageRebuildDialogProps): React.JSX.Element {
+export default function PackageRebuildDialog({ onClose, open }: PackageRebuildDialogProps): React.JSX.Element {
     const client = useClient();
     const { showSuccess, showError } = useNotification();
     const repositorySelect = useSelectedRepository();
@@ -45,7 +45,7 @@ export default function PackageRebuildDialog({ open, onClose }: PackageRebuildDi
         onClose();
     };
 
-    const handleRebuild: () => Promise<void> = async () => {
+    const handleRebuild = async (): Promise<void> => {
         if (!dependency) {
             return;
         }
@@ -63,7 +63,7 @@ export default function PackageRebuildDialog({ open, onClose }: PackageRebuildDi
         }
     };
 
-    return <Dialog open={open} onClose={handleClose} maxWidth="md" fullWidth>
+    return <Dialog fullWidth maxWidth="md" onClose={handleClose} open={open}>
         <DialogHeader onClose={handleClose}>
             Rebuild depending packages
         </DialogHeader>
@@ -72,17 +72,17 @@ export default function PackageRebuildDialog({ open, onClose }: PackageRebuildDi
             <RepositorySelect repositorySelect={repositorySelect} />
 
             <TextField
-                label="dependency"
-                placeholder="packages dependency"
                 fullWidth
+                label="dependency"
                 margin="normal"
-                value={dependency}
+                placeholder="packages dependency"
                 onChange={event => setDependency(event.target.value)}
+                value={dependency}
             />
         </DialogContent>
 
         <DialogActions>
-            <Button onClick={() => void handleRebuild()} variant="contained" startIcon={<PlayArrowIcon />}>rebuild</Button>
+            <Button onClick={() => void handleRebuild()} startIcon={<PlayArrowIcon />} variant="contained">rebuild</Button>
         </DialogActions>
     </Dialog>;
 }