From 20e203999313411c5c2dc57c16737fae68ecbe25 Mon Sep 17 00:00:00 2001
From: Darren Hoehna <dhoehna@yahoo.com>
Date: Tue, 11 Jul 2023 12:35:45 -0700
Subject: [PATCH] Adding more details to the repo review screen. (#1245)

Co-authored-by: Darren Hoehna <dahoehna@microsoft.com>
---
 .../DevHome.SetupFlow/Models/CloneRepoTask.cs | 27 ++++++-
 .../ViewModels/RepoConfigReviewViewModel.cs   |  5 +-
 .../Views/RepoConfigReviewView.xaml           | 77 ++++++++++++++++++-
 3 files changed, 102 insertions(+), 7 deletions(-)

diff --git a/tools/SetupFlow/DevHome.SetupFlow/Models/CloneRepoTask.cs b/tools/SetupFlow/DevHome.SetupFlow/Models/CloneRepoTask.cs
index 3300830760..15595825dd 100644
--- a/tools/SetupFlow/DevHome.SetupFlow/Models/CloneRepoTask.cs
+++ b/tools/SetupFlow/DevHome.SetupFlow/Models/CloneRepoTask.cs
@@ -7,6 +7,8 @@
 using System.Globalization;
 using System.IO;
 using System.Threading.Tasks;
+using CommunityToolkit.Mvvm.ComponentModel;
+using CommunityToolkit.Mvvm.Input;
 using DevHome.Common.Services;
 using DevHome.Common.TelemetryEvents;
 using DevHome.Common.TelemetryEvents.SetupFlow;
@@ -23,7 +25,7 @@ namespace DevHome.SetupFlow.Models;
 /// Object to hold all information needed to clone a repository.
 /// 1:1 CloningInformation to repository.
 /// </summary>
-public class CloneRepoTask : ISetupTask
+public partial class CloneRepoTask : ObservableObject, ISetupTask
 {
     /// <summary>
     /// Absolute path the user wants to clone their repository to.
@@ -71,6 +73,29 @@ public bool WasCloningSuccessful
         get; private set;
     }
 
+    [ObservableProperty]
+    private bool _isRepoNameTrimmed;
+
+    [RelayCommand]
+    public void RepoNameTrimmed()
+    {
+        IsRepoNameTrimmed = true;
+    }
+
+    [ObservableProperty]
+    private bool _isClonePathTrimmed;
+
+    [RelayCommand]
+    public void ClonePathTrimmed()
+    {
+        IsClonePathTrimmed = true;
+    }
+
+    /// <summary>
+    /// Gets the repository in a [organization]\[reponame] style
+    /// </summary>
+    public string RepositoryOwnerAndName => Path.Join(RepositoryToClone.OwningAccountName ?? string.Empty, RepositoryToClone.DisplayName);
+
     private TaskMessages _taskMessage;
 
     public TaskMessages GetLoadingMessages() => _taskMessage;
diff --git a/tools/SetupFlow/DevHome.SetupFlow/ViewModels/RepoConfigReviewViewModel.cs b/tools/SetupFlow/DevHome.SetupFlow/ViewModels/RepoConfigReviewViewModel.cs
index 47744c80c0..eaa36069e0 100644
--- a/tools/SetupFlow/DevHome.SetupFlow/ViewModels/RepoConfigReviewViewModel.cs
+++ b/tools/SetupFlow/DevHome.SetupFlow/ViewModels/RepoConfigReviewViewModel.cs
@@ -3,6 +3,7 @@
 
 using System.Collections.ObjectModel;
 using System.Linq;
+using DevHome.SetupFlow.Models;
 using DevHome.SetupFlow.Services;
 using DevHome.SetupFlow.TaskGroups;
 
@@ -13,8 +14,8 @@ public partial class RepoConfigReviewViewModel : ReviewTabViewModelBase
     private readonly ISetupFlowStringResource _stringResource;
     private readonly RepoConfigTaskGroup _repoTaskGroup;
 
-    public ReadOnlyObservableCollection<string> RepositoriesToClone =>
-        new (new ObservableCollection<string>(_repoTaskGroup.CloneTasks.Select(x => x.CloneLocation.FullName)));
+    public ReadOnlyObservableCollection<CloneRepoTask> RepositoriesToClone =>
+        new (new ObservableCollection<CloneRepoTask>(_repoTaskGroup.CloneTasks));
 
     public override bool HasItems => RepositoriesToClone.Any();
 
diff --git a/tools/SetupFlow/DevHome.SetupFlow/Views/RepoConfigReviewView.xaml b/tools/SetupFlow/DevHome.SetupFlow/Views/RepoConfigReviewView.xaml
index c799596ac0..5ac0ce1a99 100644
--- a/tools/SetupFlow/DevHome.SetupFlow/Views/RepoConfigReviewView.xaml
+++ b/tools/SetupFlow/DevHome.SetupFlow/Views/RepoConfigReviewView.xaml
@@ -9,10 +9,22 @@
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:ctControls="using:CommunityToolkit.Labs.WinUI"
     xmlns:converters="using:CommunityToolkit.WinUI.UI.Converters"
+    xmlns:ic="using:Microsoft.Xaml.Interactions.Core"
+    xmlns:i="using:Microsoft.Xaml.Interactivity"
+    xmlns:models="using:DevHome.SetupFlow.Models"
     mc:Ignorable="d">
     <UserControl.Resources>
         <ResourceDictionary>
             <converters:CollectionVisibilityConverter x:Key="CollectionVisibilityConverter" EmptyValue="Visible" NotEmptyValue="Collapsed"/>
+            <converters:BoolToObjectConverter x:Key="BoolToGlyphConverter" TrueValue="&#xF0BD;" FalseValue="&#xF03F;"/>
+            <Style x:Key="BorderStyle" TargetType="Border">
+                <Setter Property="BorderBrush" Value="{ThemeResource DividerStrokeColorDefaultBrush}" />
+            </Style>
+            <Style x:Key="ListViewItemStretchStyle" TargetType="ListViewItem">
+                <Setter Property="HorizontalContentAlignment" Value="Stretch" />
+                <Setter Property="Margin" Value="0" />
+                <Setter Property="Padding" Value="0" />
+            </Style>
         </ResourceDictionary>
     </UserControl.Resources>
     <Grid>
@@ -24,10 +36,67 @@
         <ListView ScrollViewer.VerticalScrollMode="Enabled"
             ScrollViewer.VerticalScrollBarVisibility="Visible"
             ItemsSource="{x:Bind ViewModel.RepositoriesToClone, Mode=OneWay}"
-            SelectionMode="None">
-            <DataTemplate x:DataType="x:String">
-                <TextBlock Text="{x:Bind}" TextWrapping="NoWrap" TextTrimming="WordEllipsis" />
-            </DataTemplate>
+            SelectionMode="None"
+            ItemContainerStyle="{ThemeResource ListViewItemStretchStyle}">
+            <ListView.Header>
+                <Grid>
+                    <Grid.RowDefinitions>
+                        <RowDefinition Height="40"/>
+                    </Grid.RowDefinitions>
+                    <Grid.ColumnDefinitions>
+                        <ColumnDefinition Width="*" />
+                        <ColumnDefinition Width="550" />
+                    </Grid.ColumnDefinitions>
+                    <Border Grid.Column="0" Style="{StaticResource BorderStyle}" BorderThickness="0, 0, 1, 0">
+                        <TextBlock x:Uid="ms-resource:///DevHome.SetupFlow/Resources/RepositoryNameHeader" VerticalAlignment="Center" HorizontalTextAlignment="Left" Padding="15, 0, 0, 0"/>
+                    </Border>
+                    <TextBlock Grid.Column="1" x:Uid="ms-resource:///DevHome.SetupFlow/Resources/RepositoryClonePathHeader" VerticalAlignment="Center" HorizontalTextAlignment="Left" Padding="15, 0, 0, 0"/>
+                </Grid>
+            </ListView.Header>
+            <ListView.ItemTemplate>
+                <DataTemplate x:DataType="models:CloneRepoTask">
+                    <Grid>
+                        <Grid.RowDefinitions>
+                            <RowDefinition Height="40"/>
+                        </Grid.RowDefinitions>
+                        <Grid.ColumnDefinitions>
+                            <ColumnDefinition Width="*" />
+                            <ColumnDefinition Width="550" />
+                        </Grid.ColumnDefinitions>
+                        <Border Grid.Column="0" Style="{StaticResource BorderStyle}" BorderThickness="0, 1, 1, 0">
+                            <Grid ColumnSpacing="5">
+                                <ToolTipService.ToolTip>
+                                    <ToolTip IsEnabled="{x:Bind IsRepoNameTrimmed, Mode=OneWay}" Content="{x:Bind RepositoryOwnerAndName}"/>
+                                </ToolTipService.ToolTip>
+                                <Grid.ColumnDefinitions>
+                                    <ColumnDefinition Width="0.1*"/>
+                                    <ColumnDefinition/>
+                                </Grid.ColumnDefinitions>
+                                <FontIcon Grid.Column="0" Width="20" Height="20" FontFamily="{ThemeResource DevHomeFluentIcons}" Glyph="{x:Bind RepositoryToClone.IsPrivate, Mode=OneWay, Converter={StaticResource BoolToGlyphConverter}}"/>
+                                <TextBlock Grid.Column="1" Text="{x:Bind RepositoryOwnerAndName}" VerticalAlignment="Center" HorizontalAlignment="Left" TextTrimming="CharacterEllipsis">
+                                     <i:Interaction.Behaviors>
+                                        <ic:EventTriggerBehavior EventName="IsTextTrimmedChanged">
+                                            <ic:InvokeCommandAction Command="{x:Bind RepoNameTrimmedCommand}"/>
+                                        </ic:EventTriggerBehavior>
+                                     </i:Interaction.Behaviors>
+                                </TextBlock>
+                            </Grid>
+                        </Border>
+                        <Border Grid.Column="1" Style="{StaticResource BorderStyle}" BorderThickness="1, 1, 0, 0">
+                            <ToolTipService.ToolTip>
+                                <ToolTip IsEnabled="{x:Bind IsClonePathTrimmed, Mode=OneWay}" Content="{x:Bind CloneLocation}"/>
+                            </ToolTipService.ToolTip>
+                            <TextBlock Text="{x:Bind CloneLocation}" TextWrapping="NoWrap" TextTrimming="CharacterEllipsis" VerticalAlignment="Center" Padding="10, 0, 0, 0">
+                                 <i:Interaction.Behaviors>
+                                        <ic:EventTriggerBehavior EventName="IsTextTrimmedChanged">
+                                            <ic:InvokeCommandAction Command="{x:Bind ClonePathTrimmedCommand}"/>
+                                        </ic:EventTriggerBehavior>
+                                     </i:Interaction.Behaviors>
+                            </TextBlock>
+                        </Border>
+                    </Grid>
+                </DataTemplate>
+            </ListView.ItemTemplate>
         </ListView>
     </Grid>
 </UserControl>