Update library dependency diff rendering

hojberg · hojberg · commit 37b639489f14 · 2025-10-23T14:39:34.000-04:00
Now we can see how a dependency being upgraded instead of "removed" and
"added". Keeps highlighting version and everything.
diff --git a/api-stubs/branch-diff-with-libs.json b/api-stubs/branch-diff-with-libs.json
diff --git a/elm-git.json b/elm-git.json
@@ -1,7 +1,7 @@
 {
     "git-dependencies": {
         "direct": {
-            "https://github.com/unisonweb/ui-core": "d9cf0e30bbb75decac36f1b9f4e2855d5a69d1e0"
+            "https://github.com/unisonweb/ui-core": "9518fe75925e2a2d3828a4a5c2415ed0eac5d661"
         },
         "indirect": {}
     }
diff --git a/src/Code2/Workspace/WorkspaceCard.elm b/src/Code2/Workspace/WorkspaceCard.elm
@@ -1,14 +1,12 @@
 module Code2.Workspace.WorkspaceCard exposing (..)
 
-import Code.ProjectDependency as ProjectDependency exposing (ProjectDependency)
 import Code2.Workspace.WorkspaceCardTitlebarButton as TitlebarButton exposing (titlebarButton)
 import Html exposing (Html, div, header, section, span, text)
 import Html.Attributes exposing (class)
 import Lib.OperatingSystem exposing (OperatingSystem)
 import UI
 import UI.Card as Card
 import UI.Click as Click exposing (Click)
-import UI.ContextualTag as ContextualTag
 import UI.Icon as Icon exposing (Icon)
 import UI.KeyboardShortcut as KeyboardShortcut exposing (KeyboardShortcut(..), single)
 import UI.KeyboardShortcut.Key as Key exposing (letter)
@@ -186,18 +184,6 @@ map f card_ =
 
 
 
--- RELATED VIEW HELPERS
-
-
-viewLibraryTag : ProjectDependency -> Html msg
-viewLibraryTag dep =
-    ContextualTag.contextualTag Icon.book (ProjectDependency.toString dep)
-        |> ContextualTag.decorativePurple
-        |> ContextualTag.withTooltipText "Library dependency"
-        |> ContextualTag.view
-
-
-
 -- VIEW
 
 
diff --git a/src/Code2/Workspace/WorkspaceDefinitionItemCard.elm b/src/Code2/Workspace/WorkspaceDefinitionItemCard.elm
@@ -7,6 +7,7 @@ import Code.Definition.Term as Term
 import Code.Definition.Type as Type
 import Code.FullyQualifiedName as FQN exposing (FQN)
 import Code.Hash as Hash
+import Code.ProjectDependency as ProjectDependency
 import Code.Source.SourceViewConfig as SourceViewConfig
 import Code.Syntax.SyntaxConfig as SyntaxConfig
 import Code2.Workspace.DefinitionItem as DefinitionItem exposing (DefinitionItem(..))
@@ -254,7 +255,7 @@ titlebarLeft cfg =
         lib =
             cfg.item
                 |> DefinitionItem.toLib
-                |> Maybe.map WorkspaceCard.viewLibraryTag
+                |> Maybe.map ProjectDependency.viewLibraryBadge
                 |> Maybe.withDefault UI.nothing
 
         copySourceToClipboard =
diff --git a/src/Code2/Workspace/WorkspaceDefinitionMatchesCard.elm b/src/Code2/Workspace/WorkspaceDefinitionMatchesCard.elm
@@ -5,6 +5,7 @@ import Code.Definition.Term as Term exposing (Term(..))
 import Code.Definition.Type as Type exposing (Type(..))
 import Code.DefinitionSummaryTooltip as DefinitionSummaryTooltip
 import Code.FullyQualifiedName as FQN
+import Code.ProjectDependency as ProjectDependency
 import Code.Syntax.SyntaxSegment as SyntaxSegment
 import Code2.Workspace.DefinitionItem as DefinitionItem exposing (DefinitionItem)
 import Code2.Workspace.DefinitionMatch as DefinitionMatch exposing (DefinitionMatch(..))
@@ -328,7 +329,7 @@ view cfg =
         lib =
             cfg.contextItem
                 |> DefinitionItem.toLib
-                |> Maybe.map WorkspaceCard.viewLibraryTag
+                |> Maybe.map ProjectDependency.viewLibraryBadge
                 |> Maybe.withDefault UI.nothing
 
         ({ terms, types, tests, abilities, docs } as group) =
diff --git a/src/UnisonShare/BranchDiff/LibDep.elm b/src/UnisonShare/BranchDiff/LibDep.elm
@@ -1,27 +1,87 @@
 module UnisonShare.BranchDiff.LibDep exposing (..)
 
+import Code.FullyQualifiedName as FQN exposing (FQN)
+import Code.ProjectDependency as ProjectDependency exposing (ProjectDependency)
 import Json.Decode as Decode
 import Json.Decode.Pipeline exposing (required)
 import Lib.Decode.Helpers exposing (failInvalid, whenTagIs)
+import List.Extra as ListE
 
 
 type alias LibDepInfo =
-    { name : String }
+    { name : FQN, dep : ProjectDependency }
 
 
 type LibDep
     = Added LibDepInfo
     | Removed LibDepInfo
+    | Updated { before : LibDepInfo, after : LibDepInfo }
+
+
+same : LibDep -> LibDep -> Bool
+same a b =
+    ProjectDependency.same (projectDependency a) (projectDependency b)
+
+
+libDepInfo : LibDep -> LibDepInfo
+libDepInfo libDep =
+    case libDep of
+        Added info ->
+            info
+
+        Removed info ->
+            info
+
+        Updated { before } ->
+            before
+
+
+projectDependency : LibDep -> ProjectDependency
+projectDependency libDep =
+    libDep |> libDepInfo |> .dep
+
+
+mergeUpdated : List LibDep -> List LibDep
+mergeUpdated deps =
+    let
+        go lib acc =
+            case ( List.filter (same lib) deps, ListE.find (same lib) acc ) of
+                ( [ Added addedInfo, Removed removedInfo ], Nothing ) ->
+                    Updated { before = removedInfo, after = addedInfo } :: acc
+
+                ( [ Removed removedInfo, Added addedInfo ], Nothing ) ->
+                    Updated { before = removedInfo, after = addedInfo } :: acc
+
+                ( [ Added _, Removed _ ], Just _ ) ->
+                    acc
+
+                ( [ Removed _, Added _ ], Just _ ) ->
+                    acc
+
+                _ ->
+                    lib :: acc
+    in
+    List.foldr go [] deps
+
+
+
+-- DECODE
 
 
 decodeMaybe : Decode.Decoder (Maybe LibDep)
 decodeMaybe =
     let
         makeAdded name =
-            Added { name = name }
+            Added
+                { name = FQN.fromString ("lib." ++ name)
+                , dep = ProjectDependency.fromString name
+                }
 
         makeRemoved name =
-            Removed { name = name }
+            Removed
+                { name = FQN.fromString ("lib." ++ name)
+                , dep = ProjectDependency.fromString name
+                }
     in
     Decode.oneOf
         [ whenTagIs "Added"
diff --git a/src/UnisonShare/Page/ProjectContributionChangesPage.elm b/src/UnisonShare/Page/ProjectContributionChangesPage.elm
@@ -5,8 +5,10 @@ import Code.Definition.Reference exposing (Reference)
 import Code.FullyQualifiedName as FQN
 import Code.Hash as Hash
 import Code.Perspective as Perspective
+import Code.ProjectDependency as ProjectDependency
 import Code.Syntax as Syntax
 import Code.Syntax.SyntaxConfig as SyntaxConfig
+import Code.Version as Version
 import Html exposing (Html, br, code, div, h2, label, p, pre, span, strong, text)
 import Html.Attributes exposing (class, id, style)
 import Http
@@ -666,58 +668,89 @@ viewChangedDefinitionsCards projectRef toggledChangeLines maxBadgeLength branchD
 
 
 viewLibDep : Int -> LibDep -> Html msg
-viewLibDep maxBadgeLength dep =
+viewLibDep maxBadgeLength libDep =
     let
         viewCard content =
             Card.card
-                [ div [ class "definition-change-header" ] [ div [ class "change-line" ] content ] ]
+                [ div [ class "definition-change-header" ]
+                    [ div [ class "change-line" ] content ]
+                ]
                 |> Card.withClassName "definition-change lib-dep"
                 |> Card.asContained
                 |> Card.view
 
         badge icon type_ =
-            Tooltip.text type_
-                |> Tooltip.tooltip
-                |> Tooltip.withArrow Tooltip.Start
-                |> Tooltip.view
-                    (viewChangeBadge_ maxBadgeLength icon type_)
+            viewChangeBadge_ maxBadgeLength icon type_
 
-        viewTitle name =
-            let
-                fqn =
-                    FQN.fromList [ "lib", name ]
-            in
-            div [ class "change-title" ] [ FQN.view fqn ]
+        viewDepInfoBadge dep =
+            div [ class "dep-info change-info" ]
+                [ div [ class "change-title" ]
+                    [ ProjectDependency.viewLibraryBadge_ { withVersion = True, withTooltip = False } dep.dep
+                    , span [ class "lib-namespace-info" ] [ text "(", FQN.view dep.name, text ")" ]
+                    ]
+                ]
     in
-    case dep of
-        LibDep.Added { name } ->
+    case libDep of
+        LibDep.Added dep ->
             viewCard
                 [ badge Icon.largePlus "Added"
-                , div [ class "def-icon-anchor" ]
-                    [ Tooltip.text "Lib dependency"
-                        |> Tooltip.tooltip
-                        |> Tooltip.withArrow Tooltip.Start
-                        |> Tooltip.view (span [ class "def-icon" ] [ Icon.view Icon.book ])
-                    ]
-                , div [ class "change-info" ] [ viewTitle name ]
+                , viewDepInfoBadge dep
                 ]
 
-        LibDep.Removed { name } ->
+        LibDep.Removed dep ->
             viewCard
                 [ badge Icon.dash "Removed"
-                , div [ class "def-icon-anchor" ]
-                    [ Tooltip.text "Lib dependency"
-                        |> Tooltip.tooltip
-                        |> Tooltip.withArrow Tooltip.Start
-                        |> Tooltip.view (span [ class "def-icon" ] [ Icon.view Icon.book ])
+                , viewDepInfoBadge dep
+                ]
+
+        LibDep.Updated { before, after } ->
+            let
+                toFrom =
+                    case ( before.dep.version, after.dep.version ) of
+                        ( Just beforeV, Just afterV ) ->
+                            [ ProjectDependency.viewLibraryBadge_
+                                { withVersion = False
+                                , withTooltip = False
+                                }
+                                before.dep
+                            , Version.view beforeV
+                            , Icon.view Icon.arrowRight
+                            , Version.view afterV
+                            , span [ class "lib-namespace-info" ]
+                                [ text "("
+                                , FQN.view before.name
+                                , Icon.view Icon.arrowRight
+                                , FQN.view after.name
+                                , text ")"
+                                ]
+                            ]
+
+                        _ ->
+                            [ ProjectDependency.viewLibraryBadge before.dep
+                            , Icon.view Icon.arrowRight
+                            , ProjectDependency.viewLibraryBadge after.dep
+                            , span [ class "lib-namespace-info" ]
+                                [ text "("
+                                , FQN.view before.name
+                                , Icon.view Icon.arrowRight
+                                , FQN.view after.name
+                                , text ")"
+                                ]
+                            ]
+            in
+            viewCard
+                [ badge Icon.refreshSmallBold "Updated"
+                , div [ class "dep-info change-info" ]
+                    [ div [ class "change-title" ] toFrom
                     ]
-                , div [ class "change-info" ] [ viewTitle name ]
                 ]
 
 
 viewLibDeps : Int -> List LibDep -> List (Html msg)
 viewLibDeps maxBadgeLength deps =
-    List.map (viewLibDep maxBadgeLength) deps
+    deps
+        |> LibDep.mergeUpdated
+        |> List.map (viewLibDep maxBadgeLength)
 
 
 viewBranchDiff : ProjectRef -> ToggledChangeLines -> BranchDiff -> Html Msg
diff --git a/src/css/unison-share/page/project-contribution-changes-page.css b/src/css/unison-share/page/project-contribution-changes-page.css
@@ -102,6 +102,7 @@
         }
 
         & .change-info {
+          position: relative;
           display: flex;
           flex-direction: row;
           align-items: center;
@@ -129,6 +130,34 @@
           }
         }
 
+        & .change-info.dep-info {
+          margin-left: 0.5rem;
+
+          & .version {
+            font-size: var(--font-size-medium);
+            font-weight: 500;
+          }
+
+          & .lib-namespace-info {
+            position: relative;
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            font-size: var(--font-size-extra-small);
+            line-height: 1;
+            color: var(--u-color_text_subdued);
+            font-family: var(--font-monospace);
+            & .fully-qualified-name_segment {
+              color: var(--u-color_text_subdued);
+            }
+
+            & .icon {
+              font-size: var(--font-size-extra-small);
+              margin: 0 0.25rem;
+            }
+          }
+        }
+
         & .definition-change-actions .tooltip-bubble {
           margin-right: 0.5rem;
           margin-top: 0.125rem;
@@ -538,12 +567,14 @@
     & .icon.ability-constructor,
     & .icon.data-constructor,
     & .icon.doc,
-    & .icon.book,
     & .icon.test {
       color: var(--u-color_icon_subdued);
     }
 
     & .change-title {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
       color: var(--u-color_text);
 
       & .fully-qualified-name {
@@ -659,12 +690,21 @@
 }
 
 @media only screen and (--u-viewport_max-md) {
+  .project-contribution-changes-page
+    .definition-changes
+    .definition-change.card
+    .definition-change-header
+    .change-info.dep-info
+    .lib-namespace-info {
+    display: none;
+  }
+
   .project-contribution-changes-page {
     & .definition-change.card {
       & .definition-change-header .change-line {
         & .change-info .hash,
         & .change-info .extra-info,
-        & .change-info .icon.arrow-right,
+        & .change-info:not(.dep-info) .icon.arrow-right,
         & .change-badge label {
           display: none;
         }
diff --git a/webpack.dev.js b/webpack.dev.js
@@ -12,7 +12,7 @@ const docExamplesReadmeDef = require("./api-stubs/doc-examples-readme-definition
 const blogEngineLib = require("./api-stubs/blog-engine-lib.json");
 const browseBlog = require("./api-stubs/browse-blog.json");
 const notifications = require("./api-stubs/notifications.json");
-const branchDiff = require("./api-stubs/branch-diff-weird-equals.json");
+const branchDiff = require("./api-stubs/branch-diff-with-libs.json");
 
 // ENV
 const API_URL = process.env.API_URL || "http://127.0.0.1:5424";

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"git-dependencies": {`
`3`	`3`	`"direct": {`
`4`		`- "https://github.com/unisonweb/ui-core": "d9cf0e30bbb75decac36f1b9f4e2855d5a69d1e0"`
	`4`	`+ "https://github.com/unisonweb/ui-core": "9518fe75925e2a2d3828a4a5c2415ed0eac5d661"`
`5`	`5`	`},`
`6`	`6`	`"indirect": {}`
`7`	`7`	`}`