Update appkit and replace own components by the ones from appkit (#1199)

We wanted to use several components (in particular the
`ConfirmationModal`) in other Opencast projects (e.g. editor), so
Tobira's components were moved into `appkit`. This PR updates appkit and
removes the now duplicate definition from Tobira. Mostly done by @Arnei

Replaces #1170

frontend/package.json

@@ -29,7 +29,7 @@
     "@babel/preset-typescript": "^7.23.3",
     "@emotion/cache": "^11.11.0",
     "@emotion/react": "^11.11.4",
-    "@opencast/appkit": "^0.2.4",
+    "@opencast/appkit": "^0.3.1",
     "@svgr/webpack": "^8.1.0",
     "babel-loader": "^9.1.3",
     "babel-plugin-relay": "^16.2.0",

frontend/src/App.tsx

@@ -11,7 +11,12 @@ import { MatchedRoute } from "./rauta";
 import { MenuProvider } from "./layout/MenuState";
 import { GraphQLErrorBoundary } from "./relay/boundary";
 import { LoadingIndicator } from "./ui/LoadingIndicator";
-import { AppkitConfigProvider, ColorSchemeProvider, DEFAULT_CONFIG } from "@opencast/appkit";
+import {
+    AppkitConfig,
+    AppkitConfigProvider,
+    ColorSchemeProvider,
+    DEFAULT_CONFIG,
+} from "@opencast/appkit";
 import { COLORS } from "./color";
 import { InitialConsent } from "./ui/InitialConsent";
 
@@ -25,13 +30,7 @@ export const App: React.FC<Props> = ({ initialRoute, consentGiven }) => (
     <StrictMode>
         <SilenceEmotionWarnings>
             <ColorSchemeProvider allowedSchemes={["light", "dark"]}>
-                <AppkitConfigProvider config={{
-                    ...DEFAULT_CONFIG,
-                    colors: {
-                        ...DEFAULT_CONFIG.colors,
-                        focus: COLORS.focus,
-                    },
-                }}>
+                <AppkitConfigProvider config={APPKIT_CONFIG}>
                     <GlobalStyle />
                     <GlobalErrorBoundary>
                         <RelayEnvironmentProvider {...{ environment }}>
@@ -52,6 +51,34 @@ export const App: React.FC<Props> = ({ initialRoute, consentGiven }) => (
     </StrictMode>
 );
 
+const APPKIT_CONFIG: AppkitConfig = {
+    ...DEFAULT_CONFIG,
+    colors: {
+        ...DEFAULT_CONFIG.colors,
+
+        accent7: COLORS.primary0,
+        accent8: COLORS.primary1,
+        accent9: COLORS.primary2,
+        accent7BwInverted: COLORS.primary0BwInverted,
+        accent8BwInverted: COLORS.primary1BwInverted,
+        accent9BwInverted: COLORS.primary2BwInverted,
+
+        happy7: COLORS.primary0,
+        happy8: COLORS.primary1,
+        happy9: COLORS.primary2,
+        happy7BwInverted: COLORS.primary0BwInverted,
+        happy8BwInverted: COLORS.primary1BwInverted,
+        happy9BwInverted: COLORS.primary2BwInverted,
+
+        danger4: COLORS.danger0,
+        danger5: COLORS.danger1,
+        danger4BwInverted: COLORS.danger0BwInverted,
+        danger5BwInverted: COLORS.danger1BwInverted,
+
+        focus: COLORS.focus,
+    },
+};
+
 /**
  * This thingy is kind of sad. In short: emotion-js emits warnings whenever one
  * uses `:first-child` selectors in CSS. That's because stuff can break when

frontend/src/layout/header/Search.tsx

@@ -12,7 +12,7 @@ import {
     isValidSearchItemType,
 } from "../../routes/Search";
 import { focusStyle } from "../../ui";
-import { Spinner } from "../../ui/Spinner";
+import { Spinner } from "@opencast/appkit";
 import { currentRef, useDebounce } from "../../util";
 import { BREAKPOINT as NAV_BREAKPOINT } from "../Navigation";
 import { COLORS } from "../../color";

frontend/src/layout/header/UserBox.tsx

@@ -16,7 +16,7 @@ import { Link } from "../../router";
 import { User, useUser } from "../../User";
 import { ActionIcon, ICON_STYLE } from "./ui";
 import CONFIG from "../../config";
-import { Spinner } from "../../ui/Spinner";
+import { Spinner } from "@opencast/appkit";
 import { LoginRoute, REDIRECT_STORAGE_KEY } from "../../routes/Login";
 import { focusStyle } from "../../ui";
 import { ExternalLink } from "../../relay/auth";

frontend/src/relay/auth.tsx

@@ -7,7 +7,7 @@ import { environment } from ".";
 import { authJwtQuery, JwtService } from "./__generated__/authJwtQuery.graphql";
 import { FormEvent, PropsWithChildren } from "react";
 import { Link } from "../router";
-import { LinkButton } from "../ui/Button";
+import { LinkButton } from "../ui/LinkButton";
 
 
 /** Different external services we can link to using JWT pre-authentication */

frontend/src/relay/boundary.tsx

@@ -4,7 +4,7 @@ import React, { ReactNode } from "react";
 import { APIError, NotJson, ServerError } from ".";
 import { Root } from "../layout/Root";
 import { useRouter } from "../router";
-import { Card } from "../ui/Card";
+import { Card } from "@opencast/appkit";
 import { ErrorDisplay, NetworkError } from "../util/err";
 import { RouterControl } from "../rauta";
 import { UserProvider, Props as UserProviderProps } from "../User";

frontend/src/routes/Embed.tsx

@@ -11,7 +11,7 @@ import { GlobalErrorBoundary } from "../util/err";
 import { loadQuery } from "../relay";
 import { makeRoute, MatchedRoute } from "../rauta";
 import { Player, PlayerPlaceholder } from "../ui/player";
-import { Spinner } from "../ui/Spinner";
+import { Spinner } from "@opencast/appkit";
 import { MovingTruck } from "../ui/Waiting";
 import { b64regex } from "./util";
 import { EmbedQuery } from "./__generated__/EmbedQuery.graphql";

frontend/src/routes/Login.tsx

@@ -11,11 +11,9 @@ import { LoginQuery } from "./__generated__/LoginQuery.graphql";
 import { Footer } from "../layout/Footer";
 import { PageTitle } from "../layout/header/ui";
 import { useForm } from "react-hook-form";
-import { boxError } from "../ui/error";
 import { translatedConfig, useNoindexTag } from "../util";
-import { Spinner } from "../ui/Spinner";
+import { Spinner, boxError, Card } from "@opencast/appkit";
 import { LuCheck, LuChevronLeft, LuLogIn } from "react-icons/lu";
-import { Card } from "../ui/Card";
 import CONFIG from "../config";
 import { makeRoute } from "../rauta";
 import { Header } from "../layout/header";

frontend/src/routes/Realm.tsx

@@ -19,11 +19,9 @@ import { makeRoute } from "../rauta";
 import { MissingRealmName } from "./util";
 import { realmBreadcrumbs } from "../util/realm";
 import { isRealUser, useUser } from "../User";
-import { Card } from "../ui/Card";
-import { Button } from "../ui/Button";
+import { Button, Card } from "@opencast/appkit";
 import { displayCommitError } from "./manage/Realm/util";
-import { boxError } from "../ui/error";
-import { Spinner } from "../ui/Spinner";
+import { Spinner, boxError } from "@opencast/appkit";
 import { useRouter } from "../router";
 import { COLORS } from "../color";
 import { useMenu } from "../layout/MenuState";
@@ -282,7 +280,7 @@ const CreateUserRealm: React.FC<{ realmPath: string }> = ({ realmPath }) => {
             <p>{t("realm.user-realm.create.available-at")}</p>
             <code css={{ textAlign: "center" }}>{window.location.origin + realmPath}</code>
             <p>{t("realm.user-realm.create.find-and-delete")}</p>
-            <Button kind="happy"css={{ marginTop: 32 }} onClick={onSubmit}>
+            <Button kind="call-to-action"css={{ marginTop: 32 }} onClick={onSubmit}>
                 {t("realm.user-realm.create.button")}
             </Button>
             {isInFlight && <div css={{ marginTop: 16 }}><Spinner size={20} /></div>}

frontend/src/routes/Search.tsx

@@ -38,14 +38,13 @@ import {
     ThumbnailReplacement,
 } from "../ui/Video";
 import { SmallDescription } from "../ui/metadata";
-import { Card } from "../ui/Card";
 import { Breadcrumbs, BreadcrumbsContainer, BreadcrumbSeparator } from "../ui/Breadcrumbs";
 import { MissingRealmName } from "./util";
 import { ellipsisOverflowCss, focusStyle } from "../ui";
 import { COLORS } from "../color";
 import { BREAKPOINT_MEDIUM, BREAKPOINT_SMALL } from "../GlobalStyle";
 import { isExperimentalFlagSet, keyOfId } from "../util";
-import { Button } from "../ui/Button";
+import { Button, Card } from "@opencast/appkit";
 import { DirectVideoRoute, VideoRoute } from "./Video";
 import { DirectSeriesRoute } from "./Series";
 

frontend/src/routes/Upload.tsx

@@ -13,13 +13,12 @@ import { makeRoute } from "../rauta";
 import { ErrorDisplay, errorDisplayInfo } from "../util/err";
 import { useNavBlocker } from "./util";
 import CONFIG from "../config";
-import { Button, LinkButton } from "../ui/Button";
-import { boxError, ErrorBox } from "../ui/error";
+import { Button, boxError, ErrorBox, Card } from "@opencast/appkit";
+import { LinkButton } from "../ui/LinkButton";
 import { Form } from "../ui/Form";
 import { Input, TextArea } from "../ui/Input";
 import { isRealUser, User, useUser } from "../User";
 import { currentRef, useRefState } from "../util";
-import { Card } from "../ui/Card";
 import { FieldIsRequiredNote, InputContainer, TitleLabel } from "../ui/metadata";
 import { PageTitle } from "../layout/header/ui";
 import { useRouter } from "../router";
@@ -445,7 +444,7 @@ const FileSelect: React.FC<FileSelectProps> = ({ onSelect }) => {
             {/* "Select files" button */}
             <div css={{ marginTop: 16 }}>
                 <Button
-                    kind="happy"
+                    kind="call-to-action"
                     onClick={() => currentRef(fileInput).click()}
                 >{t("upload.select-files")}</Button>
                 <input
@@ -561,7 +560,7 @@ const UploadState: React.FC<{ state: NonFinishedUploadState }> = ({ state }) =>
         }}>
             <span>{t("upload.upload-cancelled")}</span>
             <div>
-                <LinkButton kind="happy" to={UploadRoute.url}>
+                <LinkButton kind="call-to-action" to={UploadRoute.url}>
                     {t("upload.reselect")}
                 </LinkButton>
             </div>
@@ -799,7 +798,7 @@ const MetaDataEdit: React.FC<MetaDataEditProps> = ({ onSave, disabled, knownRole
 
             {/* Submit button */}
             <Button
-                kind="happy"
+                kind="call-to-action"
                 disabled={disabled}
                 css={{ marginTop: 32, marginBottom: 160 }}
                 onClick={onSubmit}>

frontend/src/routes/Video.tsx

@@ -7,7 +7,9 @@ import { QRCodeCanvas } from "qrcode.react";
 import {
     match, unreachable, ProtoButton,
     useColorScheme, Floating, FloatingContainer, FloatingTrigger, WithTooltip, screenWidthAtMost,
+    Card, Button,
 } from "@opencast/appkit";
+import { VideoObject, WithContext } from "schema-dts";
 
 import { loadQuery } from "../relay";
 import { InitialLoading, RootLoader } from "../layout/Root";
@@ -32,7 +34,7 @@ import {
     keyOfId,
 } from "../util";
 import { BREAKPOINT_SMALL, BREAKPOINT_MEDIUM } from "../GlobalStyle";
-import { Button, LinkButton } from "../ui/Button";
+import { LinkButton } from "../ui/LinkButton";
 import CONFIG from "../config";
 import { Link, useRouter } from "../router";
 import { useUser } from "../User";
@@ -55,9 +57,7 @@ import { VideoPageByOcIdInRealmQuery } from "./__generated__/VideoPageByOcIdInRe
 import { getEventTimeInfo } from "../util/video";
 import { formatDuration } from "../ui/Video";
 import { ellipsisOverflowCss, focusStyle } from "../ui";
-import { Card } from "../ui/Card";
 import { realmBreadcrumbs } from "../util/realm";
-import { VideoObject, WithContext } from "schema-dts";
 import { TrackInfo } from "./manage/Video/TechnicalDetails";
 import { COLORS } from "../color";
 import { RelativeDate } from "../ui/time";

frontend/src/routes/manage/Realm/AddChild.tsx

@@ -14,11 +14,11 @@ import { Input } from "../../../ui/Input";
 import { Form } from "../../../ui/Form";
 import { PathSegmentInput } from "../../../ui/PathSegmentInput";
 import { PathInvalid } from ".";
-import { boxError, NotAuthorized } from "../../../ui/error";
+import { NotAuthorized } from "../../../ui/error";
 import { displayCommitError, RealmSettingsContainer, realmValidations } from "./util";
-import { Button } from "../../../ui/Button";
+import { Button, boxError } from "@opencast/appkit";
 import { AddChildMutation$data } from "./__generated__/AddChildMutation.graphql";
-import { Spinner } from "../../../ui/Spinner";
+import { Spinner } from "@opencast/appkit";
 import { Nav } from "../../../layout/Navigation";
 import { makeRoute } from "../../../rauta";
 import { ILLEGAL_CHARS, RealmEditLinks, RESERVED_CHARS } from "../../Realm";
@@ -213,7 +213,7 @@ const AddChild: React.FC<Props> = ({ parent }) => {
 
                 <div>
                     <div css={{ display: "flex", alignItems: "center", gap: 16 }}>
-                        <Button type="submit" kind="happy" disabled={isInFlight}>
+                        <Button type="submit" kind="call-to-action" disabled={isInFlight}>
                             {t("manage.add-child.button-create-page")}
                         </Button>
                         {isInFlight && <Spinner size={20} />}

frontend/src/routes/manage/Realm/ChildOrder.tsx

@@ -9,9 +9,7 @@ import {
     ChildOrderEditData$data,
     ChildOrderEditData$key,
 } from "./__generated__/ChildOrderEditData.graphql";
-import { Button } from "../../../ui/Button";
-import { Spinner } from "../../../ui/Spinner";
-import { boxError } from "../../../ui/error";
+import { Button, Spinner, boxError } from "@opencast/appkit";
 import { displayCommitError } from "./util";
 import { sortRealms } from "../../util";
 import { focusStyle } from "../../../ui";

frontend/src/routes/manage/Realm/Content/Block.tsx

@@ -2,11 +2,10 @@ import React, { useState, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { useFragment, graphql, useRelayEnvironment, commitLocalUpdate } from "react-relay";
 import type { RecordSourceProxy } from "relay-runtime";
-import { bug } from "@opencast/appkit";
+import { bug, Card } from "@opencast/appkit";
 
 import type { BlockRealmData$key } from "./__generated__/BlockRealmData.graphql";
 import { useRouter } from "../../../../router";
-import { Card } from "../../../../ui/Card";
 import { displayCommitError } from "../util";
 import { Block } from "../../../../ui/Blocks";
 import { EditButtons } from "./Edit";

frontend/src/routes/manage/Realm/Content/Edit/EditMode/Series.tsx

@@ -3,7 +3,6 @@ import { useTranslation } from "react-i18next";
 import { graphql, useFragment, useMutation } from "react-relay";
 import { useController, useFormContext } from "react-hook-form";
 
-import { Card } from "../../../../../../ui/Card";
 import { EditModeForm } from ".";
 import { Heading } from "./util";
 import type {
@@ -19,7 +18,7 @@ import {
 } from "./__generated__/SeriesEditCreateMutation.graphql";
 import { SeriesSelector } from "../../../../../../ui/SearchableSelect";
 import { DisplayOptionGroup } from "../../../../../../ui/Input";
-import { screenWidthAtMost } from "@opencast/appkit";
+import { Card, screenWidthAtMost } from "@opencast/appkit";
 import { BREAKPOINT_SMALL } from "../../../../../../GlobalStyle";
 import { InfoTooltip } from "../../../../../../ui";
 import { isRealUser, useUser } from "../../../../../../User";

frontend/src/routes/manage/Realm/Content/Edit/EditMode/Video.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from "react-i18next";
 import { TFunction } from "i18next";
 import { Controller, useFormContext } from "react-hook-form";
 
-import { Card } from "../../../../../../ui/Card";
+import { Card } from "@opencast/appkit";
 import { EditModeForm } from ".";
 import { Heading } from "./util";
 import type {

frontend/src/routes/manage/Realm/Content/Edit/EditMode/index.tsx

@@ -5,7 +5,7 @@ import { useForm, useFormContext, FormProvider } from "react-hook-form";
 import { bug, match } from "@opencast/appkit";
 
 import { ConfirmationModal, ConfirmationModalHandle } from "../../../../../../ui/Modal";
-import { Button } from "../../../../../../ui/Button";
+import { Button } from "@opencast/appkit";
 import { currentRef, useOnOutsideClick } from "../../../../../../util";
 import type { EditModeRealmData$key } from "./__generated__/EditModeRealmData.graphql";
 import type { EditModeFormRealmData$key } from "./__generated__/EditModeFormRealmData.graphql";
@@ -181,10 +181,7 @@ const EditModeButtons: React.FC<EditModeButtonsProps> = ({ onCancel }) => {
         >
             {t("manage.realm.content.cancel")}
         </Button>
-        <Button
-            kind="happy"
-            type="submit"
-        >
+        <Button kind="call-to-action" type="submit">
             {t("general.action.save")}
         </Button>
     </div>;

frontend/src/routes/manage/Realm/Content/index.tsx

@@ -16,12 +16,12 @@ import { NotAuthorized } from "../../../../ui/error";
 import { RealmSettingsContainer } from "../util";
 import { Nav } from "../../../../layout/Navigation";
 import { makeRoute } from "../../../../rauta";
-import { Spinner } from "../../../../ui/Spinner";
+import { Spinner } from "@opencast/appkit";
 import { AddButtons } from "./AddButtons";
 import { EditBlock } from "./Block";
 import { Breadcrumbs } from "../../../../ui/Breadcrumbs";
 import { useNavBlocker } from "../../../util";
-import { LinkButton } from "../../../../ui/Button";
+import { LinkButton } from "../../../../ui/LinkButton";
 import { PageTitle } from "../../../../layout/header/ui";
 import { RealmEditLinks } from "../../../Realm";
 import { realmBreadcrumbs } from "../../../../util/realm";

frontend/src/routes/manage/Realm/DangerZone.tsx

@@ -9,10 +9,8 @@ import type {
     DangerZoneRealmData$key,
 } from "./__generated__/DangerZoneRealmData.graphql";
 import { currentRef } from "../../../util";
-import { Button } from "../../../ui/Button";
-import { Card } from "../../../ui/Card";
+import { Button, boxError, Card } from "@opencast/appkit";
 import { PathSegmentInput } from "../../../ui/PathSegmentInput";
-import { boxError } from "../../../ui/error";
 import { displayCommitError, realmValidations } from "./util";
 import {
     DangerZoneRemoveRealmMutation$data,