[v14] [Web] Add List View to Unified Resources

api/proto/teleport/userpreferences/v1/unified_resource_preferences.proto

@@ -22,6 +22,8 @@ option go_package = "github.com/gravitational/teleport/api/gen/proto/go/userpref
 message UnifiedResourcePreferences {
   // default_tab is the default tab selected in the unified resource web UI
   DefaultTab default_tab = 1;
+  // view_mode is the view mode selected in the unified resource Web UI
+  ViewMode view_mode = 2;
 }
 
 // DefaultTab is the default tab selected in the unified resource web UI
@@ -32,3 +34,12 @@ enum DefaultTab {
   // PINNED is only pinned resources
   DEFAULT_TAB_PINNED = 2;
 }
+
+// ViewMode is the view mode selected in the unified resource Web UI
+enum ViewMode {
+  VIEW_MODE_UNSPECIFIED = 0;
+  // CARD is the card view
+  VIEW_MODE_CARD = 1;
+  // LIST is the list view
+  VIEW_MODE_LIST = 2;
+}

lib/auth/userpreferences/userpreferencesv1/service_test.go

@@ -60,6 +60,7 @@ func TestService_GetUserPreferences(t *testing.T) {
 					Theme: userpreferencesv1.Theme_THEME_LIGHT,
 					UnifiedResourcePreferences: &userpreferencesv1.UnifiedResourcePreferences{
 						DefaultTab: userpreferencesv1.DefaultTab_DEFAULT_TAB_ALL,
+						ViewMode:   userpreferencesv1.ViewMode_VIEW_MODE_CARD,
 					},
 					Onboard: &userpreferencesv1.OnboardUserPreferences{
 						PreferredResources: []userpreferencesv1.Resource{},

lib/services/local/userpreferences.go

@@ -43,6 +43,7 @@ func DefaultUserPreferences() *userpreferencesv1.UserPreferences {
 		Theme: userpreferencesv1.Theme_THEME_LIGHT,
 		UnifiedResourcePreferences: &userpreferencesv1.UnifiedResourcePreferences{
 			DefaultTab: userpreferencesv1.DefaultTab_DEFAULT_TAB_ALL,
+			ViewMode:   userpreferencesv1.ViewMode_VIEW_MODE_CARD,
 		},
 		Onboard: &userpreferencesv1.OnboardUserPreferences{
 			PreferredResources: []userpreferencesv1.Resource{},

lib/services/local/userpreferences_test.go

@@ -121,6 +121,7 @@ func TestUserPreferencesCRUD(t *testing.T) {
 				Theme:   defaultPref.Theme,
 				UnifiedResourcePreferences: &userpreferencesv1.UnifiedResourcePreferences{
 					DefaultTab: userpreferencesv1.DefaultTab_DEFAULT_TAB_PINNED,
+					ViewMode:   userpreferencesv1.ViewMode_VIEW_MODE_CARD,
 				},
 				ClusterPreferences: defaultPref.ClusterPreferences,
 			},
@@ -230,6 +231,7 @@ func TestUserPreferencesCRUD(t *testing.T) {
 					Theme: userpreferencesv1.Theme_THEME_LIGHT,
 					UnifiedResourcePreferences: &userpreferencesv1.UnifiedResourcePreferences{
 						DefaultTab: userpreferencesv1.DefaultTab_DEFAULT_TAB_PINNED,
+						ViewMode:   userpreferencesv1.ViewMode_VIEW_MODE_LIST,
 					},
 					Assist: &userpreferencesv1.AssistUserPreferences{
 						PreferredLogins: []string{"baz"},
@@ -255,6 +257,7 @@ func TestUserPreferencesCRUD(t *testing.T) {
 				Theme: userpreferencesv1.Theme_THEME_LIGHT,
 				UnifiedResourcePreferences: &userpreferencesv1.UnifiedResourcePreferences{
 					DefaultTab: userpreferencesv1.DefaultTab_DEFAULT_TAB_PINNED,
+					ViewMode:   userpreferencesv1.ViewMode_VIEW_MODE_LIST,
 				},
 				Assist: &userpreferencesv1.AssistUserPreferences{
 					PreferredLogins: []string{"baz"},

lib/web/userpreferences.go

@@ -52,6 +52,7 @@ type ClusterUserPreferencesResponse struct {
 
 type UnifiedResourcePreferencesResponse struct {
 	DefaultTab userpreferencesv1.DefaultTab `json:"defaultTab"`
+	ViewMode   userpreferencesv1.ViewMode   `json:"viewMode"`
 }
 
 // UserPreferencesResponse is the JSON response for the user preferences.
@@ -120,6 +121,7 @@ func makePreferenceRequest(req UserPreferencesResponse) *userpreferencesv1.Upser
 			Theme: req.Theme,
 			UnifiedResourcePreferences: &userpreferencesv1.UnifiedResourcePreferences{
 				DefaultTab: req.UnifiedResourcePreferences.DefaultTab,
+				ViewMode:   req.UnifiedResourcePreferences.ViewMode,
 			},
 			Assist: &userpreferencesv1.AssistUserPreferences{
 				PreferredLogins: req.Assist.PreferredLogins,
@@ -199,6 +201,7 @@ func assistUserPreferencesResponse(resp *userpreferencesv1.AssistUserPreferences
 func unifiedResourcePreferencesResponse(resp *userpreferencesv1.UnifiedResourcePreferences) UnifiedResourcePreferencesResponse {
 	return UnifiedResourcePreferencesResponse{
 		DefaultTab: resp.DefaultTab,
+		ViewMode:   resp.ViewMode,
 	}
 }
 

web/packages/design/src/Checkbox/Checkbox.tsx

@@ -76,5 +76,6 @@ export const StyledCheckbox = styled.input.attrs({ type: 'checkbox' })`
     color: ${props => props.theme.colors.levels.deep};
     position: absolute;
     right: 1px;
+    top: -1px;
   }
 `;

web/packages/design/src/Icon/Icons.story.tsx

@@ -150,13 +150,15 @@ export const Icons = () => (
     <IconBox IconCmpt={Icon.Question} text="Question" />
     <IconBox IconCmpt={Icon.Refresh} text="Refresh" />
     <IconBox IconCmpt={Icon.Restore} text="Restore" />
+    <IconBox IconCmpt={Icon.Rows} text="Rows" />
     <IconBox IconCmpt={Icon.Server} text="Server" />
     <IconBox IconCmpt={Icon.Share} text="Share" />
     <IconBox IconCmpt={Icon.ShieldCheck} text="ShieldCheck" />
     <IconBox IconCmpt={Icon.Sliders} text="Sliders" />
     <IconBox IconCmpt={Icon.SlidersVertical} text="SlidersVertical" />
     <IconBox IconCmpt={Icon.Speed} text="Speed" />
     <IconBox IconCmpt={Icon.Spinner} text="Spinner" />
+    <IconBox IconCmpt={Icon.SquaresFour} text="SquaresFour" />
     <IconBox IconCmpt={Icon.Stars} text="Stars" />
     <IconBox IconCmpt={Icon.Sun} text="Sun" />
     <IconBox IconCmpt={Icon.SyncAlt} text="SyncAlt" />

web/packages/design/src/Icon/Icons/Rows.tsx

@@ -0,0 +1,66 @@
+/*
+Copyright 2023 Gravitational, Inc.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+/* MIT License
+
+Copyright (c) 2020 Phosphor Icons
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+*/
+
+import React from 'react';
+
+import { Icon, IconProps } from '../Icon';
+
+/*
+
+THIS FILE IS GENERATED. DO NOT EDIT.
+
+*/
+
+export function Rows({ size = 24, color, ...otherProps }: IconProps) {
+  return (
+    <Icon size={size} color={color} className="icon icon-rows" {...otherProps}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M4.5 4.5C3.67157 4.5 3 5.17157 3 6V9.75C3 10.5784 3.67157 11.25 4.5 11.25H19.5C20.3284 11.25 21 10.5784 21 9.75V6C21 5.17157 20.3284 4.5 19.5 4.5H4.5ZM4.5 6H19.5V9.75H4.5V6Z"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M4.5 12.75C3.67157 12.75 3 13.4216 3 14.25V18C3 18.8284 3.67157 19.5 4.5 19.5H19.5C20.3284 19.5 21 18.8284 21 18V14.25C21 13.4216 20.3284 12.75 19.5 12.75H4.5ZM4.5 14.25H19.5V18H4.5V14.25Z"
+      />
+    </Icon>
+  );
+}