refactor: compose the app register dialog from shared steps

Sharing one dialog component meant the administration screen borrowed the
organization screen's translation keys, so admin-specific wording had
nowhere to live.

The dialog is now a set of presentational blocks — shell, manifest-URL step,
consent step — plus a state hook, none of which hold strings. Each screen
composes them and passes its own literal-keyed labels and data-cy values,
so the administration screen gets administration_apps_register_* keys while
the organization screen keeps its existing, already-translated ones.

Author: JanCizmar

webapp/src/component/apps/AppRegisterConsentStep.tsx

@@ -0,0 +1,89 @@
+import React from 'react';
+import {
+  Box,
+  Button,
+  DialogActions,
+  DialogContent,
+  Typography,
+} from '@mui/material';
+
+import LoadingButton from 'tg.component/common/form/LoadingButton';
+
+import { AppSummary } from './AppSummary';
+import { AppChips } from './AppChips';
+import { AppManifestPreviewModel } from './useAppRegisterState';
+
+type Props = {
+  preview: AppManifestPreviewModel;
+  intro: React.ReactNode;
+  noScopesLabel: React.ReactNode;
+  backLabel: React.ReactNode;
+  submitLabel: React.ReactNode;
+  loading: boolean;
+  onBack: () => void;
+  onSubmit: () => void;
+  contentDataCy: string;
+  noScopesDataCy: string;
+  scopesDataCy: string;
+  backDataCy: string;
+  submitDataCy: string;
+};
+
+/** Second registration step: what the fetched manifest asks for, before it is approved. */
+export const AppRegisterConsentStep = ({
+  preview,
+  intro,
+  noScopesLabel,
+  backLabel,
+  submitLabel,
+  loading,
+  onBack,
+  onSubmit,
+  contentDataCy,
+  noScopesDataCy,
+  scopesDataCy,
+  backDataCy,
+  submitDataCy,
+}: Props) => (
+  <>
+    <DialogContent data-cy={contentDataCy}>
+      <Box mb={2}>
+        <AppSummary
+          name={preview.name}
+          version={preview.version}
+          url={preview.baseUrl}
+        />
+      </Box>
+
+      <Typography variant="body2" mb={1}>
+        {intro}
+      </Typography>
+
+      {preview.requestedScopes.length === 0 && (
+        <Typography
+          variant="body2"
+          color="text.secondary"
+          data-cy={noScopesDataCy}
+        >
+          {noScopesLabel}
+        </Typography>
+      )}
+
+      <AppChips items={preview.requestedScopes} dataCy={scopesDataCy} />
+    </DialogContent>
+    <DialogActions>
+      <Button data-cy={backDataCy} onClick={onBack} disabled={loading}>
+        {backLabel}
+      </Button>
+      <LoadingButton
+        data-cy={submitDataCy}
+        variant="contained"
+        color="primary"
+        loading={loading}
+        onClick={onSubmit}
+      >
+        {submitLabel}
+      </LoadingButton>
+    </DialogActions>
+  </>
+);

webapp/src/component/apps/AppRegisterDialog.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Dialog, DialogTitle } from '@mui/material';
+
+type Props = {
+  open: boolean;
+  onClose: () => void;
+  title: React.ReactNode;
+  dataCy: string;
+  children: React.ReactNode;
+};
+
+/** Dialog frame for the app registration steps. */
+export const AppRegisterDialogShell = ({
+  open,
+  onClose,
+  title,
+  dataCy,
+  children,
+}: Props) => (
+  <Dialog
+    open={open}
+    onClose={onClose}
+    maxWidth="sm"
+    fullWidth
+    data-cy={dataCy}
+  >
+    <DialogTitle>{title}</DialogTitle>
+    {children}
+  </Dialog>
+);