consolidate admin action bar

src/admin/analytics/EditAnalyticsForm.tsx

@@ -1,8 +1,5 @@
 import {
-    Box,
-    Button,
     Card,
-    CardActions,
     CardContent,
     FormControl,
     InputLabel,
@@ -12,10 +9,10 @@ import {
 } from '@mui/material'
 import { FC, useContext, useState } from 'react'
 import { Editorial } from 'editorials'
-import SaveIcon from '@mui/icons-material/Save'
 import { PhraseContext } from 'phrases'
 import { getOption } from 'options'
 import { AnalyticsOptions } from 'analytics/types'
+import { AdminActionPanel } from 'components/AdminActionPanel'
 import type { Option } from '../../options/types'
 
 const NS = 'ANALYTICS'
@@ -71,29 +68,20 @@ export const EditAnalyticsForm: FC<{
                     />
                 </FormControl>
             </CardContent>
-            <CardActions>
-                <Box flex={1} />
-                <Button
-                    id={`${NS}_ACTION_SAVE`}
-                    type="submit"
-                    variant="contained"
-                    startIcon={<SaveIcon />}
-                    onClick={() =>
-                        onUpdate([
-                            {
-                                key: 'config',
-                                value: config,
-                            },
-                            {
-                                key: 'provider',
-                                value: provider,
-                            },
-                        ])
-                    }
-                >
-                    {phrase(`${NS}_ACTION_SAVE`, 'Spara')}
-                </Button>
-            </CardActions>
+            <AdminActionPanel
+                onSave={() =>
+                    onUpdate([
+                        {
+                            key: 'config',
+                            value: config,
+                        },
+                        {
+                            key: 'provider',
+                            value: provider,
+                        },
+                    ])
+                }
+            />
         </Card>
     )
 }

src/admin/api-keys/ApiKeysForm.tsx

