feat(docker): Check for /app/config volume mount during setup (#826)

src/components/AppDataWarning/index.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import useSWR from 'swr';
+import Alert from '../Common/Alert';
+
+const messages = defineMessages({
+  dockerVolumeMissing: 'Docker Volume Mount Missing',
+  dockerVolumeMissingDescription:
+    'The <code>/app/config</code> volume mount was not configured properly. All data will be cleared when the container is stopped or restarted.',
+});
+
+const AppDataWarning: React.FC = () => {
+  const intl = useIntl();
+  const { data, error } = useSWR<{ appData: boolean }>(
+    '/api/v1/status/appdata'
+  );
+
+  if (!data && !error) {
+    return null;
+  }
+
+  if (!data) {
+    return null;
+  }
+
+  return (
+    <>
+      {!data.appData && (
+        <Alert title={intl.formatMessage(messages.dockerVolumeMissing)}>
+          {intl.formatMessage(messages.dockerVolumeMissingDescription, {
+            code: function code(msg) {
+              return <code className="bg-opacity-50">{msg}</code>;
+            },
+          })}
+        </Alert>
+      )}
+    </>
+  );
+};
+
+export default AppDataWarning;

src/components/Setup/index.tsx

@@ -11,6 +11,7 @@ import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import Badge from '../Common/Badge';
 import LanguagePicker from '../Layout/LanguagePicker';
 import PageTitle from '../Common/PageTitle';
+import AppDataWarning from '../AppDataWarning';
 
 const messages = defineMessages({
   setup: 'Setup',
@@ -66,6 +67,7 @@ const Setup: React.FC = () => {
           className="w-auto mx-auto mb-10 max-h-32"
           alt="Logo"
         />
+        <AppDataWarning />
         <nav className="relative z-50">
           <ul
             className="bg-gray-800 bg-opacity-50 border border-gray-600 divide-y divide-gray-600 rounded-md md:flex md:divide-y-0"

src/i18n/locale/en.json

@@ -1,4 +1,6 @@
 {
+  "components.AppDataWarning.dockerVolumeMissing": "Docker Volume Mount Missing",
+  "components.AppDataWarning.dockerVolumeMissingDescription": "The <code>/app/config</code> volume mount was not configured properly. All data will be cleared when the container is stopped or restarted.",
   "components.CollectionDetails.movies": "Movies",
   "components.CollectionDetails.numberofmovies": "Number of Movies: {count}",
   "components.CollectionDetails.overview": "Overview",