From 16be3db0c6d655149d652e3beb6fbba83f01573e Mon Sep 17 00:00:00 2001
From: Rostislav Dugin <rostislav.dugin@outlook.com>
Date: Sun, 1 Feb 2026 18:30:50 +0300
Subject: [PATCH] FIX (playground): Pre-select system storage if exists in
 playground

---
 .gitignore                                    |  3 +-
 .../backups/ui/EditBackupConfigComponent.tsx  |  7 +++
 .../ui/PlaygroundWarningComponent.tsx         | 10 ++--
 .../storages/ui/StorageCardComponent.tsx      |  2 +-
 .../features/storages/ui/StorageComponent.tsx | 47 ++++++++++++-------
 .../storages/ui/show/ShowStorageComponent.tsx | 16 ++-----
 6 files changed, 49 insertions(+), 36 deletions(-)

diff --git a/.gitignore b/.gitignore
index b51ea47..4a9b959 100644
--- a/.gitignore
+++ b/.gitignore
@@ -10,4 +10,5 @@ node_modules/
 /articles
 
 .DS_Store
-/scripts
\ No newline at end of file
+/scripts
+.vscode/settings.json
diff --git a/frontend/src/features/backups/ui/EditBackupConfigComponent.tsx b/frontend/src/features/backups/ui/EditBackupConfigComponent.tsx
index 7931544..a16a61a 100644
--- a/frontend/src/features/backups/ui/EditBackupConfigComponent.tsx
+++ b/frontend/src/features/backups/ui/EditBackupConfigComponent.tsx
@@ -204,6 +204,13 @@ export const EditBackupConfigComponent = ({
     try {
       const storages = await storageApi.getStorages(database.workspaceId);
       setStorages(storages);
+
+      if (IS_CLOUD) {
+        const systemStorages = storages.filter((s) => s.isSystem);
+        if (systemStorages.length > 0) {
+          updateBackupConfig({ storage: systemStorages[0] });
+        }
+      }
     } catch (e) {
       alert((e as Error).message);
     }
diff --git a/frontend/src/features/playground/ui/PlaygroundWarningComponent.tsx b/frontend/src/features/playground/ui/PlaygroundWarningComponent.tsx
index ed2ecd9..23d6ed4 100644
--- a/frontend/src/features/playground/ui/PlaygroundWarningComponent.tsx
+++ b/frontend/src/features/playground/ui/PlaygroundWarningComponent.tsx
@@ -78,9 +78,10 @@ export const PlaygroundWarningComponent = (): JSX.Element => {
         <div>
           <h3 className="mb-2 text-lg font-semibold">What is Playground?</h3>
           <p className="text-gray-700 dark:text-gray-300">
-            Playground is a dev environment where you can test small databases backup and see
-            Databasus in action. Databasus dev team can test new features and see issues which hard
-            to detect when using self hosted (without logs or reports)
+            Playground is a dev environment of Databasus development team. It is used by Databasus
+            dev team to test new features and see issues which hard to detect when using self hosted
+            (without logs or reports).{' '}
+            <b>Here you can make backups for small and not critical databases for free</b>
           </p>
         </div>
 
@@ -114,7 +115,8 @@ export const PlaygroundWarningComponent = (): JSX.Element => {
             No, because playground use only read-only users and cannot affect your DB. Only issue
             you can face is instability: playground background workers frequently reloaded so backup
             can be slower or be restarted due to app restart. Do not rely production DBs on
-            playground, please
+            playground, please. At once we may clean backups or something like this. At least, check
+            your backups here once a week
           </p>
         </div>
 
diff --git a/frontend/src/features/storages/ui/StorageCardComponent.tsx b/frontend/src/features/storages/ui/StorageCardComponent.tsx
index 08a7a00..f66e4fe 100644
--- a/frontend/src/features/storages/ui/StorageCardComponent.tsx
+++ b/frontend/src/features/storages/ui/StorageCardComponent.tsx
@@ -42,7 +42,7 @@ export const StorageCardComponent = ({
       )}
 
       {storage.isSystem && (
-        <div className="mt-2 inline-block rounded-lg bg-[#ffffff10] px-2 py-1 text-xs text-gray-700 dark:text-gray-300">
+        <div className="mt-2 inline-block rounded-xl bg-[#00000010] px-2 py-1 text-xs text-gray-700 dark:bg-[#ffffff10] dark:text-gray-300">
           System storage
         </div>
       )}
diff --git a/frontend/src/features/storages/ui/StorageComponent.tsx b/frontend/src/features/storages/ui/StorageComponent.tsx
index 43b0404..2ab10ab 100644
--- a/frontend/src/features/storages/ui/StorageComponent.tsx
+++ b/frontend/src/features/storages/ui/StorageComponent.tsx
@@ -143,15 +143,22 @@ export const StorageComponent = ({
         ) : (
           <div>
             {!isEditName ? (
-              <div className="mb-5 flex items-center text-2xl font-bold">
-                {storage.name}
-                {(storage.isSystem && user.role === UserRole.ADMIN) ||
-                  (isCanManageStorages && (
+              <>
+                <div className="mb-5 flex items-center text-2xl font-bold">
+                  {storage.name}
+                  {(!storage.isSystem || user.role === UserRole.ADMIN) && isCanManageStorages && (
                     <div className="ml-2 cursor-pointer" onClick={() => startEdit('name')}>
                       <img src="/icons/pen-gray.svg" />
                     </div>
-                  ))}
-              </div>
+                  )}
+                </div>
+
+                {storage.isSystem && (
+                  <span className="mt-2 inline-block rounded-xl bg-[#00000010] px-2 py-1 text-xs text-gray-700 dark:bg-[#ffffff10] dark:text-gray-300">
+                    System storage
+                  </span>
+                )}
+              </>
             ) : (
               <div>
                 <div className="flex items-center">
@@ -220,19 +227,23 @@ export const StorageComponent = ({
               </div>
             )}
 
-            <div className="mt-5 flex items-center font-bold">
-              <div>Storage settings</div>
+            {!storage.isSystem ||
+              (user.role === UserRole.ADMIN && (
+                <div className="mt-5 flex items-center font-bold">
+                  <div>Storage settings</div>
 
-              {!isEditSettings &&
-              isCanManageStorages &&
-              !(storage.isSystem && user.role !== UserRole.ADMIN) ? (
-                <div className="ml-2 h-4 w-4 cursor-pointer" onClick={() => startEdit('settings')}>
-                  <img src="/icons/pen-gray.svg" />
+                  {!isEditSettings && isCanManageStorages ? (
+                    <div
+                      className="ml-2 h-4 w-4 cursor-pointer"
+                      onClick={() => startEdit('settings')}
+                    >
+                      <img src="/icons/pen-gray.svg" />
+                    </div>
+                  ) : (
+                    <div />
+                  )}
                 </div>
-              ) : (
-                <div />
-              )}
-            </div>
+              ))}
 
             <div className="mt-1 text-sm">
               {isEditSettings && isCanManageStorages ? (
@@ -254,7 +265,7 @@ export const StorageComponent = ({
               )}
             </div>
 
-            {!isEditSettings && (
+            {!isEditSettings && (!storage.isSystem || user.role === UserRole.ADMIN) && (
               <div className="mt-5">
                 <Button
                   type="primary"
diff --git a/frontend/src/features/storages/ui/show/ShowStorageComponent.tsx b/frontend/src/features/storages/ui/show/ShowStorageComponent.tsx
index 3fd3ba1..f5ca14b 100644
--- a/frontend/src/features/storages/ui/show/ShowStorageComponent.tsx
+++ b/frontend/src/features/storages/ui/show/ShowStorageComponent.tsx
@@ -18,6 +18,8 @@ interface Props {
 export function ShowStorageComponent({ storage, user }: Props) {
   if (!storage) return null;
 
+  if (storage?.isSystem && user.role !== UserRole.ADMIN) return <div />;
+
   return (
     <div>
       <div className="mb-1 flex items-center">
@@ -39,33 +41,23 @@ export function ShowStorageComponent({ storage, user }: Props) {
         </div>
       )}
 
-      <div>{storage?.type === StorageType.S3 && <ShowS3StorageComponent storage={storage} />}</div>
-
       <div>
+        {storage?.type === StorageType.S3 && <ShowS3StorageComponent storage={storage} />}
+
         {storage?.type === StorageType.GOOGLE_DRIVE && (
           <ShowGoogleDriveStorageComponent storage={storage} />
         )}
-      </div>
 
-      <div>
         {storage?.type === StorageType.NAS && <ShowNASStorageComponent storage={storage} />}
-      </div>
 
-      <div>
         {storage?.type === StorageType.AZURE_BLOB && (
           <ShowAzureBlobStorageComponent storage={storage} />
         )}
-      </div>
 
-      <div>
         {storage?.type === StorageType.FTP && <ShowFTPStorageComponent storage={storage} />}
-      </div>
 
-      <div>
         {storage?.type === StorageType.SFTP && <ShowSFTPStorageComponent storage={storage} />}
-      </div>
 
-      <div>
         {storage?.type === StorageType.RCLONE && <ShowRcloneStorageComponent storage={storage} />}
       </div>
     </div>