RavenDB-21793 Better context for disabled server-wide backup status d…

…ropdown
Lwiel · Dec 13, 2023 · 6420da2 · 6420da2
1 parent 1c5a5a7
commit 6420da2
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 7 deletions.
diff --git a/src/Raven.Studio/typescript/components/pages/database/tasks/backups/BackupsPage.tsx b/src/Raven.Studio/typescript/components/pages/database/tasks/backups/BackupsPage.tsx
@@ -324,7 +324,7 @@ export function BackupsPage(props: NonShardedViewProps) {
                     </HrHeader>
 
                     {isAdminAccessOrAbove(db) && (
-                        <div className="mb-1 flex-shrink-0">
+                        <div className="mb-3 flex-shrink-0">
                             <Button color="primary" title="Backup the database now" onClick={createManualBackup}>
                                 <Icon icon="backup" /> Create a Backup
                             </Button>
@@ -357,7 +357,7 @@ export function BackupsPage(props: NonShardedViewProps) {
                         </span>
                     </HrHeader>
                     {canReadWriteDatabase(db) && (
-                        <div className="mb-1">
+                        <div className="mb-3">
                             <Button
                                 color="primary"
                                 onClick={createNewPeriodicBackupTask}

diff --git a/...io/typescript/components/pages/database/tasks/ongoingTasks/panels/PeriodicBackupPanel.tsx b/...io/typescript/components/pages/database/tasks/ongoingTasks/panels/PeriodicBackupPanel.tsx
@@ -29,10 +29,11 @@ import notificationCenter from "common/notifications/notificationCenter";
 import backupNow = require("viewmodels/database/tasks/backupNow");
 import app from "durandal/app";
 import backupNowPeriodicCommand from "commands/database/tasks/backupNowPeriodicCommand";
-import { Badge, Collapse, Input } from "reactstrap";
+import { Badge, Collapse, Input, UncontrolledTooltip } from "reactstrap";
 import { Icon } from "components/common/Icon";
 import { useAppSelector } from "components/store";
 import { clusterSelectors } from "components/common/shell/clusterSlice";
+import useId from "hooks/useId";
 
 interface PeriodicBackupPanelProps extends BaseOngoingTaskPanelProps<OngoingTaskPeriodicBackupInfo> {
     forceReload: () => void;
@@ -243,10 +244,13 @@ export function PeriodicBackupPanel(props: PeriodicBackupPanelProps) {
     const { forCurrentDatabase } = useAppUrls();
 
     const canEdit = isAdminAccessOrAbove(db) && !data.shared.serverWide;
+    const isServerWide = data.shared.serverWide;
     const editUrl = forCurrentDatabase.editPeriodicBackupTask(sourceView, data.shared.taskId)();
 
     const { detailsVisible, toggleDetails, onEdit } = useTasksOperations(editUrl, props);
 
+    const statusDropdownId = useId("statusDropdown");
+
     return (
         <RichPanel>
             <RichPanelHeader>
@@ -265,11 +269,17 @@ export function PeriodicBackupPanel(props: PeriodicBackupPanelProps) {
                 <RichPanelActions>
                     <OngoingTaskResponsibleNode task={data} />
                     <BackupEncryption encrypted={data.shared.encrypted} />
+                    {isServerWide && (
+                        <UncontrolledTooltip target={statusDropdownId}>
+                            Status can be managed on the Server-Wide Tasks page
+                        </UncontrolledTooltip>
+                    )}
                     <OngoingTaskStatus
                         task={data}
                         canEdit={canEdit}
                         onTaskOperation={onTaskOperation}
                         isTogglingState={isTogglingState(data.shared.taskId)}
+                        id={statusDropdownId}
                     />
 
                     <OngoingTaskActions

diff --git a/src/Raven.Studio/typescript/components/pages/database/tasks/shared/shared.tsx b/src/Raven.Studio/typescript/components/pages/database/tasks/shared/shared.tsx
@@ -115,7 +115,7 @@ export function OngoingTaskName(props: { task: OngoingTaskInfo; canEdit: boolean
                     {task.shared.taskName}
                 </a>
             ) : (
-                <span className="text-primary">{task.shared.taskName}</span>
+                <span className="text-muted">{task.shared.taskName}</span>
             )}
         </RichPanelName>
     );
@@ -126,12 +126,13 @@ interface OngoingTaskStatusProps {
     canEdit: boolean;
     onTaskOperation: (type: OngoingTaskOperationConfirmType, taskSharedInfos: OngoingTaskSharedInfo[]) => void;
     isTogglingState: boolean;
+    id?: string;
 }
 
 export function OngoingTaskStatus(props: OngoingTaskStatusProps) {
-    const { task, canEdit, onTaskOperation, isTogglingState } = props;
+    const { task, canEdit, onTaskOperation, isTogglingState, id } = props;
     return (
-        <UncontrolledDropdown>
+        <UncontrolledDropdown id={id}>
             <DropdownToggle
                 caret
                 disabled={!canEdit || isTogglingState}

diff --git a/src/Raven.Studio/wwwroot/Content/scss/bs5variables.scss b/src/Raven.Studio/wwwroot/Content/scss/bs5variables.scss
@@ -493,7 +493,7 @@ $btn-font-weight: $font-weight-normal !default;
 $btn-box-shadow: 0px 1px 0px 0px rgba($well-bg, 0.5) !default;
 $btn-focus-width: $input-btn-focus-width !default;
 $btn-focus-box-shadow: $input-btn-focus-box-shadow !default;
-$btn-disabled-opacity: 0.65 !default;
+$btn-disabled-opacity: 0.4 !default;
 $btn-active-box-shadow: inset 0 3px 5px rgba($black, 0.125) !default;
 
 $btn-link-color: var(--#{$prefix}link-color) !default;