Skip to content

Commit 5cfb8a3

Browse files
hoorayimhelpinghoorayimhelping
authored
feat(uiproxyd): connect the support request form to SFDC (#4692)
1 parent 59fe7c9 commit 5cfb8a3

File tree

5 files changed

+270
-182
lines changed

5 files changed

+270
-182
lines changed

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@
5252
"cy": "CYPRESS_dexUrl=https://$INGRESS_HOST:$PORT_HTTPS CYPRESS_baseUrl=http://localhost:9999 cypress open",
5353
"cy:dev": "source ../monitor-ci/.env && CYPRESS_dexUrl=CLOUD CYPRESS_baseUrl=https://$INGRESS_HOST:$PORT_HTTPS cypress open --config testFiles='{cloud,shared}/**/*.*'",
5454
"cy:dev-oss": "source ../monitor-ci/.env && CYPRESS_dexUrl=OSS CYPRESS_baseUrl=https://$INGRESS_HOST:$PORT_HTTPS cypress open --config testFiles='{oss,shared}/**/*.*'",
55-
"generate": "export SHA=870f6545652f86c675f9802d6f6f21bd3150fb0f && export REMOTE=https://raw.githubusercontent.com/influxdata/openapi/${SHA}/ && yarn generate-meta",
55+
"generate": "export SHA=7525c8c2c845ba783addc76041a134b80cc6c581 && export REMOTE=https://raw.githubusercontent.com/influxdata/openapi/${SHA}/ && yarn generate-meta",
5656
"generate-local": "export REMOTE=../openapi/ && yarn generate-meta",
5757
"generate-meta": "if [ -z \"${CLOUD_URL}\" ]; then yarn generate-meta-oss; else yarn generate-meta-cloud; fi",
5858
"generate-meta-oss": "yarn oss-api && yarn notebooks && yarn unity && yarn annotations-oss && yarn pinned && yarn mapsd-oss && yarn uiproxyd-oss && yarn cloudPriv && yarn fluxdocs && yarn subscriptions-oss",
@@ -70,7 +70,7 @@
7070
"mapsd-oss": "touch ./src/client/mapsdRoutes.ts",
7171
"mapsd": "oats ${REMOTE}contracts/mapsd.yml > ./src/client/mapsdRoutes.ts",
7272
"uiproxyd-oss": "touch ./src/client/uiproxydRoutes.ts",
73-
"uiproxyd": "oats ${REMOTE}contracts/uiproxyd.yml > ./src/client/uiproxydRoutes.ts",
73+
"uiproxyd": "oats ${REMOTE}contracts/priv/uiproxyd.yml > ./src/client/uiproxydRoutes.ts",
7474
"subscriptions": "oats ${REMOTE}contracts/priv/nifid.yml > ./src/client/subscriptionsRoutes.ts",
7575
"subscriptions-oss": "touch ./src/client/subscriptionsRoutes.ts",
7676
"pinned": "oats ${REMOTE}contracts/priv/pinneditemsd.yml > ./src/client/pinnedItemRoutes.ts",

‎src/pageLayout/containers/TreeNav.tsx‎

Lines changed: 181 additions & 161 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import OrgSettings from 'src/cloud/components/OrgSettings'
1313

1414
// Constants
1515
import {generateNavItems} from 'src/pageLayout/constants/navigationHierarchy'
16+
import {CLOUD} from 'src/shared/constants'
1617

1718
// Utils
1819
import {getNavItemActivation} from 'src/pageLayout/utils'
@@ -31,179 +32,198 @@ import './TreeNav.scss'
3132

3233
type ReduxProps = ConnectedProps<typeof connector>
3334

34-
const TreeSidebar: FC<ReduxProps & RouteComponentProps> = () =>
35-
// {
36-
// showOverlay,
37-
// dismissOverlay,
38-
// quartzMe,
39-
// }
40-
{
41-
const {presentationMode, navbarMode, setNavbarMode} = useContext(
42-
AppSettingContext
43-
)
44-
const org = useSelector(getOrg)
45-
const location = useLocation()
46-
useEffect(() => {
47-
if (isFlagEnabled('helpBar')) {
48-
const helpBarMenu = document.querySelectorAll<HTMLElement>(
49-
'.cf-tree-nav--sub-menu-trigger'
50-
)[3]
51-
if (!helpBarMenu) {
52-
return
53-
}
54-
if (navbarMode === 'expanded') {
55-
helpBarMenu.style.display = 'block'
56-
helpBarMenu.style.width = '243px'
57-
} else {
58-
helpBarMenu.style.width = '44px'
59-
}
35+
const TreeSidebar: FC<ReduxProps & RouteComponentProps> = ({
36+
showOverlay,
37+
dismissOverlay,
38+
quartzMe,
39+
}) => {
40+
const {presentationMode, navbarMode, setNavbarMode} = useContext(
41+
AppSettingContext
42+
)
43+
const org = useSelector(getOrg)
44+
const location = useLocation()
45+
useEffect(() => {
46+
if (isFlagEnabled('helpBar')) {
47+
const helpBarMenu = document.querySelectorAll<HTMLElement>(
48+
'.cf-tree-nav--sub-menu-trigger'
49+
)[3]
50+
if (!helpBarMenu) {
51+
return
6052
}
61-
}, [navbarMode])
62-
63-
if (presentationMode || !org) {
64-
return null
65-
}
66-
67-
const handleToggleNavExpansion = (): void => {
6853
if (navbarMode === 'expanded') {
69-
setNavbarMode('collapsed')
54+
helpBarMenu.style.display = 'block'
55+
helpBarMenu.style.width = '243px'
7056
} else {
71-
setNavbarMode('expanded')
57+
helpBarMenu.style.width = '44px'
7258
}
7359
}
60+
}, [navbarMode])
7461

75-
const handleEventing = (link: string): void => {
76-
const currentPage = location.pathname
77-
event(`helpBar.${link}.opened`, {}, {from: currentPage})
62+
if (presentationMode || !org) {
63+
return null
64+
}
65+
66+
const handleToggleNavExpansion = (): void => {
67+
if (navbarMode === 'expanded') {
68+
setNavbarMode('collapsed')
69+
} else {
70+
setNavbarMode('expanded')
7871
}
72+
}
7973

80-
return (
81-
<OrgSettings>
82-
<TreeNav
83-
expanded={navbarMode === 'expanded'}
84-
headerElement={<NavHeader link={`/orgs/${org.id}`} />}
85-
userElement={<UserWidget />}
86-
onToggleClick={handleToggleNavExpansion}
87-
>
88-
{generateNavItems().map((item: NavItem) => {
89-
const linkElement = (className: string): JSX.Element => (
90-
<Link
91-
to={item.link}
92-
className={className}
93-
title={item.label}
94-
onClick={() => {
95-
event('nav clicked', {which: item.id})
96-
}}
97-
/>
98-
)
99-
return (
100-
<TreeNav.Item
101-
key={item.id}
102-
id={item.id}
103-
testID={item.testID}
104-
icon={<Icon glyph={item.icon} />}
105-
label={item.label}
106-
shortLabel={item.shortLabel}
107-
active={getNavItemActivation(
108-
item.activeKeywords,
109-
location.pathname
110-
)}
111-
linkElement={linkElement}
112-
>
113-
{Boolean(item.menu) && (
114-
<TreeNav.SubMenu>
115-
{item.menu.map((menuItem: NavSubItem) => {
116-
const linkElement = (className: string): JSX.Element => (
117-
<Link
118-
to={menuItem.link}
119-
className={className}
120-
onClick={() => {
121-
event('nav clicked', {
122-
which: `${item.id} - ${menuItem.id}`,
123-
})
124-
}}
125-
/>
126-
)
127-
128-
return (
129-
<TreeNav.SubItem
130-
key={menuItem.id}
131-
id={menuItem.id}
132-
testID={menuItem.testID}
133-
active={getNavItemActivation(
134-
[menuItem.id],
135-
location.pathname
136-
)}
137-
label={menuItem.label}
138-
linkElement={linkElement}
139-
/>
140-
)
141-
})}
142-
</TreeNav.SubMenu>
143-
)}
144-
</TreeNav.Item>
145-
)
146-
})}
147-
{isFlagEnabled('helpBar') ? (
74+
const handleEventing = (link: string): void => {
75+
const currentPage = location.pathname
76+
event(`helpBar.${link}.opened`, {}, {from: currentPage})
77+
}
78+
79+
const handleSelect = (): void => {
80+
const accountType = quartzMe?.accountType ?? 'free'
81+
const isPayGCustomer = accountType !== 'free'
82+
83+
if (isPayGCustomer) {
84+
showOverlay('payg-support', null, dismissOverlay)
85+
event('helpBar.paygSupportRequest.overlay.shown')
86+
} else {
87+
showOverlay('free-account-support', null, dismissOverlay)
88+
}
89+
}
90+
91+
return (
92+
<OrgSettings>
93+
<TreeNav
94+
expanded={navbarMode === 'expanded'}
95+
headerElement={<NavHeader link={`/orgs/${org.id}`} />}
96+
userElement={<UserWidget />}
97+
onToggleClick={handleToggleNavExpansion}
98+
>
99+
{generateNavItems().map((item: NavItem) => {
100+
const linkElement = (className: string): JSX.Element => (
101+
<Link
102+
to={item.link}
103+
className={className}
104+
title={item.label}
105+
onClick={() => {
106+
event('nav clicked', {which: item.id})
107+
}}
108+
/>
109+
)
110+
return (
148111
<TreeNav.Item
149-
id="support"
150-
testID="nav-item-support"
151-
icon={<Icon glyph={IconFont.QuestionMark_New} />}
152-
label="Help & Support"
153-
shortLabel="Support"
154-
className="helpBarStyle"
112+
key={item.id}
113+
id={item.id}
114+
testID={item.testID}
115+
icon={<Icon glyph={item.icon} />}
116+
label={item.label}
117+
shortLabel={item.shortLabel}
118+
active={getNavItemActivation(
119+
item.activeKeywords,
120+
location.pathname
121+
)}
122+
linkElement={linkElement}
155123
>
156-
<TreeNav.SubMenu position={PopoverPosition.ToTheRight}>
157-
<TreeNav.SubHeading label="Support" />
158-
<TreeNav.SubItem
159-
id="documentation"
160-
label="Documentation"
161-
testID="nav-subitem-documentation"
162-
linkElement={() => (
163-
<SafeBlankLink
164-
href="https://docs.influxdata.com/"
165-
onClick={() => handleEventing('documentation')}
166-
/>
167-
)}
168-
/>
169-
<TreeNav.SubItem
170-
id="faqs"
171-
label="FAQs"
172-
testID="nav-subitem-faqs"
173-
linkElement={() => (
174-
<SafeBlankLink
175-
href="https://docs.influxdata.com/influxdb/cloud/reference/faq/"
176-
onClick={() => handleEventing('faq')}
177-
/>
178-
)}
179-
/>
180-
<TreeNav.SubHeading label="Community" />
181-
<TreeNav.SubItem
182-
id="offcialForum"
183-
label="Official Forum"
184-
testID="nav-subitem-forum"
185-
linkElement={() => (
186-
<SafeBlankLink
187-
href="https://community.influxdata.com"
188-
onClick={() => handleEventing('officialForum')}
189-
/>
190-
)}
191-
/>
124+
{Boolean(item.menu) && (
125+
<TreeNav.SubMenu>
126+
{item.menu.map((menuItem: NavSubItem) => {
127+
const linkElement = (className: string): JSX.Element => (
128+
<Link
129+
to={menuItem.link}
130+
className={className}
131+
onClick={() => {
132+
event('nav clicked', {
133+
which: `${item.id} - ${menuItem.id}`,
134+
})
135+
}}
136+
/>
137+
)
138+
139+
return (
140+
<TreeNav.SubItem
141+
key={menuItem.id}
142+
id={menuItem.id}
143+
testID={menuItem.testID}
144+
active={getNavItemActivation(
145+
[menuItem.id],
146+
location.pathname
147+
)}
148+
label={menuItem.label}
149+
linkElement={linkElement}
150+
/>
151+
)
152+
})}
153+
</TreeNav.SubMenu>
154+
)}
155+
</TreeNav.Item>
156+
)
157+
})}
158+
{CLOUD && isFlagEnabled('helpBar') && (
159+
<TreeNav.Item
160+
id="support"
161+
testID="nav-item-support"
162+
icon={<Icon glyph={IconFont.QuestionMark_New} />}
163+
label="Help &amp; Support"
164+
shortLabel="Support"
165+
className="helpBarStyle"
166+
>
167+
<TreeNav.SubMenu position={PopoverPosition.ToTheRight}>
168+
<TreeNav.SubHeading label="Support" />
169+
<TreeNav.SubItem
170+
id="documentation"
171+
label="Documentation"
172+
testID="nav-subitem-documentation"
173+
linkElement={() => (
174+
<SafeBlankLink
175+
href="https://docs.influxdata.com/"
176+
onClick={() => handleEventing('documentation')}
177+
/>
178+
)}
179+
/>
180+
<TreeNav.SubItem
181+
id="faqs"
182+
label="FAQs"
183+
testID="nav-subitem-faqs"
184+
linkElement={() => (
185+
<SafeBlankLink
186+
href="https://docs.influxdata.com/influxdb/cloud/reference/faq/"
187+
onClick={() => handleEventing('faq')}
188+
/>
189+
)}
190+
/>
191+
192+
{isFlagEnabled('helpBarSfdcIntegration') && (
192193
<TreeNav.SubItem
193-
id="influxdbSlack"
194-
label="InfluxDB Slack"
195-
testID="nav-subitem-influxdb-slack"
196-
linkElement={() => (
197-
<SafeBlankLink href="https://influxcommunity.slack.com/join/shared_invite/zt-156zm7ult-LcIW2T4TwLYeS8rZbCP1mw#/shared-invite/email" />
198-
)}
194+
id="contactSupport"
195+
label="Contact Support"
196+
testID="nav-subitem-contact-support"
197+
onClick={handleSelect}
199198
/>
200-
</TreeNav.SubMenu>
201-
</TreeNav.Item>
202-
) : null}
203-
</TreeNav>
204-
</OrgSettings>
205-
)
206-
}
199+
)}
200+
<TreeNav.SubHeading label="Community" />
201+
<TreeNav.SubItem
202+
id="offcialForum"
203+
label="Official Forum"
204+
testID="nav-subitem-forum"
205+
linkElement={() => (
206+
<SafeBlankLink
207+
href="https://community.influxdata.com"
208+
onClick={() => handleEventing('officialForum')}
209+
/>
210+
)}
211+
/>
212+
<TreeNav.SubItem
213+
id="influxdbSlack"
214+
label="InfluxDB Slack"
215+
testID="nav-subitem-influxdb-slack"
216+
linkElement={() => (
217+
<SafeBlankLink href="https://influxcommunity.slack.com/join/shared_invite/zt-156zm7ult-LcIW2T4TwLYeS8rZbCP1mw#/shared-invite/email" />
218+
)}
219+
/>
220+
</TreeNav.SubMenu>
221+
</TreeNav.Item>
222+
)}
223+
</TreeNav>
224+
</OrgSettings>
225+
)
226+
}
207227

208228
const mstp = (state: AppState) => {
209229
return {quartzMe: state.me.quartzMe}

0 commit comments

Comments
 (0)