web: revamp overview and confirmation user interfaces#2988
Merged
Conversation
dgdavid
force-pushed
the
api-v2-overview
branch
from
023b571 to
91cb22d
Compare
dgdavid
changed the title
dgdavid
commented
Jan 8, 2026
Contributor
Author
dgdavid
left a comment
dgdavid
left a comment
There was a problem hiding this comment.
The PR is marked as ready for review, although there is still room for improvement in here and there. It has been agreed to refine the work iteratively as part of the api-v2 branch development.
Feel free to add commits to the branch if you identify any quick fixes or improvements during the review. Thanks!
Makes it easier to write components that output description list items. This component will be used in the Overview and confirmation installation dialogs.
OverviewPage will be fully revamped, which makes it better to drop what will become obsolete and start from scratch rather than moving things around.
This commit introduces the initial building blocks for the new overview page, as agreed, to enhance the user experience. The overview now provides a high-level view of the installation settings, along with system information, and allows users to jump directly to specific sections, regardless of whether the sidebar is expanded or collapsed. A lot of work is still pending, but this commit is released early to enable collaborative development.
To be polished before releasing the overview revamp.
Overview section summaries need to show a skeleton or other UI indicators when there is associated progress and information is potentially outdated. To do it properly, each summary component had to duplicate the same logic that was implemented in core/ProgressBackdrop: set a loading variable, track progress, mark when progress finishes, and listen for related query refetches. To avoid this duplication and have better code maintainability, a new useProgressTracking hook has been added. It encapsulates all these internals and returns both the loading state and the related progress object (when any exists). Using it, components can ensure the UI remains in a loading state until both the backend operation completes AND all related queries have been refetched with fresh data, preventing users from seeing stale information.
And add specific content dependeing on the mode. Transient adds an brief explanation while static simply renders the hostname.
The hostname will now show the mode in the Installation Summary section and the value in the System Information section. This approach avoids redundant information when both sections are displayed side by side in the overview. A prop has been added to allow the hostname value to be displayed on the confirmation screen, where it would be odd not to show the value. This is especially relevant since, at the time of writing, the System Information section is not planned for inclusion on the confirmation screen.
After further review, it was found that displaying the mode for the hostname could lead to confusion, especially since other summaries only show configuration-related details without additional explanations for each mode/configuration option. Thus, the hostname will now only appear in the Installation Summary section, displaying only the value. A brief explanation will be shown only when a transient hostname is in use, though.
Updated the network overview to handle additional states like "Not Configured" and "Configured but No Persistent Connections". In "Manual" and "Mixed" modes, up to two static IPs are now displayed to provide users with more useful information without cluttering the summary. Includes network utility updates and an `installerRenderHook` test utility initially created for testing the `useNetworkStatus` hook. While unused here, it's been kept for future hook testing. Instead, the `useNetworkStatus` logic was extracted into `getNetworkStatus` for easier testing, since `useConnections` and `useNetworkStatus` live in the same module, making it impossible to mock internal calls between them.
Actually, the commit also moves the hook logic into an internal helper to enable proper testing since the hook could not be directly tested reliably because it shares a module with useConnections, causing mocks to be bypassed.
It also adds unit tests.
To avoid code duplication and have consistent rendering of both, the information and the loading states.
And also drop a harcoded CSS class.
…onfirmPage Based on the overview revamp, this change replaces the rather poor modal-based confirmation message with a full-page view to provide a better overview of the installation settings before proceeding. - Create `ConfirmPage` component with a detailed summary. - Add `useDestructiveActions` hook to detect potential data loss. Pending to be reviewed, tested and documented - Update `InstallButton` to navigate to the new confirmation route. - Refactor summary components to support a `withoutLink` mode for static display. - Remove `InstallConfirmationPopup` and associated tests.
dgdavid
force-pushed
the
api-v2-overview
branch
from
f8c648b to
1dd4df9
Compare
ancorgs
approved these changes
Jan 9, 2026
Contributor
ancorgs
left a comment
ancorgs
left a comment
There was a problem hiding this comment.
I tested that everything works as expected.
Unfortunately I just checked the code very briefly so I may have overlooked problems there.
Despite all that and due to several reasons, we (@imobachgs and myself) agreed that this is good enough to be merged today into api-v2.
So approving.
imobachgs
added a commit
that referenced
this pull request
Jan 10, 2026
Merge the new HTTP API. Each PR has been already reviewed, so it should be safe to merge it. * #1829 * #2508 * #2772 * #2826 * #2848 * #2860 * #2863 * #2866 * #2867 * #2869 * #2870 * #2871 * #2872 * #2873 * #2874 * #2875 * #2876 * #2877 * #2880 * #2881 * #2882 * #2884 * #2885 * #2886 * #2891 * #2892 * #2893 * #2894 * #2895 * #2896 * #2897 * #2898 * #2899 * #2900 * #2901 * #2902 * #2903 * #2904 * #2908 * #2909 * #2910 * #2912 * #2913 * #2914 * #2915 * #2916 * #2917 * #2918 * #2920 * #2921 * #2923 * #2924 * #2926 * #2928 * #2929 * #2930 * #2933 * #2934 * #2935 * #2936 * #2938 * #2939 * #2942 * #2943 * #2944 * #2945 * #2946 * #2947 * #2948 * #2950 * #2951 * #2952 * #2954 * #2955 * #2956 * #2957 * #2958 * #2959 * #2960 * #2961 * #2963 * #2964 * #2965 * #2967 * #2968 * #2969 * #2970 * #2971 * #2972 * #2974 * #2975 * #2977 * #2978 * #2980 * #2982 * #2983 * #2984 * #2988 * #2989 * #2991 * #2992 * #2993 * #2994 * #2995 * #2996 * #2997 * #2999
Merged
imobachgs
added a commit
that referenced
this pull request
Mar 17, 2026
Prepare to release version 19. * #1829 * #2508 * #2772 * #2818 * #2826 * #2848 * #2860 * #2863 * #2864 * #2866 * #2867 * #2869 * #2870 * #2871 * #2872 * #2873 * #2874 * #2875 * #2876 * #2877 * #2880 * #2881 * #2882 * #2884 * #2885 * #2886 * #2891 * #2892 * #2893 * #2894 * #2895 * #2896 * #2897 * #2898 * #2899 * #2900 * #2901 * #2902 * #2903 * #2904 * #2908 * #2909 * #2910 * #2912 * #2913 * #2914 * #2915 * #2916 * #2917 * #2918 * #2920 * #2921 * #2923 * #2924 * #2926 * #2928 * #2929 * #2930 * #2933 * #2934 * #2935 * #2936 * #2937 * #2938 * #2939 * #2942 * #2943 * #2944 * #2945 * #2946 * #2947 * #2948 * #2949 * #2950 * #2951 * #2952 * #2954 * #2955 * #2956 * #2957 * #2958 * #2959 * #2960 * #2961 * #2963 * #2964 * #2965 * #2967 * #2968 * #2969 * #2970 * #2971 * #2972 * #2974 * #2975 * #2977 * #2978 * #2980 * #2981 * #2982 * #2983 * #2984 * #2988 * #2989 * #2990 * #2991 * #2992 * #2993 * #2994 * #2995 * #2996 * #2997 * #2998 * #2999 * #3000 * #3001 * #3002 * #3004 * #3005 * #3006 * #3007 * #3008 * #3009 * #3011 * #3012 * #3013 * #3014 * #3015 * #3016 * #3018 * #3019 * #3020 * #3021 * #3022 * #3023 * #3024 * #3025 * #3026 * #3027 * #3028 * #3029 * #3030 * #3031 * #3033 * #3034 * #3035 * #3036 * #3037 * #3039 * #3040 * #3041 * #3042 * #3043 * #3044 * #3045 * #3046 * #3047 * #3048 * #3049 * #3050 * #3051 * #3052 * #3053 * #3054 * #3055 * #3056 * #3057 * #3058 * #3060 * #3061 * #3062 * #3063 * #3064 * #3065 * #3066 * #3067 * #3068 * #3069 * #3070 * #3071 * #3072 * #3073 * #3074 * #3075 * #3076 * #3077 * #3078 * #3079 * #3086 * #3087 * #3088 * #3089 * #3090 * #3091 * #3092 * #3093 * #3094 * #3095 * #3096 * #3097 * #3098 * #3099 * #3100 * #3101 * #3102 * #3103 * #3104 * #3105 * #3106 * #3107 * #3108 * #3109 * #3110 * #3112 * #3113 * #3114 * #3115 * #3116 * #3117 * #3118 * #3119 * #3120 * #3122 * #3123 * #3124 * #3127 * #3128 * #3129 * #3130 * #3131 * #3133 * #3134 * #3135 * #3136 * #3137 * #3138 * #3139 * #3140 * #3141 * #3142 * #3143 * #3144 * #3145 * #3146 * #3147 * #3148 * #3149 * #3150 * #3151 * #3152 * #3153 * #3154 * #3155 * #3157 * #3158 * #3159 * #3160 * #3161 * #3162 * #3163 * #3164 * #3165 * #3166 * #3167 * #3168 * #3169 * #3170 * #3174 * #3175 * #3176 * #3177 * #3178 * #3179 * #3181 * #3182 * #3184 * #3185 * #3186 * #3188 * #3189 * #3190 * #3191 * #3192 * #3194 * #3195 * #3196 * #3197 * #3198 * #3199 * #3200 * #3201 * #3202 * #3203 * #3205 * #3206 * #3208 * #3209 * #3210 * #3213 * #3214 * #3215 * #3216 * #3217 * #3218 * #3219 * #3220 * #3222 * #3223 * #3224 * #3225 * #3226 * #3227 * #3228 * #3229 * #3230 * #3231 * #3232 * #3233 * #3234 * #3235 * #3236 * #3237 * #3238 * #3239 * #3240 * #3241 * #3242 * #3243 * #3244 * #3246 * #3247 * #3248 * #3250 * #3251 * #3252 * #3253 * #3254 * #3255 * #3256 * #3257 * #3258 * #3259 * #3260 * #3261 * #3262 * #3263 * #3265 * #3266 * #3267 * #3268 * #3269 * #3270 * #3271 * #3272 * #3273 * #3274 * #3275 * #3276 * #3277 * #3278 * #3279 * #3280 * #3281 * #3282 * #3283 * #3284 * #3285 * #3286 * #3287 * #3288 * #3289 * #3290 * #3291
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
5 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
TL;DR Improves the overview page and pre-installation confirmation
The current overview page doesn’t provide enough value, as it lacks a clear, insightful summary that helps users quickly get the big picture and decide whether they should dive deeper into the details of each section or if the installation settings are ready for proceeding. This PR addresses that issue by enhancing the page with more straightforward section summaries and adding additional context about the system where the installation will take place, providing users with better clarity.
Additionally, this PR introduces improvements to the confirmation interface that appears immediately before starting the installation. Previously, it was a small popup displaying minimal information. With this update, it has been expanded to a full-screen layout, featuring the same comprehensive summary added to the overview and highlighting potential data loss from destructive actions, if any. This change should significantly improve the user experience by providing a clearer understanding of key installation aspects, allowing users to fine-tune their choices with greater confidence before proceeding.
Unless the PR undergoes major updates, the screenshots will remain unchanged. Therefore, the final merged interface may slightly differ from the images below.
Show/hide more screenshots
Data loss details expanded
Without data loss
Network variants
Transient hostname
This PR is intended to be squashed and merged. It contains a large number of commits due to the initially collaborative nature of the branch. We avoided
git push --forces to allow collaboration without mess.As long as the PR has a good description before merging it, a squash and merge should be enough to consolidate all changes without information loss.