FIX (playground): Pre-select system storage if exists in playground

.gitignore

@@ -10,4 +10,5 @@ node_modules/
 /articles
 
 .DS_Store
-/scripts
+/scripts
+.vscode/settings.json

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);
     }

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>
 

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>
       )}

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"

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>