47 | {initialized ? (
48 |
49 |
50 | Export to Jira Cloud
51 |
52 | {!filters.loading &&
53 |
58 | }
59 |
60 |
61 |
62 | {issues.loading ? (
63 |
64 |
65 |
66 | ) : (
67 |
71 | )}
72 | {issues.selected &&
73 |
74 |
75 |
76 | }
77 |
78 | ) : (
79 |
80 |
81 |
82 | )}
83 |
84 | }
86 | isOpen={error && true}
87 | appearance='error'>
88 |
89 | {truncatedErrorMessage}
90 |
91 | {retry && (
92 | Retry
93 | )}
94 | {reauthorize && (
95 | Reauthorize
96 | )}
97 | {error && error.faqTopic && (
98 | More info
99 | )}
100 |
101 |
102 |
103 | )
104 | }
105 | handleFilterSelected (filterKey) {
106 | this.props.viewmodel.selectFilter(filterKey)
107 | }
108 | handleSettingsClick () {
109 | this.props.viewmodel.viewSettings()
110 | }
111 | handleErrorRetry () {
112 | this.props.viewmodel.retry()
113 | }
114 | handleReauthorize () {
115 | this.props.viewmodel.reauthorize()
116 | }
117 | handleMoreInfoClick () {
118 | this.props.viewmodel.moreInfo()
119 | }
120 | preventDefault (event) {
121 | event.preventDefault()
122 | }
123 | }
124 |
125 | ViewIssuesPanel.propTypes = {
126 | viewmodel: PropTypes.object.isRequired
127 | }
128 |
129 | const InitializingWrapper = styled.div`
130 | height: ${akGridSizeUnitless * 45}px;
131 | display: flex;
132 | justify-content: space-around;
133 | align-items: center;
134 | `
135 | const PanelWrapper = styled.div`
136 | padding:
137 | 10px
138 | 12px
139 | ${akGridSizeUnitless * 3}px
140 | ${akGridSizeUnitless * 3}px
141 | ;
142 | font-family: ${akFontFamily};
143 | `
144 | const HeaderDiv = styled.div`
145 | display: flex;
146 | justify-content: space-between;
147 | align-items: center;
148 | padding-right: 10px;
149 | `
150 | const JiraIssueHeader = styled.h4`
151 | font-size: 16px;
152 | font-weight: 500;
153 | letter-spacing: -0.006em;
154 | color: ${akColorN800};
155 | `
156 | const FilterWrapper = styled.div`
157 | display: flex;
158 | justify-content: space-between;
159 | align-items: center;
160 | `
161 | const FilterLoadingWrapper = styled.div`
162 | height: 283px;
163 | display: flex;
164 | justify-content: space-around;
165 | align-items: center;
166 | `
167 | const ModalPanel = styled.div`
168 | position: absolute;
169 | top: 0;
170 | left: 0;
171 | width: 470px;
172 | height: 320px;
173 | padding: 10px 20px 20px 20px;
174 | background-color: white;
175 | `
176 | const BannerWrapper = styled.div`
177 | position: fixed;
178 | top: 0;
179 | left: 0;
180 | width: 510px;
181 | z-index: 10;
182 | `
183 | const ClickableSpan = styled.span`
184 | margin-left: 5px;
185 | text-decoration: underline;
186 | cursor: pointer;
187 | `
188 |
189 | ReactDOM.render(