RavenDB-21797 About page adjustments

src/Raven.Server/Web/Studio/UpgradeInfoHandler.cs

@@ -27,20 +27,22 @@ public async Task GetUpgradeInfo()
             return;
         }
 
-        var pageNumber = GetStart() + 1;
+        var start = GetStart();
         var pageSize = GetPageSize();
 
         using (ServerStore.ContextPool.AllocateOperationContext(out JsonOperationContext context))
         await using (var writer = new AsyncBlittableJsonTextWriter(context, ResponseBodyStream()))
         {
-            if (pageNumber <= 0 || pageSize <= 0)
+            if (start < 0 || pageSize <= 0)
             {
                 HttpContext.Response.StatusCode = (int)HttpStatusCode.BadRequest;
 
                 context.Write(writer,
                     new DynamicJsonValue { [ErrorPropertyName] = $"Incorrect values of query string parameters - '{StartParameter}' cannot be negative, '{PageSizeParameter}' has to be greater than zero." });
                 return;
             }
+
+            var pageNumber = (start / pageSize) + 1;
 
             var licenseId = ServerStore.LicenseManager.LicenseStatus.Id.ToString();
 
@@ -76,6 +78,7 @@ await using (var writer = new AsyncBlittableJsonTextWriter(context, ResponseBody
             }
             catch (Exception e)
             {
+                HttpContext.Response.StatusCode = (int)HttpStatusCode.InternalServerError;
                 context.Write(writer, new DynamicJsonValue { [ErrorPropertyName] = e.Message });
             }
         }
@@ -96,6 +99,7 @@ public class BuildCompatibilityInfo : IDynamicJsonValueConvertible
         public bool CanDowngradeFollowingUpgrade { get; set; }
         public string ChangelogHtml { get; set; }
         public DateTime? ReleasedAt { get; set; }
+        public bool CanUpgrade { get; set; }
 
         public DynamicJsonValue ToJson()
         {
@@ -104,7 +108,8 @@ public DynamicJsonValue ToJson()
                 [nameof(FullVersion)] = FullVersion,
                 [nameof(CanDowngradeFollowingUpgrade)] = CanDowngradeFollowingUpgrade,
                 [nameof(ChangelogHtml)] = ChangelogHtml,
-                [nameof(ReleasedAt)] = ReleasedAt
+                [nameof(ReleasedAt)] = ReleasedAt,
+                [nameof(CanUpgrade)] = CanUpgrade
             };
         }
     }
@@ -115,7 +120,6 @@ public class UpgradeInfoResponse
         public List<BuildCompatibilityInfo> BuildCompatibilitiesForLatestMajorMinor { get; set; }
         public long TotalBuildsForUserMajorMinor { get; set; }
         public long TotalBuildsForLatestMajorMinor { get; set; }
-        public bool IsLicenseEligibleForUpgrade { get; set; }
 
         public DynamicJsonValue ToJson()
         {
@@ -124,8 +128,7 @@ public DynamicJsonValue ToJson()
                 [nameof(BuildCompatibilitiesForUserMajorMinor)] = BuildCompatibilitiesForUserMajorMinor,
                 [nameof(BuildCompatibilitiesForLatestMajorMinor)] = BuildCompatibilitiesForLatestMajorMinor,
                 [nameof(TotalBuildsForUserMajorMinor)] = TotalBuildsForUserMajorMinor,
-                [nameof(TotalBuildsForLatestMajorMinor)] = TotalBuildsForLatestMajorMinor,
-                [nameof(IsLicenseEligibleForUpgrade)] = IsLicenseEligibleForUpgrade,
+                [nameof(TotalBuildsForLatestMajorMinor)] = TotalBuildsForLatestMajorMinor
             };
         }
     }

src/Raven.Studio/typescript/commands/licensing/getChangeLogCommand.ts

@@ -0,0 +1,28 @@
+import commandBase = require("commands/commandBase");
+import endpoints = require("endpoints");
+
+class getChangeLogCommand extends commandBase {
+
+    private readonly start: number;
+    private readonly pageSize: number;
+
+    public constructor(start: number, pageSize: number) {
+        super();
+
+        this.start = start;
+        this.pageSize = pageSize;
+    }
+
+    execute(): JQueryPromise<Raven.Server.Web.Studio.UpgradeInfoHandler.UpgradeInfoResponse> {
+        const args = { 
+            start: this.start,
+            pageSize: this.pageSize
+        }
+        const url = endpoints.global.upgradeInfo.studioUpgradeInfo + this.urlEncodeArgs(args);
+
+        return this.query<Raven.Server.Web.Studio.UpgradeInfoHandler.UpgradeInfoResponse>(url, null)
+            .fail((response: JQueryXHR) => this.reportError("Failed to get change log", response.responseText));
+    }
+}
+
+export = getChangeLogCommand;

