@@ -5,6 +5,80 @@ import { Utilities } from "@src/utilities/utilities";
5
5
import { AvailableUpdate } from "@types" ;
6
6
import ReactTooltip from "react-tooltip" ;
7
7
8
+ export const AvailableUpdateRow = ( {
9
+ update,
10
+ index,
11
+ showReleaseNotes,
12
+ children,
13
+ upgradeService,
14
+ } : {
15
+ update : AvailableUpdate ;
16
+ index : number ;
17
+ showReleaseNotes : ( releaseNotes : string ) => void ;
18
+ children : React . ReactNode ;
19
+ upgradeService ?: {
20
+ versionLabel ?: string ;
21
+ isLoading ?: boolean ;
22
+ error ?: string ;
23
+ } | null ;
24
+ } ) => {
25
+ return (
26
+ < div key = { index } className = "available-update-row" >
27
+ < div className = "tw-h-10 tw-bg-white tw-p-4 tw-flex tw-justify-between tw-items-center tw-rounded" >
28
+ < div className = "flex-column" >
29
+ < div className = "flex alignItems--center" >
30
+ < p className = "u-fontSize--header2 u-fontWeight--bold u-lineHeight--medium card-item-title " >
31
+ { update . versionLabel }
32
+ </ p >
33
+ { update . isRequired && (
34
+ < span className = "status-tag required u-marginLeft--10" >
35
+ { " " }
36
+ Required{ " " }
37
+ </ span >
38
+ ) }
39
+ </ div >
40
+ { update . upstreamReleasedAt && (
41
+ < p className = "u-fontSize--small u-fontWeight--medium u-textColor--bodyCopy u-marginTop--5" >
42
+ { " " }
43
+ Released{ " " }
44
+ < span className = "u-fontWeight--bold" >
45
+ { Utilities . dateFormat (
46
+ update . upstreamReleasedAt ,
47
+ "MM/DD/YY @ hh:mm a z"
48
+ ) }
49
+ </ span >
50
+ </ p >
51
+ ) }
52
+ </ div >
53
+ < div className = "flex alignItems--center" >
54
+ { update ?. releaseNotes && (
55
+ < >
56
+ < Icon
57
+ icon = "release-notes"
58
+ size = { 24 }
59
+ onClick = { ( ) => showReleaseNotes ( update ?. releaseNotes ) }
60
+ data-tip = "View release notes"
61
+ className = "u-marginRight--5 clickable"
62
+ />
63
+ < ReactTooltip effect = "solid" className = "replicated-tooltip" />
64
+ </ >
65
+ ) }
66
+ { children }
67
+ </ div >
68
+ </ div >
69
+ { upgradeService ?. error &&
70
+ upgradeService ?. versionLabel === update . versionLabel && (
71
+ < div className = "tw-my-4" >
72
+ < span className = "u-fontSize--small u-textColor--error u-fontWeight--bold" >
73
+ { upgradeService . error }
74
+ error
75
+ </ span >
76
+ </ div >
77
+ ) }
78
+ </ div >
79
+ ) ;
80
+ } ;
81
+
8
82
const AvailableUpdatesComponent = ( {
9
83
updates,
10
84
showReleaseNotes,
@@ -71,78 +145,33 @@ const AvailableUpdatesComponent = ({
71
145
upgradeService ?. versionLabel === update . versionLabel &&
72
146
upgradeService . isLoading ;
73
147
return (
74
- < div key = { index } className = "available-update-row" >
75
- < div className = "tw-h-10 tw-bg-white tw-p-4 tw-flex tw-justify-between tw-items-center tw-rounded" >
76
- < div className = "flex-column" >
77
- < div className = "flex alignItems--center" >
78
- < p className = "u-fontSize--header2 u-fontWeight--bold u-lineHeight--medium card-item-title " >
79
- { update . versionLabel }
80
- </ p >
81
- { update . isRequired && (
82
- < span className = "status-tag required u-marginLeft--10" >
83
- { " " }
84
- Required{ " " }
85
- </ span >
86
- ) }
87
- </ div >
88
- { update . upstreamReleasedAt && (
89
- < p className = "u-fontSize--small u-fontWeight--medium u-textColor--bodyCopy u-marginTop--5" >
90
- { " " }
91
- Released{ " " }
92
- < span className = "u-fontWeight--bold" >
93
- { Utilities . dateFormat (
94
- update . upstreamReleasedAt ,
95
- "MM/DD/YY @ hh:mm a z"
96
- ) }
97
- </ span >
98
- </ p >
99
- ) }
100
- </ div >
101
- < div className = "flex alignItems--center" >
102
- { update ?. releaseNotes && (
103
- < >
104
- < Icon
105
- icon = "release-notes"
106
- size = { 24 }
107
- onClick = { ( ) => showReleaseNotes ( update ?. releaseNotes ) }
108
- data-tip = "View release notes"
109
- className = "u-marginRight--5 clickable"
110
- />
111
- < ReactTooltip
112
- effect = "solid"
113
- className = "replicated-tooltip"
114
- />
115
- </ >
116
- ) }
117
- < button
118
- className = { "btn tw-ml-2 primary blue" }
119
- onClick = { ( ) => startUpgradeService ( update ) }
120
- disabled = { ! update . isDeployable || isCurrentVersionLoading }
148
+ < AvailableUpdateRow
149
+ update = { update }
150
+ index = { index }
151
+ showReleaseNotes = { showReleaseNotes }
152
+ upgradeService = { upgradeService }
153
+ >
154
+ < >
155
+ < button
156
+ className = { "btn tw-ml-2 primary blue" }
157
+ onClick = { ( ) => startUpgradeService ( update ) }
158
+ disabled = { ! update . isDeployable || isCurrentVersionLoading }
159
+ >
160
+ < span
161
+ key = { update . nonDeployableCause }
162
+ data-tip-disable = { update . isDeployable }
163
+ data-tip = { update . nonDeployableCause }
164
+ data-for = "disable-deployment-tooltip"
121
165
>
122
- < span
123
- key = { update . nonDeployableCause }
124
- data-tip-disable = { update . isDeployable }
125
- data-tip = { update . nonDeployableCause }
126
- data-for = "disable-deployment-tooltip"
127
- >
128
- { isCurrentVersionLoading ? "Preparing..." : "Deploy" }
129
- </ span >
130
- </ button >
131
- < ReactTooltip
132
- effect = "solid"
133
- id = "disable-deployment-tooltip"
134
- />
135
- </ div >
136
- </ div >
137
- { upgradeService ?. error &&
138
- upgradeService ?. versionLabel === update . versionLabel && (
139
- < div className = "tw-my-4" >
140
- < span className = "u-fontSize--small u-textColor--error u-fontWeight--bold" >
141
- { upgradeService . error }
142
- </ span >
143
- </ div >
144
- ) }
145
- </ div >
166
+ { isCurrentVersionLoading ? "Preparing..." : "Deploy" }
167
+ </ span >
168
+ </ button >
169
+ < ReactTooltip
170
+ effect = "solid"
171
+ id = "disable-deployment-tooltip"
172
+ />
173
+ </ >
174
+ </ AvailableUpdateRow >
146
175
) ;
147
176
} ) }
148
177
</ div >
0 commit comments