@@ -1,8 +1,6 @@
 import {
-    Box,
     Button,
     Card,
-    CardActions,
     CardContent,
     CardHeader,
     FormControl,
@@ -18,10 +16,10 @@ import {
 import { PhraseContext } from 'phrases/PhraseContext'
 import { FC, useCallback, useContext, useState } from 'react'
 import AddIcon from '@mui/icons-material/Add'
-import SaveIcon from '@mui/icons-material/Save'
 import { nanoid } from 'nanoid'
 import { ApiKey } from 'api-keys/types'
 import { Editorial } from 'editorials'
+import { AdminActionPanel } from 'components/AdminActionPanel'
 
 export const ApiKeysForm: FC<{
     title?: string
@@ -168,7 +166,17 @@ Givet api nyckel i autkoriseringsheader körs ett anrop som användaren angivet
                     </Table>
                 </TableContainer>
             </CardContent>
-            <CardActions>
+            <AdminActionPanel
+                onSave={() =>
+                    onSave(
+                        model.map(({ email, secret, expires }) => ({
+                            email,
+                            secret,
+                            expires,
+                        }))
+                    )
+                }
+            >
                 <Button
                     variant="contained"
                     startIcon={<AddIcon />}
@@ -184,23 +192,7 @@ Givet api nyckel i autkoriseringsheader körs ett anrop som användaren angivet
                 >
                     {phrase('APIKEYS_ADD', 'Lägg till nyckel')}
                 </Button>
-                <Box flex={1} />
-                <Button
-                    variant="contained"
-                    startIcon={<SaveIcon />}
-                    onClick={() =>
-                        onSave(
-                            model.map(({ email, secret, expires }) => ({
-                                email,
-                                secret,
-                                expires,
-                            }))
-                        )
-                    }
-                >
-                    {phrase('APIKEYS_SAVE', 'Spara')}
-                </Button>
-            </CardActions>
+            </AdminActionPanel>
         </Card>
     )
 }

src/admin/content/EditContentForm.tsx

@@ -12,11 +12,11 @@ import { ContentCard } from 'content/components/ContentCard'
 import DeleteIcon from '@mui/icons-material/Delete'
 import AddIcon from '@mui/icons-material/Add'
 import EditIcon from '@mui/icons-material/Edit'
-import SaveOutlinedIcon from '@mui/icons-material/SaveOutlined'
 import ChevronLeftIcon from '@mui/icons-material/ChevronLeft'
 import ChevronRightIcon from '@mui/icons-material/ChevronRight'
 import MoveUpIcon from '@mui/icons-material/MoveUp'
 import MoveDownIcon from '@mui/icons-material/MoveDown'
+import { AdminActionPanel } from 'components/AdminActionPanel'
 import { PropertyEditor } from './PropertyEditor'
 
 type Cell = {
@@ -63,12 +63,18 @@ export const EditContentForm = (props: {
 
     const [cache, setCache] = useState<ContentModuleWithPosition | undefined>()
     const [rows, setRows] = useState(page.rows)
+    const [canSave, setCanSave] = useState(true)
 
-    const saveComposition = async () => {
-        await update({
+    const saveComposition = useCallback(() => {
+        setCanSave(false)
+        update({
             rows,
-        }).then((page) => setRows(page.rows))
-    }
+        }).then((page) => {
+            setRows(page.rows)
+            setCanSave(true)
+        })
+    }, [rows])
+
     // Column actions
     const insertCell = useCallback(
         ({ row, col }: Cell) => {
@@ -111,10 +117,10 @@ export const EditContentForm = (props: {
         ...rows[row].columns[col].module,
     })
     const cacheModule = useCallback(
-        ({ row, col }: Cell) =>
+        (position: Cell) =>
             setCache({
-                position: { row, col },
-                module: copyModule({ row, col }),
+                position,
+                module: copyModule(position),
             }),
         [rows]
     )
@@ -196,18 +202,17 @@ export const EditContentForm = (props: {
 
     return (
         <>
-            <Button
-                startIcon={<AddIcon />}
-                onClick={() => setRows([createRow(), ...rows])}
-            >
-                Ny rad
-            </Button>
-            <Button
-                startIcon={<SaveOutlinedIcon />}
-                onClick={() => saveComposition()}
+            <AdminActionPanel
+                disabled={!canSave}
+                onSave={() => saveComposition()}
             >
-                Spara
-            </Button>
+                <Button
+                    startIcon={<AddIcon />}
+                    onClick={() => setRows([createRow(), ...rows])}
+                >
+                    Ny rad
+                </Button>
+            </AdminActionPanel>
             {rows.map((row, rowIndex) => (
                 <Grid
                     key={rowIndex}

src/admin/login/LoginPoliciesForm.tsx

@@ -1,8 +1,6 @@
 import {
-    Box,
     Button,
     Card,
-    CardActions,
     CardContent,
     CardHeader,
     Checkbox,
@@ -19,12 +17,12 @@ import {
 import { PhraseContext } from 'phrases/PhraseContext'
 import { FC, useCallback, useContext, useState } from 'react'
 import AddIcon from '@mui/icons-material/Add'
-import SaveIcon from '@mui/icons-material/Save'
 import { nanoid } from 'nanoid'
 import { Editorial } from 'editorials'
 import { LoginPolicy } from 'login-policies/types'
 import { rolesArrayToRoles, rolesToRolesArray } from 'auth/mappers'
 import { HaffaUserRoles } from 'auth'
+import { AdminActionPanel } from 'components/AdminActionPanel'
 import { SelectUserRoles } from './SelectUserRoles'
 import { EffectivePermissionsPanel } from './EffectivePermissionsPanel'
 
@@ -167,7 +165,17 @@ export const LoginPoliciesForm: FC<{
                         </Table>
                     </TableContainer>
                 </CardContent>
-                <CardActions>
+                <AdminActionPanel
+                    onSave={() =>
+                        onSave(
+                            policies.map(({ email, roles, deny }) => ({
+                                emailPattern: email,
+                                roles: rolesToRolesArray(roles),
+                                deny,
+                            }))
+                        )
+                    }
+                >
                     <Button
                         variant="contained"
                         startIcon={<AddIcon />}
@@ -190,23 +198,7 @@ export const LoginPoliciesForm: FC<{
                     >
                         {phrase('LOGINS_ADD_RULE', 'Lägg till regel')}
                     </Button>
-                    <Box flex={1} />
-                    <Button
-                        variant="contained"
-                        startIcon={<SaveIcon />}
-                        onClick={() =>
-                            onSave(
-                                policies.map(({ email, roles, deny }) => ({
-                                    emailPattern: email,
-                                    roles: rolesToRolesArray(roles),
-                                    deny,
-                                }))
-                            )
-                        }
-                    >
-                        {phrase('LOGINS_SAVE', 'Spara')}
-                    </Button>
-                </CardActions>
+                </AdminActionPanel>
             </Card>
             <Card sx={{ mt: 2 }}>
                 <CardHeader

src/admin/phrases/EditPhrasesForm.tsx

@@ -1,10 +1,7 @@
 import { FC, useCallback, useContext, useState } from 'react'
 import {
-    Button,
     Card,
-    CardActions,
     CardContent,
-    Grid,
     Table,
     TableBody,
     TableCell,
@@ -16,6 +13,7 @@ import {
 import { PhraseContext } from 'phrases'
 import { toMap } from 'lib/to-map'
 import { PhraseDefinition } from 'phrases/types'
+import { AdminActionPanel } from 'components/AdminActionPanel'
 import type { Option } from '../../options/types'
 
 export const EditPhrasesForm: FC<{
@@ -82,32 +80,19 @@ export const EditPhrasesForm: FC<{
         },
         [model, setModel]
     )
-    const renderButtons = () => (
-        <Grid container>
-            <Grid item flex={1} />
-            <Grid item>
-                <Button
-                    variant="contained"
-                    onClick={() =>
-                        onUpdate(
-                            model.phrases
-                                .map(({ key, actual }) => ({
-                                    key,
-                                    value: actual.trim(),
-                                }))
-                                .filter(({ value }) => value)
-                        )
-                    }
-                >
-                    Spara
-                </Button>
-            </Grid>
-        </Grid>
-    )
+    const update = () =>
+        onUpdate(
+            model.phrases
+                .map(({ key, actual }) => ({
+                    key,
+                    value: actual.trim(),
+                }))
+                .filter(({ value }) => value)
+        )
 
     return (
         <Card>
-            <CardActions>{renderButtons()}</CardActions>
+            <AdminActionPanel onSave={update} />
             <CardContent>
                 <TableContainer>
                     <Table>
@@ -180,7 +165,7 @@ export const EditPhrasesForm: FC<{
                     </Table>
                 </TableContainer>
             </CardContent>
-            <CardActions>{renderButtons()}</CardActions>
+            <AdminActionPanel onSave={update} />
         </Card>
     )
 }