Skip to content

Commit 4f0a96e

Browse files
author
Gene Hynson
authored
fix(sub): card updates, various bug fixes (#6086)
* fix(sub): various UX fixes * fix(sub): long sub name pushed off screen
1 parent 70eedfb commit 4f0a96e

File tree

11 files changed

+78
-58
lines changed

11 files changed

+78
-58
lines changed

‎src/writeData/subscriptions/components/DetailsSubscriptionPage.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
h3 {
1818
font-size: $cf-space-m;
1919
line-height: $cf-space-m;
20+
overflow-wrap: break-word;
2021
}
2122

2223
h6 {

‎src/writeData/subscriptions/components/JsonParsingForm.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ import {event} from 'src/cloud/utils/reporting'
3737

3838
// Styles
3939
import 'src/writeData/subscriptions/components/JsonParsingForm.scss'
40-
import ValidationInputWithTooltip from './ValidationInputWithTooltip'
40+
import ValidationInputWithTooltip from 'src/writeData/subscriptions/components/ValidationInputWithTooltip'
4141

4242
interface Props {
4343
formContent: Subscription

‎src/writeData/subscriptions/components/JsonPathInput.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ import {
3434
handleDuplicateFieldTagName,
3535
} from 'src/writeData/subscriptions/utils/form'
3636
import {event} from 'src/cloud/utils/reporting'
37-
import ValidationInputWithTooltip from './ValidationInputWithTooltip'
37+
import ValidationInputWithTooltip from 'src/writeData/subscriptions/components/ValidationInputWithTooltip'
3838

3939
interface Props {
4040
name: string

‎src/writeData/subscriptions/components/StatusHeader.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,8 @@ import {
2020

2121
// Types
2222
import {Subscription} from 'src/types/subscriptions'
23-
import {SubscriptionListContext} from '../context/subscription.list'
24-
import SubscriptionErrorsOverlay from './SubscriptionErrorsOverlay'
23+
import {SubscriptionListContext} from 'src/writeData/subscriptions/context/subscription.list'
24+
import SubscriptionErrorsOverlay from 'src/writeData/subscriptions/components/SubscriptionErrorsOverlay'
2525

2626
interface Props {
2727
currentSubscription: Subscription

‎src/writeData/subscriptions/components/StringParsingForm.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ import {
3434
import 'src/writeData/subscriptions/components/StringParsingForm.scss'
3535
import {event} from 'src/cloud/utils/reporting'
3636
import {ComponentStatus} from '@influxdata/clockface'
37-
import ValidationInputWithTooltip from './ValidationInputWithTooltip'
37+
import ValidationInputWithTooltip from 'src/writeData/subscriptions/components/ValidationInputWithTooltip'
3838

3939
interface Props {
4040
formContent: Subscription

‎src/writeData/subscriptions/components/StringPatternInput.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ import {
2525
REGEX_TOOLTIP,
2626
} from 'src/writeData/subscriptions/utils/form'
2727
import {event} from 'src/cloud/utils/reporting'
28-
import ValidationInputWithTooltip from './ValidationInputWithTooltip'
28+
import ValidationInputWithTooltip from 'src/writeData/subscriptions/components/ValidationInputWithTooltip'
2929

3030
interface Props {
3131
name: string

‎src/writeData/subscriptions/components/SubscriptionCard.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ import {
1919

2020
// Types
2121
import {Subscription} from 'src/types/subscriptions'
22-
import {SubscriptionListContext} from '../context/subscription.list'
22+
import {SubscriptionListContext} from 'src/writeData/subscriptions/context/subscription.list'
2323
import {LOAD_DATA, SUBSCRIPTIONS} from 'src/shared/constants/routes'
2424

2525
// Utils
@@ -131,9 +131,7 @@ const SubscriptionCard: FC<Props> = ({subscription}) => {
131131
}}
132132
testID="subscription-name"
133133
/>
134-
<ResourceCard.Description
135-
description={`${subscription.brokerHost}:${subscription.brokerPort}/${subscription.topic}`}
136-
/>
134+
<ResourceCard.Description description={`${subscription.description}`} />
137135
<ResourceCard.Meta>
138136
{!!bulletins.length ? (
139137
<Label
@@ -160,7 +158,11 @@ const SubscriptionCard: FC<Props> = ({subscription}) => {
160158
/>
161159
)}
162160
<>{subscription.status}</>
161+
<>{`${subscription.brokerHost}:${subscription.brokerPort}/${subscription.topic}`}</>
163162
<>Last Modified: {timeSince}</>
163+
<>
164+
Last Modified By: {subscription.updatedBy ?? subscription.createdBy}
165+
</>
164166
{subscriptionID}
165167
</ResourceCard.Meta>
166168
</ResourceCard>

‎src/writeData/subscriptions/components/SubscriptionErrorsOverlay.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import {
1616
// Styles
1717
import 'src/writeData/subscriptions/components/SubscriptionErrorsOverlay.scss'
1818
import {event} from 'src/cloud/utils/reporting'
19-
import {Bulletin} from '../context/subscription.list'
19+
import {Bulletin} from 'src/writeData/subscriptions/context/subscription.list'
2020

2121
interface Props {
2222
bulletins: Bulletin[]

‎src/writeData/subscriptions/components/UserInput.tsx‎

Lines changed: 57 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import {
1515

1616
// Types
1717
import {Subscription} from 'src/types/subscriptions'
18+
import {handleValidation} from 'src/writeData/subscriptions/utils/form'
1819

1920
interface Props {
2021
formContent: Subscription
@@ -30,47 +31,62 @@ const UserInput: FC<Props> = ({formContent, updateForm, className, edit}) => (
3031
margin={ComponentSize.Large}
3132
className={`${className}-broker-form__creds`}
3233
>
33-
<Form.Element label="Username">
34-
<Input
35-
type={InputType.Text}
36-
placeholder="userName"
37-
name="username"
38-
value={formContent?.brokerUsername ?? ''}
39-
onChange={e =>
40-
updateForm({
41-
...formContent,
42-
brokerUsername: e.target.value,
43-
})
44-
}
45-
testID={`${className}-broker-form--username`}
46-
status={
47-
edit || className === 'create'
48-
? ComponentStatus.Default
49-
: ComponentStatus.Disabled
50-
}
51-
maxLength={255}
52-
/>
53-
</Form.Element>
54-
<Form.Element label="Password">
55-
<Input
56-
type={InputType.Password}
57-
placeholder="*********"
58-
name="password"
59-
value={formContent?.brokerPassword ?? ''}
60-
onChange={e =>
61-
updateForm({
62-
...formContent,
63-
brokerPassword: e.target.value,
64-
})
65-
}
66-
testID={`${className}-broker-form--password`}
67-
status={
68-
edit || className === 'create'
69-
? ComponentStatus.Default
70-
: ComponentStatus.Disabled
71-
}
72-
/>
73-
</Form.Element>
34+
<Form.ValidationElement
35+
label="Username"
36+
required={true}
37+
validationFunc={() =>
38+
handleValidation('Username', formContent.brokerUsername)
39+
}
40+
value={formContent.brokerUsername}
41+
>
42+
{status => (
43+
<Input
44+
type={InputType.Text}
45+
placeholder="username"
46+
name="username"
47+
value={formContent?.brokerUsername ?? ''}
48+
onChange={e =>
49+
updateForm({
50+
...formContent,
51+
brokerUsername: e.target.value,
52+
})
53+
}
54+
testID={`${className}-broker-form--username`}
55+
status={
56+
edit || className === 'create' ? status : ComponentStatus.Disabled
57+
}
58+
maxLength={255}
59+
/>
60+
)}
61+
</Form.ValidationElement>
62+
<Form.ValidationElement
63+
label="Password"
64+
required={true}
65+
value={formContent.brokerPassword}
66+
validationFunc={() =>
67+
handleValidation('Password', formContent.brokerPassword)
68+
}
69+
>
70+
{status => (
71+
<Input
72+
type={InputType.Password}
73+
placeholder="*********"
74+
name="password"
75+
required={true}
76+
value={formContent?.brokerPassword ?? ''}
77+
onChange={e =>
78+
updateForm({
79+
...formContent,
80+
brokerPassword: e.target.value,
81+
})
82+
}
83+
testID={`${className}-broker-form--password`}
84+
status={
85+
edit || className === 'create' ? status : ComponentStatus.Disabled
86+
}
87+
/>
88+
)}
89+
</Form.ValidationElement>
7490
</FlexBox>
7591
)
7692
export default UserInput

‎src/writeData/subscriptions/context/subscription.list.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import {event} from 'src/cloud/utils/reporting'
2020
import {Subscription} from 'src/types/subscriptions'
2121
import {RemoteDataState} from 'src/types'
2222
import {SubscriptionStatus} from 'src/client/subscriptionsRoutes'
23-
import {getBulletinsFromStatus} from '../utils/form'
23+
import {getBulletinsFromStatus} from 'src/writeData/subscriptions/utils/form'
2424

2525
export interface SubscriptionListContextType {
2626
getAll: () => void

0 commit comments

Comments
 (0)