Skip to content

Commit ecb2cba

Browse files
author
Gene Hynson
authored
feat(sub): delete ability (#4126)
1 parent 62a8be6 commit ecb2cba

File tree

5 files changed

+103
-55
lines changed

5 files changed

+103
-55
lines changed

‎CODEOWNERS‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
# Changes to any file in this repo require approval from a member of the InfluxData ui-team
22

3+
* @influxdata/ui-team
34
/src/writeData/subscriptions/ @influxdata/data-acquisition
4-
/src/types/subscriptions.ts @influxdata/data-acquisition
5-
* @influxdata/ui-team
5+
/src/types/subscriptions.ts @influxdata/data-acquisition

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

Lines changed: 37 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,50 @@
11
// Libraries
2-
import React, {FC} from 'react'
2+
import React, {FC, useContext} from 'react'
33

44
// Components
5-
import {ResourceCard} from '@influxdata/clockface'
5+
import {
6+
ButtonShape,
7+
ComponentColor,
8+
ComponentSize,
9+
ConfirmationButton,
10+
FlexBox,
11+
IconFont,
12+
ResourceCard,
13+
} from '@influxdata/clockface'
614

715
// Types
816
import {Subscription} from 'src/types/subscriptions'
17+
import {SubscriptionListContext} from '../context/subscription.list'
918

1019
interface Props {
1120
subscription: Subscription
1221
}
1322

14-
const SubscriptionCard: FC<Props> = ({subscription}) => (
15-
<ResourceCard
16-
key={`subscription-card-id--${subscription.id}`}
17-
testID="subscription-card"
18-
>
19-
<ResourceCard.Name name={subscription.name} />
20-
<ResourceCard.Description description={subscription.description} />
21-
</ResourceCard>
22-
)
23+
const SubscriptionCard: FC<Props> = ({subscription}) => {
24+
const {deleteSubscription} = useContext(SubscriptionListContext)
25+
return (
26+
<ResourceCard
27+
key={`subscription-card-id--${subscription.id}`}
28+
testID="subscription-card"
29+
contextMenu={
30+
<FlexBox margin={ComponentSize.ExtraSmall}>
31+
<ConfirmationButton
32+
color={ComponentColor.Colorless}
33+
icon={IconFont.Trash_New}
34+
shape={ButtonShape.Square}
35+
size={ComponentSize.ExtraSmall}
36+
confirmationLabel="Yes, delete this subscription"
37+
onConfirm={() => deleteSubscription(subscription.id)}
38+
confirmationButtonText="Confirm"
39+
testID="context-delete-menu"
40+
/>
41+
</FlexBox>
42+
}
43+
>
44+
<ResourceCard.Name name={subscription.name} />
45+
<ResourceCard.Description description={subscription.description} />
46+
</ResourceCard>
47+
)
48+
}
2349

2450
export default SubscriptionCard

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

Lines changed: 44 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@ import {
1111
ComponentColor,
1212
ComponentStatus,
1313
Page,
14+
SpinnerContainer,
15+
TechnoSpinner,
1416
} from '@influxdata/clockface'
1517
import EmptySubscriptionState from 'src/writeData/subscriptions/components/EmptySubscriptionState'
1618
import SubscriptionsList from 'src/writeData/subscriptions/components/SubscriptionsList'
@@ -38,53 +40,55 @@ import {ORGS, SUBSCRIPTIONS} from 'src/shared/constants/routes'
3840
import 'src/writeData/subscriptions/components/SubscriptionsLanding.scss'
3941

4042
const SubscriptionsLanding: FC = () => {
41-
const {subscriptions} = useContext(SubscriptionListContext)
43+
const {subscriptions, loading} = useContext(SubscriptionListContext)
4244
const history = useHistory()
4345
const org = useSelector(getOrg)
4446
return (
4547
<Page
4648
className="subscriptions-landing"
4749
titleTag={pageTitleSuffixer(['Cloud Native Subscriptions', 'Load Data'])}
4850
>
49-
<LoadDataHeader />
50-
<LoadDataTabbedPage activeTab="subscriptions">
51-
<Page.ControlBar fullWidth={true}>
52-
<Page.ControlBarLeft>
53-
<SearchWidget
54-
placeholderText="Filter subscriptions..."
55-
searchTerm=""
56-
onSearch={() => {}}
57-
/>
58-
<ResourceSortDropdown
59-
resourceType={ResourceType.Subscriptions}
60-
sortDirection={Sort.Ascending}
61-
sortKey="name"
62-
sortType={SortTypes.String}
63-
onSelect={() => {}}
64-
/>
65-
</Page.ControlBarLeft>
66-
<Page.ControlBarRight>
67-
<Button
68-
text="Create Subscription"
69-
icon={IconFont.Plus_New}
70-
color={ComponentColor.Primary}
71-
onClick={() => {
72-
history.push(
73-
`/${ORGS}/${org.id}/load-data/${SUBSCRIPTIONS}/create`
74-
)
75-
}}
76-
status={ComponentStatus.Default}
77-
titleText=""
78-
testID="create-subscription-button--control-bar"
79-
/>
80-
</Page.ControlBarRight>
81-
</Page.ControlBar>
82-
{subscriptions && subscriptions.length ? (
83-
<SubscriptionsList subscriptions={subscriptions} />
84-
) : (
85-
<EmptySubscriptionState />
86-
)}
87-
</LoadDataTabbedPage>
51+
<SpinnerContainer spinnerComponent={<TechnoSpinner />} loading={loading}>
52+
<LoadDataHeader />
53+
<LoadDataTabbedPage activeTab="subscriptions">
54+
<Page.ControlBar fullWidth={true}>
55+
<Page.ControlBarLeft>
56+
<SearchWidget
57+
placeholderText="Filter subscriptions..."
58+
searchTerm=""
59+
onSearch={() => {}}
60+
/>
61+
<ResourceSortDropdown
62+
resourceType={ResourceType.Subscriptions}
63+
sortDirection={Sort.Ascending}
64+
sortKey="name"
65+
sortType={SortTypes.String}
66+
onSelect={() => {}}
67+
/>
68+
</Page.ControlBarLeft>
69+
<Page.ControlBarRight>
70+
<Button
71+
text="Create Subscription"
72+
icon={IconFont.Plus_New}
73+
color={ComponentColor.Primary}
74+
onClick={() => {
75+
history.push(
76+
`/${ORGS}/${org.id}/load-data/${SUBSCRIPTIONS}/create`
77+
)
78+
}}
79+
status={ComponentStatus.Default}
80+
titleText=""
81+
testID="create-subscription-button--control-bar"
82+
/>
83+
</Page.ControlBarRight>
84+
</Page.ControlBar>
85+
{subscriptions && subscriptions.length ? (
86+
<SubscriptionsList subscriptions={subscriptions} />
87+
) : (
88+
<EmptySubscriptionState />
89+
)}
90+
</LoadDataTabbedPage>
91+
</SpinnerContainer>
8892
</Page>
8993
)
9094
}

‎src/writeData/subscriptions/context/api.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ export const updateAPI = async (subscription: typeof PutBrokerSubParams) => {
5656
}
5757

5858
export const deleteAPI = async (id: typeof DeleteBrokerSubParams) => {
59-
const res = await deleteBrokerSub(id)
59+
const res = await deleteBrokerSub({id})
6060
if (res.status != 204) {
6161
throw new Error(res.data.message)
6262
}

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

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,24 @@
22
import React, {FC, useCallback, useEffect, useState} from 'react'
33

44
// Utils
5-
import {getAllAPI} from 'src/writeData/subscriptions/context/api'
5+
import {deleteAPI, getAllAPI} from 'src/writeData/subscriptions/context/api'
66

77
// Types
88
import {Subscription} from 'src/types/subscriptions'
9+
import {RemoteDataState} from 'src/types'
910

1011
export interface SubscriptionListContextType {
1112
getAll: () => void
13+
deleteSubscription: (id: string) => void
1214
subscriptions: Subscription[]
15+
loading: RemoteDataState
1316
}
1417

1518
export const DEFAULT_CONTEXT: SubscriptionListContextType = {
1619
getAll: () => {},
20+
deleteSubscription: (_: string) => {},
1721
subscriptions: [],
22+
loading: RemoteDataState.NotStarted,
1823
} as SubscriptionListContextType
1924

2025
export const SubscriptionListContext = React.createContext<
@@ -23,12 +28,23 @@ export const SubscriptionListContext = React.createContext<
2328

2429
export const SubscriptionListProvider: FC = ({children}) => {
2530
const [subscriptions, setSubscriptions] = useState<Subscription[]>(null)
31+
const [loading, setLoading] = useState<RemoteDataState>(
32+
RemoteDataState.NotStarted
33+
)
2634
const getAll = useCallback(async (): Promise<void> => {
35+
setLoading(RemoteDataState.Loading)
2736
const data = await getAllAPI()
2837
if (Array.isArray(data)) {
2938
setSubscriptions(data)
3039
}
40+
setLoading(RemoteDataState.Done)
3141
}, [])
42+
const deleteSubscription = async (id: string): Promise<void> => {
43+
setLoading(RemoteDataState.Loading)
44+
await deleteAPI(id)
45+
setSubscriptions(subscriptions.filter(s => s.id !== id))
46+
setLoading(RemoteDataState.Done)
47+
}
3248
useEffect(() => {
3349
getAll()
3450
}, [])
@@ -37,6 +53,8 @@ export const SubscriptionListProvider: FC = ({children}) => {
3753
value={{
3854
getAll,
3955
subscriptions,
56+
deleteSubscription,
57+
loading,
4058
}}
4159
>
4260
{children}

0 commit comments

Comments
 (0)