src/Raven.Studio/typescript/commands/version/getLatestVersionInfoCommand.ts

@@ -4,8 +4,11 @@ import endpoints = require("endpoints");
 type VersionInfoDto = Raven.Server.ServerWide.BackgroundTasks.LatestVersionCheck.VersionInfo;
 
 class getLatestVersionInfoCommand extends commandBase {
-    constructor(private refresh?: boolean) {
+    private readonly refresh?: boolean;
+
+    constructor(refresh?: boolean) {
         super();
+        this.refresh = refresh;
     }
 
     execute(): JQueryPromise<VersionInfoDto> {

src/Raven.Studio/typescript/common/helpers/view/icomoonHelpers.ts

@@ -68,6 +68,7 @@ class icomoonHelpers {
         "corax-backward": 0xf14F,
         "corax-sort-az": 0xf150,
         "corax-sort-za": 0xf151,
+        "close": 0xf162,
     } as const;
 
     static getCodePointForCanvas(iconName: keyof typeof icomoonHelpers.fixedCodepoints): string {

src/Raven.Studio/typescript/common/shell/menu/items/rootItems.ts

@@ -2,11 +2,12 @@
 import appUrl = require("common/appUrl");
 import { bridgeToReact } from "common/reactUtils";
 import { BootstrapPlaygroundPage } from "components/pages/BootstrapPlaygroundPage";
+import { AboutPage } from "components/pages/resources/about/AboutPage";
 
 function aboutItem() {
     return new leafMenuItem({
         route: 'about',
-        moduleId: require('viewmodels/shell/about'),
+        moduleId: bridgeToReact(AboutPage, "nonShardedView"),
         title: 'About',
         tooltip: "About",
         nav: true,

src/Raven.Studio/typescript/components/common/Pagination.scss

@@ -0,0 +1,56 @@
+@use "Content/scss/bs5variables";
+@use "Content/scss/colors";
+@use "Content/scss/sizes";
+
+.pagination {
+    .page-item {
+        width: 32px;
+        height: 32px;
+        text-align: center;
+        .page-link {
+            width: 100%;
+            height: 100%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            transition:
+                color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+                background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+            border-radius: sizes.$border-radius !important;
+            &.nav-arrow-btn {
+                background: transparent;
+                border: none;
+                color: colors.$border-color-light-var !important;
+                border-radius: 50% !important;
+                box-shadow: none;
+                i {
+                    top: 1px;
+                }
+                &:hover,
+                &:focus {
+                    background-color: colors.$panel-bg-1-var;
+                    color: colors.$text-color-var !important;
+                }
+            }
+        }
+        &.disabled {
+            pointer-events: none;
+            .page-link {
+                background: transparent;
+                border: none;
+                &.nav-arrow-btn {
+                    opacity: 0.5;
+                }
+            }
+        }
+        &:hover {
+            filter: colors.$hover-filter-var;
+        }
+        &.active {
+            .page-link {
+                background-color: colors.$primary-var;
+                color: colors.$text-emphasis-var;
+            }
+        }
+    }
+}

src/Raven.Studio/typescript/components/common/Pagination.stories.tsx

@@ -0,0 +1,15 @@
+import { Meta } from "@storybook/react";
+import DefaultPagination from "./Pagination";
+import React, { useState } from "react";
+import { withBootstrap5, withStorybookContexts } from "test/storybookTestUtils";
+
+export default {
+    title: "Bits/Pagination",
+    decorators: [withStorybookContexts, withBootstrap5],
+    component: DefaultPagination,
+} satisfies Meta<typeof DefaultPagination>;
+
+export function Pagination() {
+    const [page, setPage] = useState(1);
+    return <DefaultPagination totalPages={12} page={page} onPageChange={setPage} />;
+}

src/Raven.Studio/typescript/components/common/Pagination.tsx

@@ -0,0 +1,119 @@
+import React from "react";
+import { Pagination, PaginationItem, PaginationLink } from "reactstrap";
+import "./Pagination.scss";
+import { Icon } from "components/common/Icon";
+import { withPreventDefault } from "components/utils/common";
+
+interface CustomPaginationProps {
+    page: number;
+    totalPages: number;
+    showOnSinglePage?: number;
+    onPageChange: (page: number) => void;
+}
+
+export default function CustomPagination(props: CustomPaginationProps) {
+    const { totalPages, onPageChange, showOnSinglePage, page } = props;
+
+    const getPaginationItems = () => {
+        const pages: React.ReactNode[] = [];
+        let startRange = page - 1;
+        let endRange = page + 1;
+
+        if (startRange <= 2) {
+            startRange = 1;
+            endRange = 5;
+        }
+
+        if (endRange >= totalPages - 1) {
+            startRange = totalPages - 4;
+            endRange = totalPages;
+        }
+
+        for (let i = startRange; i <= endRange; i++) {
+            if (i > 0 && i <= totalPages) {
+                pages.push(
+                    <PaginationItem active={i === page} key={i}>
+                        <PaginationLink
+                            href="#"
+                            onClick={withPreventDefault(() => onPageChange(i))}
+                            className="no-decor"
+                        >
+                            {i}
+                        </PaginationLink>
+                    </PaginationItem>
+                );
+            }
+        }
+
+        if (startRange > 1) {
+            pages.unshift(
+                <PaginationItem key="start-ellipsis" disabled>
+                    <PaginationLink href="#" className="no-decor">
+                        ...
+                    </PaginationLink>
+                </PaginationItem>
+            );
+            pages.unshift(
+                <PaginationItem key="1">
+                    <PaginationLink href="#" onClick={withPreventDefault(() => onPageChange(1))} className="no-decor">
+                        1
+                    </PaginationLink>
+                </PaginationItem>
+            );
+        }
+
+        if (endRange < totalPages) {
+            pages.push(
+                <PaginationItem key="end-ellipsis" disabled>
+                    <PaginationLink href="#" className="no-decor">
+                        ...
+                    </PaginationLink>
+                </PaginationItem>
+            );
+            pages.push(
+                <PaginationItem key={totalPages}>
+                    <PaginationLink
+                        href="#"
+                        onClick={withPreventDefault(() => onPageChange(totalPages))}
+                        className="no-decor"
+                    >
+                        {totalPages}
+                    </PaginationLink>
+                </PaginationItem>
+            );
+        }
+
+        return pages;
+    };
+
+    if (totalPages <= 1 && !showOnSinglePage) {
+        return;
+    }
+
+    return (
+        <Pagination size="sm">
+            <div className="d-flex gap-1">
+                <PaginationItem disabled={page === 1}>
+                    <PaginationLink
+                        href="#"
+                        onClick={withPreventDefault(() => onPageChange(Math.max(1, page - 1)))}
+                        className="no-decor nav-arrow-btn"
+                    >
+                        <Icon icon="arrow-thin-left" margin="m-0" />
+                    </PaginationLink>
+                </PaginationItem>
+                {getPaginationItems()}
+                <PaginationItem disabled={page === totalPages}>
+                    <PaginationLink
+                        next
+                        href="#"
+                        onClick={withPreventDefault(() => onPageChange(Math.min(totalPages, page + 1)))}
+                        className="no-decor nav-arrow-btn"
+                    >
+                        <Icon icon="arrow-thin-right" margin="m-0" />
+                    </PaginationLink>
+                </PaginationItem>
+            </div>
+        </Pagination>
+    );
+}

src/Raven.Studio/typescript/components/common/RadioToggle.tsx

@@ -2,6 +2,7 @@ import React, { ReactNode, useEffect } from "react";
 import classNames from "classnames";
 import { Icon } from "./Icon";
 import IconName from "typings/server/icons";
+import "./Toggles.scss";
 
 export interface RadioToggleWithIconInputItem<T extends string | number | boolean = string> {
     label: string | ReactNode | ReactNode[];

src/Raven.Studio/typescript/components/common/shell/clusterSlice.ts

@@ -11,6 +11,7 @@ interface ClusterState {
     nodes: EntityState<ClusterNode, string>;
     clientVersion: string;
     serverVersion: serverBuildVersionDto;
+    passive: boolean;
 }
 
 const clusterNodesAdapter = createEntityAdapter<ClusterNode, string>({
@@ -33,12 +34,16 @@ const initialState: ClusterState = {
     nodes: clusterNodesAdapter.getInitialState(),
     clientVersion: null,
     serverVersion: null,
+    passive: true,
 };
 
 export const clusterSlice = createSlice({
     initialState,
     name: "cluster",
     reducers: {
+        serverStateLoaded: (state, action: PayloadAction<{ passive: boolean }>) => {
+            state.passive = action.payload.passive;
+        },
         nodesLoaded: (state, action: PayloadAction<ClusterNode[]>) => {
             const bootstrapped = !action.payload.some((x) => x.nodeTag === "?");
             clusterNodesAdapter.setAll(state.nodes, bootstrapped ? action.payload : []);
@@ -65,4 +70,5 @@ export const clusterSelectors = {
     localNodeTag: selectLocalNodeTag,
     clientVersion: (store: RootState) => store.cluster.clientVersion,
     serverVersion: (store: RootState) => store.cluster.serverVersion,
+    isPassive: (store: RootState) => store.cluster.passive,
 };