Skip to content

Add feedbackLink to experiment #32

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
EdmondChuiHW wants to merge 4 commits into from
Closed

Add feedbackLink to experiment #32

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1ebe8d0
dynamic doc link
EdmondChuiHW Mar 25, 2024
d3ac1b4
format
EdmondChuiHW Mar 25, 2024
e0ceaee
spelling
EdmondChuiHW Mar 25, 2024
c8c69e7
add feedback link support
EdmondChuiHW Mar 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 5 additions & 3 deletions front_end/entrypoints/rn_inspector/rn_inspector.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,9 +34,11 @@ Root.Runtime.experiments.register(
);

Root.Runtime.experiments.register(
Root.Runtime.ExperimentName.REACT_NATIVE_SPECIFIC_UI,
'Show React Native-specific UI',
/* unstable */ false,
Root.Runtime.ExperimentName.REACT_NATIVE_SPECIFIC_UI,
'Show React Native-specific UI',
/* unstable */ false,
/* docLink */ globalThis.reactNativeDocLink ?? 'https://reactnative.dev/docs/debugging',
/* feedbackLink */ globalThis.reactNativeFeedbackLink,
);

Root.Runtime.experiments.register(
Expand Down
2 changes: 2 additions & 0 deletions front_end/global_typings/react_native.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,5 +9,7 @@ declare global {
namespace globalThis {
var enableReactNativePerfMetrics: boolean|undefined;
var enableReactNativePerfMetricsGlobalPostMessage: boolean|undefined;
var reactNativeDocLink: string|undefined;
var reactNativeFeedbackLink: string|undefined;
}
}
43 changes: 33 additions & 10 deletions front_end/panels/rn_welcome/RNWelcome.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,12 @@
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

import * as UI from '../../ui/legacy/legacy.js';
import * as i18n from '../../core/i18n/i18n.js';
import * as Root from '../../core/root/root.js';
import * as UI from '../../ui/legacy/legacy.js';
import * as LitHtml from '../../ui/lit-html/lit-html.js';

import rnWelcomeStyles from './rnWelcome.css.js';
import * as LitHtml from '../../ui/lit-html/lit-html.js';

const UIStrings = {
/** @description The name of the debugging product */
Expand All @@ -19,7 +20,9 @@ const UIStrings = {
/** @description "Debugging docs" link */
docsLabel: 'Debugging docs',
/** @description "What's new" link */
whatsNewLabel: "What's new",
whatsNewLabel: 'What\'s new',
/** @description "Send feedback" link */
feedbackLabel: 'Send feedback',
};
const {render, html} = LitHtml;

Expand Down Expand Up @@ -49,11 +52,11 @@ export class RNWelcomeImpl extends UI.Widget.VBox {
}

render(): void {
const welcomeIconUrl = new URL(
"../../Images/react_native/welcomeIcon.png",
import.meta.url,
).toString();
render(html`
const welcomeIconUrl = new URL('../../Images/react_native/welcomeIcon.png', import.meta.url).toString();
const feedbackLink = this.getFeedbackLink();

render(
html`
<div class="rn-welcome-panel">
<div class="rn-welcome-header">
<img class="rn-welcome-icon" src=${welcomeIconUrl} role="presentation" />
Expand All @@ -68,14 +71,34 @@ export class RNWelcomeImpl extends UI.Widget.VBox {
${i18nString(UIStrings.welcomeMessage)}
</div>
<div class="rn-welcome-links">
<x-link class="devtools-link" href="https://reactnative.dev/docs/debugging">
<x-link class="devtools-link" href=${this.getDocLink()}>
${i18nString(UIStrings.docsLabel)}
</x-link>
<x-link class="devtools-link" href="https://reactnative.dev/blog">
${i18nString(UIStrings.whatsNewLabel)}
</x-link>
${!feedbackLink ? LitHtml.nothing : html`
<x-link class="devtools-link" href=${feedbackLink}>
${i18nString(UIStrings.feedbackLabel)}
</x-link>
`}
</div>
</div>
`, this.contentElement, {host: this});
`,
this.contentElement, {host: this});
}

private getDocLink(): string {
const experimentDocLink = Root.Runtime.experiments.enabledExperiments()
.find(e => e.name === Root.Runtime.ExperimentName.REACT_NATIVE_SPECIFIC_UI)
?.docLink;

return experimentDocLink ?? 'https://reactnative.dev/docs/debugging';
}

private getFeedbackLink(): string|undefined {
return Root.Runtime.experiments.enabledExperiments()
.find(e => e.name === Root.Runtime.ExperimentName.REACT_NATIVE_SPECIFIC_UI)
?.feedbackLink;
}
}