@launchdarkly/toolbar 0.25.0 → 0.26.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/js/index.js +220 -102
- package/dist/ui/Toolbar/TabContent/FlagDevServerTabContent.d.ts +5 -1
- package/dist/ui/Toolbar/TabContent/FlagSdkOverrideTabContent.d.ts +1 -0
- package/dist/ui/Toolbar/TabContent/SettingsTab.css.d.ts +1 -0
- package/dist/ui/Toolbar/TabContent/SettingsTabContent.d.ts +4 -2
- package/dist/ui/Toolbar/components/ExpandedToolbarContent.d.ts +4 -2
- package/dist/ui/Toolbar/components/TabContentRenderer.d.ts +4 -2
- package/dist/ui/Toolbar/hooks/useToolbarState.d.ts +4 -2
- package/dist/ui/Toolbar/utils/localStorage.d.ts +6 -3
- package/dist/utils/analytics.d.ts +7 -3
- package/package.json +4 -4
package/dist/js/index.js
CHANGED
|
@@ -753,7 +753,7 @@ var __webpack_modules__ = {
|
|
|
753
753
|
]);
|
|
754
754
|
const __WEBPACK_DEFAULT_EXPORT__ = ___CSS_LOADER_EXPORT___;
|
|
755
755
|
},
|
|
756
|
-
"../../node_modules/.pnpm/@rsbuild+core@1.5.17/node_modules/@rsbuild/core/compiled/css-loader/index.js??ruleSet[1].rules[2].use[1]!builtin:lightningcss-loader??ruleSet[1].rules[2].use[2]!../../node_modules/.pnpm/@vanilla-extract+webpack-plugin@2.3.22_webpack@5.102.1/node_modules/@vanilla-extract/webpack-plugin/virtualFileLoader/dist/vanilla-extract-webpack-plugin-virtualFileLoader.cjs.js?{\"fileName\":\"src/ui/Toolbar/TabContent/SettingsTab.css.ts.vanilla.css\",\"source\":\"#
|
|
756
|
+
"../../node_modules/.pnpm/@rsbuild+core@1.5.17/node_modules/@rsbuild/core/compiled/css-loader/index.js??ruleSet[1].rules[2].use[1]!builtin:lightningcss-loader??ruleSet[1].rules[2].use[2]!../../node_modules/.pnpm/@vanilla-extract+webpack-plugin@2.3.22_webpack@5.102.1/node_modules/@vanilla-extract/webpack-plugin/virtualFileLoader/dist/vanilla-extract-webpack-plugin-virtualFileLoader.cjs.js?{\"fileName\":\"src/ui/Toolbar/TabContent/SettingsTab.css.ts.vanilla.css\",\"source\":\"#H4sIAAAAAAAAA6VUy3LjIBC8+yvmuDngkhzH6+DjfkgKi5E0GwQUjC15t/LvW+BHZFtJqrInlRrobnqYmb+UZc027gv4OwPYuqAxiK1jdp2E0g8QnSENexV+CGG8qJxxQTRBHcS6KB42s7fZ/MIhjYosqpaMnqKzzuLVgTLv6lRoyEooNjMAr7Qm20goV36AReEHWPshrdTOsoj0ByWUixHUIzUtS1gVmSAblJOGl9kwAOPAgoOysXahk7DzHkOlIqZFg8wYRPSqyj6K+VMSG7leZNcTdraqem2C21ktPnHxfBvb45HP4CChTDyaojfqIDOWAGWosYIYuyihQssYEvx7F5nqg6icZbQsIZlGsUXuEW3a0Sh/tjcSXGbBO5X0FZoCVkzOypTkrnunuWV5uothOVGV5ZdVWdzmsfoo3y9JprRHxD+/QbwcE9eqI3MYbRyhonPW5QJc32Y9HfYHJc1Jnx78XXlzgdDqK/7nb1zq8X8vpbJoT5rbY6cmtvYU+/m/JmMkVLsQ0PKvpH55ZbENZF9zy49Yt8ehcekiCblJvUoE6WxHVpxF02jImBrO2KI4YZ9oVFnD7THUxvUSWtL62Ct5KrwvoDHkI8W01LfEmEcCpinWB+U345Z9+wfpKTN+RwUAAA==\"}!../../node_modules/.pnpm/@vanilla-extract+webpack-plugin@2.3.22_webpack@5.102.1/node_modules/@vanilla-extract/webpack-plugin/extracted.js": function(module, __webpack_exports__, __webpack_require__) {
|
|
757
757
|
__webpack_require__.d(__webpack_exports__, {
|
|
758
758
|
A: ()=>__WEBPACK_DEFAULT_EXPORT__
|
|
759
759
|
});
|
|
@@ -808,39 +808,45 @@ var __webpack_modules__ = {
|
|
|
808
808
|
}
|
|
809
809
|
|
|
810
810
|
._11ftnsv6 {
|
|
811
|
+
color: var(--lp-color-gray-200);
|
|
812
|
+
font-size: 12px;
|
|
813
|
+
font-weight: 400;
|
|
814
|
+
}
|
|
815
|
+
|
|
816
|
+
._11ftnsv7 {
|
|
811
817
|
color: var(--lp-color-gray-400);
|
|
812
818
|
font-size: 12px;
|
|
813
819
|
font-family: var(--lp-font-family-monospace);
|
|
814
820
|
}
|
|
815
821
|
|
|
816
|
-
.
|
|
822
|
+
._11ftnsv8 {
|
|
817
823
|
justify-content: flex-end;
|
|
818
824
|
align-items: center;
|
|
819
825
|
gap: 8px;
|
|
820
826
|
display: flex;
|
|
821
827
|
}
|
|
822
828
|
|
|
823
|
-
.
|
|
829
|
+
._11ftnsv9 {
|
|
824
830
|
color: var(--lp-color-gray-300);
|
|
825
831
|
font-size: 12px;
|
|
826
832
|
font-family: var(--lp-font-family-monospace);
|
|
827
833
|
}
|
|
828
834
|
|
|
829
|
-
.
|
|
835
|
+
._11ftnsva {
|
|
830
836
|
fill: currentColor;
|
|
831
837
|
flex-shrink: 0;
|
|
832
838
|
width: 16px;
|
|
833
839
|
height: 16px;
|
|
834
840
|
}
|
|
835
841
|
|
|
836
|
-
.
|
|
842
|
+
._11ftnsvb {
|
|
837
843
|
background: none;
|
|
838
844
|
flex-shrink: 0;
|
|
839
845
|
min-width: 120px;
|
|
840
846
|
max-width: 200px;
|
|
841
847
|
}
|
|
842
848
|
|
|
843
|
-
.
|
|
849
|
+
._11ftnsvc {
|
|
844
850
|
text-overflow: ellipsis;
|
|
845
851
|
white-space: nowrap;
|
|
846
852
|
flex: 1;
|
|
@@ -3230,14 +3236,15 @@ const ANALYTICS_EVENT_PREFIX = 'ld.toolbar';
|
|
|
3230
3236
|
const EVENTS = {
|
|
3231
3237
|
INITIALIZED: 'initialized',
|
|
3232
3238
|
POSITION_CHANGED: 'position.changed',
|
|
3233
|
-
|
|
3239
|
+
AUTO_COLLAPSE_TOGGLED: 'auto.collapse.toggled',
|
|
3234
3240
|
TAB_CHANGED: 'tab.changed',
|
|
3235
3241
|
SEARCH: 'search',
|
|
3236
3242
|
TOGGLE: 'toggle',
|
|
3237
3243
|
TOGGLE_FLAG: 'toggle.flag',
|
|
3238
3244
|
OPEN_FLAG_DEEPLINK: 'open.flag.deeplink',
|
|
3239
3245
|
SHOW_OVERRIDES_ONLY: 'show.overrides.only',
|
|
3240
|
-
EVENT_CLICK: 'event.click'
|
|
3246
|
+
EVENT_CLICK: 'event.click',
|
|
3247
|
+
RELOAD_ON_FLAG_CHANGE_TOGGLE: 'reload.on.flag.change.toggle'
|
|
3241
3248
|
};
|
|
3242
3249
|
class ToolbarAnalytics {
|
|
3243
3250
|
ldClient = null;
|
|
@@ -3265,8 +3272,8 @@ class ToolbarAnalytics {
|
|
|
3265
3272
|
source
|
|
3266
3273
|
});
|
|
3267
3274
|
}
|
|
3268
|
-
|
|
3269
|
-
this.track(EVENTS.
|
|
3275
|
+
trackAutoCollapseToggle(action) {
|
|
3276
|
+
this.track(EVENTS.AUTO_COLLAPSE_TOGGLED, {
|
|
3270
3277
|
action
|
|
3271
3278
|
});
|
|
3272
3279
|
}
|
|
@@ -3315,6 +3322,11 @@ class ToolbarAnalytics {
|
|
|
3315
3322
|
eventName
|
|
3316
3323
|
});
|
|
3317
3324
|
}
|
|
3325
|
+
trackReloadOnFlagChangeToggle(enabled) {
|
|
3326
|
+
this.track(EVENTS.RELOAD_ON_FLAG_CHANGE_TOGGLE, {
|
|
3327
|
+
enabled
|
|
3328
|
+
});
|
|
3329
|
+
}
|
|
3318
3330
|
}
|
|
3319
3331
|
const AnalyticsContext = /*#__PURE__*/ createContext(null);
|
|
3320
3332
|
function AnalyticsProvider({ children, ldClient }) {
|
|
@@ -3825,10 +3837,12 @@ function CancelCircleIcon({ className }) {
|
|
|
3825
3837
|
return /*#__PURE__*/ jsx("svg", {
|
|
3826
3838
|
className: `${Icon_css_icon} ${className}`,
|
|
3827
3839
|
fill: "currentColor",
|
|
3828
|
-
viewBox: "0 0
|
|
3840
|
+
viewBox: "0 0 20 20",
|
|
3829
3841
|
xmlns: "http://www.w3.org/2000/svg",
|
|
3830
3842
|
children: /*#__PURE__*/ jsx("path", {
|
|
3831
|
-
|
|
3843
|
+
fillRule: "evenodd",
|
|
3844
|
+
d: "M10 1.75a8.25 8.25 0 1 0 0 16.5 8.25 8.25 0 0 0 0-16.5M6.97 6.97a.75.75 0 0 1 1.06 0L10 8.94l1.97-1.97a.75.75 0 1 1 1.06 1.06L11.062 10l1.97 1.97a.75.75 0 0 1-1.06 1.06L10 11.06l-1.97 1.97a.75.75 0 1 1-1.06-1.06L8.94 10 6.97 8.03a.75.75 0 0 1 0-1.06",
|
|
3845
|
+
clipRule: "evenodd"
|
|
3832
3846
|
})
|
|
3833
3847
|
});
|
|
3834
3848
|
}
|
|
@@ -3894,10 +3908,12 @@ function SearchIcon({ className }) {
|
|
|
3894
3908
|
return /*#__PURE__*/ jsx("svg", {
|
|
3895
3909
|
className: `${Icon_css_icon} ${className}`,
|
|
3896
3910
|
fill: "currentColor",
|
|
3897
|
-
viewBox: "0 0
|
|
3911
|
+
viewBox: "0 0 20 20",
|
|
3898
3912
|
xmlns: "http://www.w3.org/2000/svg",
|
|
3899
3913
|
children: /*#__PURE__*/ jsx("path", {
|
|
3900
|
-
|
|
3914
|
+
fillRule: "evenodd",
|
|
3915
|
+
d: "M5.814 2.251a6.583 6.583 0 0 1 7.675 10.177l4.542 4.542a.75.75 0 1 1-1.06 1.06l-4.543-4.542a6.58 6.58 0 0 1-8.75-.5A6.585 6.585 0 0 1 5.815 2.252m2.52.999a5.083 5.083 0 1 0 0 10.166 5.083 5.083 0 0 0 0-10.166",
|
|
3916
|
+
clipRule: "evenodd"
|
|
3901
3917
|
})
|
|
3902
3918
|
});
|
|
3903
3919
|
}
|
|
@@ -3905,10 +3921,12 @@ function SyncIcon({ className }) {
|
|
|
3905
3921
|
return /*#__PURE__*/ jsx("svg", {
|
|
3906
3922
|
className: `${Icon_css_icon} ${className}`,
|
|
3907
3923
|
fill: "currentColor",
|
|
3908
|
-
viewBox: "0 0
|
|
3924
|
+
viewBox: "0 0 20 20",
|
|
3909
3925
|
xmlns: "http://www.w3.org/2000/svg",
|
|
3910
3926
|
children: /*#__PURE__*/ jsx("path", {
|
|
3911
|
-
|
|
3927
|
+
fillRule: "evenodd",
|
|
3928
|
+
d: "M6.229 3.602a7.5 7.5 0 0 1 11.18 5.461.75.75 0 0 1-1.485.207A6 6 0 0 0 5 6.75h1.666a.75.75 0 1 1 0 1.5H3.333a.75.75 0 0 1-.75-.75V4.167a.75.75 0 1 1 1.5 0v1.295a7.5 7.5 0 0 1 2.146-1.86m-3 6.488a.75.75 0 0 1 .847.64 6 6 0 0 0 10.923 2.52h-1.666a.75.75 0 0 1 0-1.5h3.334a.75.75 0 0 1 .75.75v3.333a.75.75 0 0 1-1.5 0v-1.295a7.498 7.498 0 0 1-11.175.695 7.5 7.5 0 0 1-2.152-4.296.75.75 0 0 1 .64-.847",
|
|
3929
|
+
clipRule: "evenodd"
|
|
3912
3930
|
})
|
|
3913
3931
|
});
|
|
3914
3932
|
}
|
|
@@ -3983,7 +4001,8 @@ const TOOLBAR_STORAGE_KEYS = {
|
|
|
3983
4001
|
};
|
|
3984
4002
|
const DEFAULT_SETTINGS = {
|
|
3985
4003
|
position: 'bottom-right',
|
|
3986
|
-
|
|
4004
|
+
reloadOnFlagChange: false,
|
|
4005
|
+
autoCollapse: false
|
|
3987
4006
|
};
|
|
3988
4007
|
function updateSetting(key, value) {
|
|
3989
4008
|
try {
|
|
@@ -4014,20 +4033,34 @@ function loadToolbarPosition() {
|
|
|
4014
4033
|
return null;
|
|
4015
4034
|
}
|
|
4016
4035
|
}
|
|
4017
|
-
function
|
|
4018
|
-
updateSetting('
|
|
4036
|
+
function saveToolbarAutoCollapse(autoCollapse) {
|
|
4037
|
+
updateSetting('autoCollapse', autoCollapse);
|
|
4019
4038
|
}
|
|
4020
|
-
function
|
|
4039
|
+
function loadToolbarAutoCollapse() {
|
|
4021
4040
|
try {
|
|
4022
4041
|
const stored = localStorage.getItem(TOOLBAR_STORAGE_KEYS.SETTINGS);
|
|
4023
|
-
if (!stored) return DEFAULT_SETTINGS.
|
|
4042
|
+
if (!stored) return DEFAULT_SETTINGS.autoCollapse;
|
|
4024
4043
|
const parsed = JSON.parse(stored);
|
|
4025
|
-
return 'boolean' == typeof parsed.
|
|
4044
|
+
return 'boolean' == typeof parsed.autoCollapse ? parsed.autoCollapse : DEFAULT_SETTINGS.autoCollapse;
|
|
4026
4045
|
} catch (error) {
|
|
4027
|
-
console.warn('Failed to load toolbar
|
|
4046
|
+
console.warn('Failed to load toolbar auto-collapse state from localStorage:', error);
|
|
4028
4047
|
return false;
|
|
4029
4048
|
}
|
|
4030
4049
|
}
|
|
4050
|
+
function saveReloadOnFlagChange(isReloadOnFlagChange) {
|
|
4051
|
+
updateSetting('reloadOnFlagChange', isReloadOnFlagChange);
|
|
4052
|
+
}
|
|
4053
|
+
function loadReloadOnFlagChange() {
|
|
4054
|
+
try {
|
|
4055
|
+
const stored = localStorage.getItem(TOOLBAR_STORAGE_KEYS.SETTINGS);
|
|
4056
|
+
if (!stored) return DEFAULT_SETTINGS.reloadOnFlagChange;
|
|
4057
|
+
const parsed = JSON.parse(stored);
|
|
4058
|
+
return 'boolean' == typeof parsed.reloadOnFlagChange ? parsed.reloadOnFlagChange : DEFAULT_SETTINGS.reloadOnFlagChange;
|
|
4059
|
+
} catch (error) {
|
|
4060
|
+
console.warn('Failed to load reload on flag change from localStorage:', error);
|
|
4061
|
+
return DEFAULT_SETTINGS.reloadOnFlagChange;
|
|
4062
|
+
}
|
|
4063
|
+
}
|
|
4031
4064
|
const ToolbarUIContext = /*#__PURE__*/ createContext(null);
|
|
4032
4065
|
const useToolbarUIContext = ()=>{
|
|
4033
4066
|
const context = useContext(ToolbarUIContext);
|
|
@@ -5249,10 +5282,12 @@ function EditIcon({ className }) {
|
|
|
5249
5282
|
return /*#__PURE__*/ jsx("svg", {
|
|
5250
5283
|
className: `${Icon_css_icon} ${className}`,
|
|
5251
5284
|
fill: "currentColor",
|
|
5252
|
-
viewBox: "0 0
|
|
5285
|
+
viewBox: "0 0 20 20",
|
|
5253
5286
|
xmlns: "http://www.w3.org/2000/svg",
|
|
5254
5287
|
children: /*#__PURE__*/ jsx("path", {
|
|
5255
|
-
|
|
5288
|
+
fillRule: "evenodd",
|
|
5289
|
+
d: "M12.848 3.107a3.107 3.107 0 0 1 3.386 5.067l-8.75 8.75a.75.75 0 0 1-.53.22H3.62a.75.75 0 0 1-.75-.75V13.06a.75.75 0 0 1 .22-.53L11 4.618l.01-.01.829-.828a3.1 3.1 0 0 1 1.008-.673m-1.311 3.097L4.37 13.371v2.273h2.273l7.167-7.167z",
|
|
5290
|
+
clipRule: "evenodd"
|
|
5256
5291
|
})
|
|
5257
5292
|
});
|
|
5258
5293
|
}
|
|
@@ -5260,10 +5295,12 @@ function CheckIcon({ className }) {
|
|
|
5260
5295
|
return /*#__PURE__*/ jsx("svg", {
|
|
5261
5296
|
className: `${Icon_css_icon} ${className}`,
|
|
5262
5297
|
fill: "currentColor",
|
|
5263
|
-
viewBox: "0 0
|
|
5298
|
+
viewBox: "0 0 20 20",
|
|
5264
5299
|
xmlns: "http://www.w3.org/2000/svg",
|
|
5265
5300
|
children: /*#__PURE__*/ jsx("path", {
|
|
5266
|
-
|
|
5301
|
+
fillRule: "evenodd",
|
|
5302
|
+
d: "M17.197 5.303a.75.75 0 0 1 0 1.06l-8.333 8.334a.75.75 0 0 1-1.06 0L3.635 10.53a.75.75 0 1 1 1.061-1.06l3.636 3.636 7.803-7.803a.75.75 0 0 1 1.061 0",
|
|
5303
|
+
clipRule: "evenodd"
|
|
5267
5304
|
})
|
|
5268
5305
|
});
|
|
5269
5306
|
}
|
|
@@ -5275,7 +5312,7 @@ function XIcon({ className }) {
|
|
|
5275
5312
|
xmlns: "http://www.w3.org/2000/svg",
|
|
5276
5313
|
children: /*#__PURE__*/ jsx("path", {
|
|
5277
5314
|
fillRule: "evenodd",
|
|
5278
|
-
d: "M4.47 4.47a.75.75 0 0 1 1.06 0L10 8.94l4.47-4.47a.75.75 0 1 1 1.06 1.06L11.062 10l4.47 4.47a.75.75 0 0 1-1.06 1.06L10 11.06l-4.47 4.47a.75.75 0 1 1-1.06-1.06L8.94 10 4.47 5.53a.75.75 0 0 1 0-1.
|
|
5315
|
+
d: "M4.47 4.47a.75.75 0 0 1 1.06 0L10 8.94l4.47-4.47a.75.75 0 1 1 1.06 1.06L11.062 10l4.47 4.47a.75.75 0 0 1-1.06 1.06L10 11.06l-4.47 4.47a.75.75 0 1 1-1.06-1.06L8.94 10 4.47 5.53a.75.75 0 0 1 0-1.06",
|
|
5279
5316
|
clipRule: "evenodd"
|
|
5280
5317
|
})
|
|
5281
5318
|
});
|
|
@@ -5564,7 +5601,8 @@ var virtualInner = 'ul8pbu6';
|
|
|
5564
5601
|
var FlagDevServerTabContent_css_virtualItem = 'ul8pbu7';
|
|
5565
5602
|
var flagListItem = 'ul8pbu8';
|
|
5566
5603
|
var flagNameText = 'ul8pbu1';
|
|
5567
|
-
function FlagDevServerTabContent() {
|
|
5604
|
+
function FlagDevServerTabContent(props) {
|
|
5605
|
+
const { reloadOnFlagChangeIsEnabled } = props;
|
|
5568
5606
|
const { searchTerm } = useSearchContext();
|
|
5569
5607
|
const { state, setOverride, clearOverride, clearAllOverrides } = useDevServerContext();
|
|
5570
5608
|
const { flags } = state;
|
|
@@ -5586,7 +5624,10 @@ function FlagDevServerTabContent() {
|
|
|
5586
5624
|
flags
|
|
5587
5625
|
]);
|
|
5588
5626
|
const renderFlagControl = (flag)=>{
|
|
5589
|
-
const handleOverride = (value)=>
|
|
5627
|
+
const handleOverride = (value)=>{
|
|
5628
|
+
setOverride(flag.key, value);
|
|
5629
|
+
if (reloadOnFlagChangeIsEnabled) window.location.reload();
|
|
5630
|
+
};
|
|
5590
5631
|
switch(flag.type){
|
|
5591
5632
|
case 'boolean':
|
|
5592
5633
|
return /*#__PURE__*/ jsx(BooleanFlagControl, {
|
|
@@ -5616,17 +5657,21 @@ function FlagDevServerTabContent() {
|
|
|
5616
5657
|
});
|
|
5617
5658
|
}
|
|
5618
5659
|
};
|
|
5619
|
-
const onRemoveAllOverrides = ()=>{
|
|
5620
|
-
clearAllOverrides();
|
|
5660
|
+
const onRemoveAllOverrides = async ()=>{
|
|
5661
|
+
await clearAllOverrides();
|
|
5621
5662
|
setShowOverriddenOnly(false);
|
|
5663
|
+
if (reloadOnFlagChangeIsEnabled) window.location.reload();
|
|
5622
5664
|
};
|
|
5623
5665
|
const onClearOverride = useCallback((flagKey)=>{
|
|
5624
5666
|
if (totalOverriddenFlags <= 1) setShowOverriddenOnly(false);
|
|
5625
|
-
clearOverride(flagKey)
|
|
5667
|
+
clearOverride(flagKey).then(()=>{
|
|
5668
|
+
if (reloadOnFlagChangeIsEnabled) window.location.reload();
|
|
5669
|
+
});
|
|
5626
5670
|
}, [
|
|
5627
5671
|
totalOverriddenFlags,
|
|
5628
5672
|
setShowOverriddenOnly,
|
|
5629
|
-
clearOverride
|
|
5673
|
+
clearOverride,
|
|
5674
|
+
reloadOnFlagChangeIsEnabled
|
|
5630
5675
|
]);
|
|
5631
5676
|
const genericHelpTitle = showOverriddenOnly ? 'No overrides found' : 'No flags found';
|
|
5632
5677
|
const genericHelpSubtitle = showOverriddenOnly ? 'You have not set any overrides yet' : 'Try adjusting your search';
|
|
@@ -6012,7 +6057,7 @@ function LocalObjectFlagControl(props) {
|
|
|
6012
6057
|
});
|
|
6013
6058
|
}
|
|
6014
6059
|
function FlagSdkOverrideTabContentInner(props) {
|
|
6015
|
-
const { flagOverridePlugin } = props;
|
|
6060
|
+
const { flagOverridePlugin, reloadOnFlagChangeIsEnabled } = props;
|
|
6016
6061
|
const { searchTerm } = useSearchContext();
|
|
6017
6062
|
const analytics = useAnalytics();
|
|
6018
6063
|
const { flags, isLoading } = useFlagSdkOverrideContext();
|
|
@@ -6022,10 +6067,12 @@ function FlagSdkOverrideTabContentInner(props) {
|
|
|
6022
6067
|
if (flagOverridePlugin) {
|
|
6023
6068
|
flagOverridePlugin.removeOverride(flagKey);
|
|
6024
6069
|
analytics.trackFlagOverride(flagKey, null, 'remove');
|
|
6070
|
+
if (reloadOnFlagChangeIsEnabled) window.location.reload();
|
|
6025
6071
|
}
|
|
6026
6072
|
}, [
|
|
6027
6073
|
flagOverridePlugin,
|
|
6028
|
-
analytics
|
|
6074
|
+
analytics,
|
|
6075
|
+
reloadOnFlagChangeIsEnabled
|
|
6029
6076
|
]);
|
|
6030
6077
|
const totalOverriddenFlags = useMemo(()=>Object.values(flags).filter((flag)=>flag.isOverridden).length, [
|
|
6031
6078
|
flags
|
|
@@ -6054,6 +6101,7 @@ function FlagSdkOverrideTabContentInner(props) {
|
|
|
6054
6101
|
const handleSetOverride = (flagKey, value)=>{
|
|
6055
6102
|
flagOverridePlugin.setOverride(flagKey, value);
|
|
6056
6103
|
analytics.trackFlagOverride(flagKey, value, 'set');
|
|
6104
|
+
if (reloadOnFlagChangeIsEnabled) window.location.reload();
|
|
6057
6105
|
};
|
|
6058
6106
|
const handleClearAllOverrides = ()=>{
|
|
6059
6107
|
const currentOverrides = flagOverridePlugin.getAllOverrides();
|
|
@@ -6062,6 +6110,7 @@ function FlagSdkOverrideTabContentInner(props) {
|
|
|
6062
6110
|
analytics.trackFlagOverride('*', {
|
|
6063
6111
|
count: overrideCount
|
|
6064
6112
|
}, 'clear_all');
|
|
6113
|
+
if (reloadOnFlagChangeIsEnabled) window.location.reload();
|
|
6065
6114
|
};
|
|
6066
6115
|
const renderFlagControl = (flag)=>{
|
|
6067
6116
|
const handleOverride = (value)=>handleSetOverride(flag.key, value);
|
|
@@ -6194,14 +6243,16 @@ function FlagSdkOverrideTabContentInner(props) {
|
|
|
6194
6243
|
});
|
|
6195
6244
|
}
|
|
6196
6245
|
function FlagSdkOverrideTabContent(props) {
|
|
6197
|
-
|
|
6246
|
+
const { flagOverridePlugin, reloadOnFlagChangeIsEnabled } = props;
|
|
6247
|
+
if (!flagOverridePlugin) return /*#__PURE__*/ jsx(GenericHelpText, {
|
|
6198
6248
|
title: "Flag override plugin is not available",
|
|
6199
6249
|
subtitle: "To use local flag overrides, ensure the flag override plugin is added to your LaunchDarkly client configuration."
|
|
6200
6250
|
});
|
|
6201
6251
|
return /*#__PURE__*/ jsx(FlagSdkOverrideProvider, {
|
|
6202
|
-
flagOverridePlugin:
|
|
6252
|
+
flagOverridePlugin: flagOverridePlugin,
|
|
6203
6253
|
children: /*#__PURE__*/ jsx(FlagSdkOverrideTabContentInner, {
|
|
6204
|
-
flagOverridePlugin:
|
|
6254
|
+
flagOverridePlugin: flagOverridePlugin,
|
|
6255
|
+
reloadOnFlagChangeIsEnabled: reloadOnFlagChangeIsEnabled
|
|
6205
6256
|
})
|
|
6206
6257
|
});
|
|
6207
6258
|
}
|
|
@@ -6333,10 +6384,12 @@ function AddIcon({ className }) {
|
|
|
6333
6384
|
return /*#__PURE__*/ jsx("svg", {
|
|
6334
6385
|
className: `${Icon_css_icon} ${className}`,
|
|
6335
6386
|
fill: "currentColor",
|
|
6336
|
-
viewBox: "0 0
|
|
6387
|
+
viewBox: "0 0 20 20",
|
|
6337
6388
|
xmlns: "http://www.w3.org/2000/svg",
|
|
6338
6389
|
children: /*#__PURE__*/ jsx("path", {
|
|
6339
|
-
|
|
6390
|
+
fillRule: "evenodd",
|
|
6391
|
+
d: "M10 3.417a.75.75 0 0 1 .75.75V9.25h5.083a.75.75 0 0 1 0 1.5H10.75v5.083a.75.75 0 0 1-1.5 0V10.75H4.167a.75.75 0 0 1 0-1.5H9.25V4.167a.75.75 0 0 1 .75-.75",
|
|
6392
|
+
clipRule: "evenodd"
|
|
6340
6393
|
})
|
|
6341
6394
|
});
|
|
6342
6395
|
}
|
|
@@ -6547,26 +6600,27 @@ function EventsTabContent(props) {
|
|
|
6547
6600
|
]
|
|
6548
6601
|
});
|
|
6549
6602
|
}
|
|
6550
|
-
var
|
|
6551
|
-
var
|
|
6552
|
-
|
|
6553
|
-
|
|
6554
|
-
|
|
6555
|
-
|
|
6556
|
-
|
|
6557
|
-
injectStylesIntoStyleTag_default()(
|
|
6558
|
-
|
|
6603
|
+
var JmMkVLsQ0PKvpH55ZbENZF9zy49Yt8ehcekiCblJvUoE6WxHVpxF02jImBrO2KI4YZ9oVFnD7THUxvUSWtL62Ct5KrwvoDHkI8W01LfEmEcCpinWB_U345Z9_wfpKTN_RwUAAA_node_modules_pnpm_vanilla_extract_webpack_plugin_2_3_22_webpack_5_102_1_node_modules_vanilla_extract_webpack_plugin_extracted = __webpack_require__("../../node_modules/.pnpm/@rsbuild+core@1.5.17/node_modules/@rsbuild/core/compiled/css-loader/index.js??ruleSet[1].rules[2].use[1]!builtin:lightningcss-loader??ruleSet[1].rules[2].use[2]!../../node_modules/.pnpm/@vanilla-extract+webpack-plugin@2.3.22_webpack@5.102.1/node_modules/@vanilla-extract/webpack-plugin/virtualFileLoader/dist/vanilla-extract-webpack-plugin-virtualFileLoader.cjs.js?{\"fileName\":\"src/ui/Toolbar/TabContent/SettingsTab.css.ts.vanilla.css\",\"source\":\"#H4sIAAAAAAAAA6VUy3LjIBC8+yvmuDngkhzH6+DjfkgKi5E0GwQUjC15t/LvW+BHZFtJqrInlRrobnqYmb+UZc027gv4OwPYuqAxiK1jdp2E0g8QnSENexV+CGG8qJxxQTRBHcS6KB42s7fZ/MIhjYosqpaMnqKzzuLVgTLv6lRoyEooNjMAr7Qm20goV36AReEHWPshrdTOsoj0ByWUixHUIzUtS1gVmSAblJOGl9kwAOPAgoOysXahk7DzHkOlIqZFg8wYRPSqyj6K+VMSG7leZNcTdraqem2C21ktPnHxfBvb45HP4CChTDyaojfqIDOWAGWosYIYuyihQssYEvx7F5nqg6icZbQsIZlGsUXuEW3a0Sh/tjcSXGbBO5X0FZoCVkzOypTkrnunuWV5uothOVGV5ZdVWdzmsfoo3y9JprRHxD+/QbwcE9eqI3MYbRyhonPW5QJc32Y9HfYHJc1Jnx78XXlzgdDqK/7nb1zq8X8vpbJoT5rbY6cmtvYU+/m/JmMkVLsQ0PKvpH55ZbENZF9zy49Yt8ehcekiCblJvUoE6WxHVpxF02jImBrO2KI4YZ9oVFnD7THUxvUSWtL62Ct5KrwvoDHkI8W01LfEmEcCpinWB+U345Z9+wfpKTN+RwUAAA==\"}!../../node_modules/.pnpm/@vanilla-extract+webpack-plugin@2.3.22_webpack@5.102.1/node_modules/@vanilla-extract/webpack-plugin/extracted.js");
|
|
6604
|
+
var JmMkVLsQ0PKvpH55ZbENZF9zy49Yt8ehcekiCblJvUoE6WxHVpxF02jImBrO2KI4YZ9oVFnD7THUxvUSWtL62Ct5KrwvoDHkI8W01LfEmEcCpinWB_U345Z9_wfpKTN_RwUAAA_node_modules_pnpm_vanilla_extract_webpack_plugin_2_3_22_webpack_5_102_1_node_modules_vanilla_extract_webpack_plugin_extracted_options = {};
|
|
6605
|
+
JmMkVLsQ0PKvpH55ZbENZF9zy49Yt8ehcekiCblJvUoE6WxHVpxF02jImBrO2KI4YZ9oVFnD7THUxvUSWtL62Ct5KrwvoDHkI8W01LfEmEcCpinWB_U345Z9_wfpKTN_RwUAAA_node_modules_pnpm_vanilla_extract_webpack_plugin_2_3_22_webpack_5_102_1_node_modules_vanilla_extract_webpack_plugin_extracted_options.styleTagTransform = styleTagTransform_default();
|
|
6606
|
+
JmMkVLsQ0PKvpH55ZbENZF9zy49Yt8ehcekiCblJvUoE6WxHVpxF02jImBrO2KI4YZ9oVFnD7THUxvUSWtL62Ct5KrwvoDHkI8W01LfEmEcCpinWB_U345Z9_wfpKTN_RwUAAA_node_modules_pnpm_vanilla_extract_webpack_plugin_2_3_22_webpack_5_102_1_node_modules_vanilla_extract_webpack_plugin_extracted_options.setAttributes = setAttributesWithoutAttributes_default();
|
|
6607
|
+
JmMkVLsQ0PKvpH55ZbENZF9zy49Yt8ehcekiCblJvUoE6WxHVpxF02jImBrO2KI4YZ9oVFnD7THUxvUSWtL62Ct5KrwvoDHkI8W01LfEmEcCpinWB_U345Z9_wfpKTN_RwUAAA_node_modules_pnpm_vanilla_extract_webpack_plugin_2_3_22_webpack_5_102_1_node_modules_vanilla_extract_webpack_plugin_extracted_options.insert = insertBySelector_default().bind(null, "head");
|
|
6608
|
+
JmMkVLsQ0PKvpH55ZbENZF9zy49Yt8ehcekiCblJvUoE6WxHVpxF02jImBrO2KI4YZ9oVFnD7THUxvUSWtL62Ct5KrwvoDHkI8W01LfEmEcCpinWB_U345Z9_wfpKTN_RwUAAA_node_modules_pnpm_vanilla_extract_webpack_plugin_2_3_22_webpack_5_102_1_node_modules_vanilla_extract_webpack_plugin_extracted_options.domAPI = styleDomAPI_default();
|
|
6609
|
+
JmMkVLsQ0PKvpH55ZbENZF9zy49Yt8ehcekiCblJvUoE6WxHVpxF02jImBrO2KI4YZ9oVFnD7THUxvUSWtL62Ct5KrwvoDHkI8W01LfEmEcCpinWB_U345Z9_wfpKTN_RwUAAA_node_modules_pnpm_vanilla_extract_webpack_plugin_2_3_22_webpack_5_102_1_node_modules_vanilla_extract_webpack_plugin_extracted_options.insertStyleElement = insertStyleElement_default();
|
|
6610
|
+
injectStylesIntoStyleTag_default()(JmMkVLsQ0PKvpH55ZbENZF9zy49Yt8ehcekiCblJvUoE6WxHVpxF02jImBrO2KI4YZ9oVFnD7THUxvUSWtL62Ct5KrwvoDHkI8W01LfEmEcCpinWB_U345Z9_wfpKTN_RwUAAA_node_modules_pnpm_vanilla_extract_webpack_plugin_2_3_22_webpack_5_102_1_node_modules_vanilla_extract_webpack_plugin_extracted.A, JmMkVLsQ0PKvpH55ZbENZF9zy49Yt8ehcekiCblJvUoE6WxHVpxF02jImBrO2KI4YZ9oVFnD7THUxvUSWtL62Ct5KrwvoDHkI8W01LfEmEcCpinWB_U345Z9_wfpKTN_RwUAAA_node_modules_pnpm_vanilla_extract_webpack_plugin_2_3_22_webpack_5_102_1_node_modules_vanilla_extract_webpack_plugin_extracted_options);
|
|
6611
|
+
JmMkVLsQ0PKvpH55ZbENZF9zy49Yt8ehcekiCblJvUoE6WxHVpxF02jImBrO2KI4YZ9oVFnD7THUxvUSWtL62Ct5KrwvoDHkI8W01LfEmEcCpinWB_U345Z9_wfpKTN_RwUAAA_node_modules_pnpm_vanilla_extract_webpack_plugin_2_3_22_webpack_5_102_1_node_modules_vanilla_extract_webpack_plugin_extracted.A && JmMkVLsQ0PKvpH55ZbENZF9zy49Yt8ehcekiCblJvUoE6WxHVpxF02jImBrO2KI4YZ9oVFnD7THUxvUSWtL62Ct5KrwvoDHkI8W01LfEmEcCpinWB_U345Z9_wfpKTN_RwUAAA_node_modules_pnpm_vanilla_extract_webpack_plugin_2_3_22_webpack_5_102_1_node_modules_vanilla_extract_webpack_plugin_extracted.A.locals && JmMkVLsQ0PKvpH55ZbENZF9zy49Yt8ehcekiCblJvUoE6WxHVpxF02jImBrO2KI4YZ9oVFnD7THUxvUSWtL62Ct5KrwvoDHkI8W01LfEmEcCpinWB_U345Z9_wfpKTN_RwUAAA_node_modules_pnpm_vanilla_extract_webpack_plugin_2_3_22_webpack_5_102_1_node_modules_vanilla_extract_webpack_plugin_extracted.A.locals;
|
|
6559
6612
|
var settingName = '_11ftnsv5';
|
|
6560
6613
|
var SettingsTab_css_switch_ = '_11ftnsv2';
|
|
6561
6614
|
var settingInfo = '_11ftnsv3';
|
|
6562
|
-
var SettingsTab_css_icon = '
|
|
6615
|
+
var SettingsTab_css_icon = '_11ftnsva';
|
|
6563
6616
|
var settingDetails = '_11ftnsv4';
|
|
6564
6617
|
var settingsGroup = '_11ftnsv0';
|
|
6565
|
-
var SettingsTab_css_statusText = '
|
|
6618
|
+
var SettingsTab_css_statusText = '_11ftnsv9';
|
|
6566
6619
|
var settingsGroupTitle = '_11ftnsv1';
|
|
6567
|
-
var settingValue = '
|
|
6568
|
-
var SettingsTab_css_statusIndicator = '
|
|
6569
|
-
var
|
|
6620
|
+
var settingValue = '_11ftnsv7';
|
|
6621
|
+
var SettingsTab_css_statusIndicator = '_11ftnsv8';
|
|
6622
|
+
var settingDescription = '_11ftnsv6';
|
|
6623
|
+
var SettingsTab_css_select = '_11ftnsvb';
|
|
6570
6624
|
function ProjectSelector(props) {
|
|
6571
6625
|
const { availableProjects, currentProject, onProjectChange, isLoading } = props;
|
|
6572
6626
|
const handleProjectSelect = (key)=>{
|
|
@@ -6645,19 +6699,36 @@ function PositionSelector(props) {
|
|
|
6645
6699
|
]
|
|
6646
6700
|
});
|
|
6647
6701
|
}
|
|
6648
|
-
function
|
|
6649
|
-
const {
|
|
6702
|
+
function AutoCollapseToggle(props) {
|
|
6703
|
+
const { isAutoCollapseEnabled, onToggleAutoCollapse } = props;
|
|
6650
6704
|
const analytics = useAnalytics();
|
|
6651
6705
|
const handleToggle = (isSelected)=>{
|
|
6652
|
-
analytics.
|
|
6653
|
-
|
|
6706
|
+
analytics.trackAutoCollapseToggle(isSelected ? 'enable' : 'disable');
|
|
6707
|
+
onToggleAutoCollapse();
|
|
6654
6708
|
};
|
|
6655
6709
|
return /*#__PURE__*/ jsx(Switch_Switch, {
|
|
6710
|
+
"data-testid": "auto-collapse-toggle",
|
|
6656
6711
|
className: SettingsTab_css_switch_,
|
|
6657
6712
|
"data-theme": "dark",
|
|
6658
|
-
isSelected:
|
|
6713
|
+
isSelected: isAutoCollapseEnabled,
|
|
6659
6714
|
onChange: handleToggle,
|
|
6660
|
-
"aria-label": "
|
|
6715
|
+
"aria-label": "Auto-collapse toolbar"
|
|
6716
|
+
});
|
|
6717
|
+
}
|
|
6718
|
+
function ReloadOnFlagChangeToggle(props) {
|
|
6719
|
+
const { reloadOnFlagChangeIsEnabled, onToggleReloadOnFlagChange } = props;
|
|
6720
|
+
const analytics = useAnalytics();
|
|
6721
|
+
const handleToggle = (isSelected)=>{
|
|
6722
|
+
analytics.trackReloadOnFlagChangeToggle(isSelected);
|
|
6723
|
+
onToggleReloadOnFlagChange();
|
|
6724
|
+
};
|
|
6725
|
+
return /*#__PURE__*/ jsx(Switch_Switch, {
|
|
6726
|
+
"data-testid": "reload-on-flag-change-toggle",
|
|
6727
|
+
className: SettingsTab_css_switch_,
|
|
6728
|
+
"data-theme": "dark",
|
|
6729
|
+
isSelected: reloadOnFlagChangeIsEnabled,
|
|
6730
|
+
onChange: handleToggle,
|
|
6731
|
+
"aria-label": "Reload on flag change"
|
|
6661
6732
|
});
|
|
6662
6733
|
}
|
|
6663
6734
|
function ConnectionStatusDisplay(props) {
|
|
@@ -6686,7 +6757,7 @@ function ConnectionStatusDisplay(props) {
|
|
|
6686
6757
|
});
|
|
6687
6758
|
}
|
|
6688
6759
|
function SettingsTabContent(props) {
|
|
6689
|
-
const { mode,
|
|
6760
|
+
const { mode, reloadOnFlagChangeIsEnabled, onToggleReloadOnFlagChange, isAutoCollapseEnabled, onToggleAutoCollapse } = props;
|
|
6690
6761
|
const { state, switchProject } = useDevServerContext();
|
|
6691
6762
|
const { position, handlePositionChange } = useToolbarUIContext();
|
|
6692
6763
|
const { searchTerm } = useSearchContext();
|
|
@@ -6737,10 +6808,17 @@ function SettingsTabContent(props) {
|
|
|
6737
6808
|
isPositionSelector: true
|
|
6738
6809
|
},
|
|
6739
6810
|
{
|
|
6740
|
-
id: '
|
|
6741
|
-
name: '
|
|
6811
|
+
id: 'auto-collapse',
|
|
6812
|
+
name: 'Auto-collapse',
|
|
6813
|
+
description: 'Automatically collapses the toolbar when clicking outside.',
|
|
6742
6814
|
icon: '',
|
|
6743
|
-
|
|
6815
|
+
isAutoCollapseToggle: true
|
|
6816
|
+
},
|
|
6817
|
+
{
|
|
6818
|
+
id: 'reload-on-flag-change',
|
|
6819
|
+
name: 'Reload on flag change',
|
|
6820
|
+
icon: 'refresh',
|
|
6821
|
+
isReloadOnFlagChangeToggle: true
|
|
6744
6822
|
}
|
|
6745
6823
|
]
|
|
6746
6824
|
}
|
|
@@ -6756,10 +6834,17 @@ function SettingsTabContent(props) {
|
|
|
6756
6834
|
isPositionSelector: true
|
|
6757
6835
|
},
|
|
6758
6836
|
{
|
|
6759
|
-
id: '
|
|
6760
|
-
name: '
|
|
6837
|
+
id: 'auto-collapse',
|
|
6838
|
+
name: 'Auto-collapse',
|
|
6839
|
+
description: 'Automatically collapses the toolbar when clicking outside.',
|
|
6761
6840
|
icon: '',
|
|
6762
|
-
|
|
6841
|
+
isAutoCollapseToggle: true
|
|
6842
|
+
},
|
|
6843
|
+
{
|
|
6844
|
+
id: 'reload-on-flag-change',
|
|
6845
|
+
name: 'Reload on flag change',
|
|
6846
|
+
icon: 'refresh',
|
|
6847
|
+
isReloadOnFlagChangeToggle: true
|
|
6763
6848
|
}
|
|
6764
6849
|
]
|
|
6765
6850
|
}
|
|
@@ -6806,12 +6891,18 @@ function SettingsTabContent(props) {
|
|
|
6806
6891
|
children: /*#__PURE__*/ jsxs("div", {
|
|
6807
6892
|
className: settingInfo,
|
|
6808
6893
|
children: [
|
|
6809
|
-
/*#__PURE__*/
|
|
6894
|
+
/*#__PURE__*/ jsxs("div", {
|
|
6810
6895
|
className: settingDetails,
|
|
6811
|
-
children:
|
|
6812
|
-
|
|
6813
|
-
|
|
6814
|
-
|
|
6896
|
+
children: [
|
|
6897
|
+
/*#__PURE__*/ jsx("span", {
|
|
6898
|
+
className: settingName,
|
|
6899
|
+
children: item.name
|
|
6900
|
+
}),
|
|
6901
|
+
item.description && /*#__PURE__*/ jsx("span", {
|
|
6902
|
+
className: settingDescription,
|
|
6903
|
+
children: item.description
|
|
6904
|
+
})
|
|
6905
|
+
]
|
|
6815
6906
|
}),
|
|
6816
6907
|
item.isProjectSelector ? /*#__PURE__*/ jsx(ProjectSelector, {
|
|
6817
6908
|
availableProjects: state.availableProjects,
|
|
@@ -6821,9 +6912,12 @@ function SettingsTabContent(props) {
|
|
|
6821
6912
|
}) : item.isPositionSelector ? /*#__PURE__*/ jsx(PositionSelector, {
|
|
6822
6913
|
currentPosition: position,
|
|
6823
6914
|
onPositionChange: handlePositionSelect
|
|
6824
|
-
}) : item.
|
|
6825
|
-
|
|
6826
|
-
|
|
6915
|
+
}) : item.isAutoCollapseToggle ? /*#__PURE__*/ jsx(AutoCollapseToggle, {
|
|
6916
|
+
isAutoCollapseEnabled: isAutoCollapseEnabled,
|
|
6917
|
+
onToggleAutoCollapse: onToggleAutoCollapse
|
|
6918
|
+
}) : item.isReloadOnFlagChangeToggle ? /*#__PURE__*/ jsx(ReloadOnFlagChangeToggle, {
|
|
6919
|
+
reloadOnFlagChangeIsEnabled: reloadOnFlagChangeIsEnabled,
|
|
6920
|
+
onToggleReloadOnFlagChange: onToggleReloadOnFlagChange
|
|
6827
6921
|
}) : /*#__PURE__*/ jsx("span", {
|
|
6828
6922
|
className: settingValue,
|
|
6829
6923
|
children: item.value
|
|
@@ -6839,15 +6933,18 @@ function SettingsTabContent(props) {
|
|
|
6839
6933
|
});
|
|
6840
6934
|
}
|
|
6841
6935
|
function TabContentRenderer(props) {
|
|
6842
|
-
const { activeTab, slideDirection, mode, flagOverridePlugin, eventInterceptionPlugin, baseUrl,
|
|
6936
|
+
const { activeTab, slideDirection, mode, flagOverridePlugin, eventInterceptionPlugin, baseUrl, reloadOnFlagChangeIsEnabled, onToggleReloadOnFlagChange, isAutoCollapseEnabled, onToggleAutoCollapse } = props;
|
|
6843
6937
|
const renderContent = ()=>{
|
|
6844
6938
|
switch(activeTab){
|
|
6845
6939
|
case 'flag-sdk':
|
|
6846
6940
|
return /*#__PURE__*/ jsx(FlagSdkOverrideTabContent, {
|
|
6847
|
-
flagOverridePlugin: flagOverridePlugin
|
|
6941
|
+
flagOverridePlugin: flagOverridePlugin,
|
|
6942
|
+
reloadOnFlagChangeIsEnabled: reloadOnFlagChangeIsEnabled
|
|
6848
6943
|
});
|
|
6849
6944
|
case 'flag-dev-server':
|
|
6850
|
-
return /*#__PURE__*/ jsx(FlagDevServerTabContent, {
|
|
6945
|
+
return /*#__PURE__*/ jsx(FlagDevServerTabContent, {
|
|
6946
|
+
reloadOnFlagChangeIsEnabled: reloadOnFlagChangeIsEnabled
|
|
6947
|
+
});
|
|
6851
6948
|
case 'events':
|
|
6852
6949
|
return /*#__PURE__*/ jsx(EventsTabContent, {
|
|
6853
6950
|
baseUrl: baseUrl,
|
|
@@ -6856,8 +6953,10 @@ function TabContentRenderer(props) {
|
|
|
6856
6953
|
case 'settings':
|
|
6857
6954
|
return /*#__PURE__*/ jsx(SettingsTabContent, {
|
|
6858
6955
|
mode: mode,
|
|
6859
|
-
|
|
6860
|
-
|
|
6956
|
+
reloadOnFlagChangeIsEnabled: reloadOnFlagChangeIsEnabled,
|
|
6957
|
+
onToggleReloadOnFlagChange: onToggleReloadOnFlagChange,
|
|
6958
|
+
isAutoCollapseEnabled: isAutoCollapseEnabled,
|
|
6959
|
+
onToggleAutoCollapse: onToggleAutoCollapse
|
|
6861
6960
|
});
|
|
6862
6961
|
default:
|
|
6863
6962
|
return null;
|
|
@@ -6889,10 +6988,12 @@ function ToggleOffIcon({ className }) {
|
|
|
6889
6988
|
return /*#__PURE__*/ jsx("svg", {
|
|
6890
6989
|
className: `${Icon_css_icon} ${className}`,
|
|
6891
6990
|
fill: "currentColor",
|
|
6892
|
-
viewBox: "0 0
|
|
6991
|
+
viewBox: "0 0 20 20",
|
|
6893
6992
|
xmlns: "http://www.w3.org/2000/svg",
|
|
6894
6993
|
children: /*#__PURE__*/ jsx("path", {
|
|
6895
|
-
|
|
6994
|
+
fillRule: "evenodd",
|
|
6995
|
+
d: "M2.6 5.934A5.75 5.75 0 0 1 6.668 4.25h6.666a5.75 5.75 0 1 1 0 11.5H6.667A5.75 5.75 0 0 1 2.6 5.934m2.358 2.357a2.417 2.417 0 1 1 3.418 3.418A2.417 2.417 0 0 1 4.958 8.29",
|
|
6996
|
+
clipRule: "evenodd"
|
|
6896
6997
|
})
|
|
6897
6998
|
});
|
|
6898
6999
|
}
|
|
@@ -6900,10 +7001,12 @@ function GearIcon({ className }) {
|
|
|
6900
7001
|
return /*#__PURE__*/ jsx("svg", {
|
|
6901
7002
|
className: `${Icon_css_icon} ${className}`,
|
|
6902
7003
|
fill: "currentColor",
|
|
6903
|
-
viewBox: "0 0
|
|
7004
|
+
viewBox: "0 0 20 20",
|
|
6904
7005
|
xmlns: "http://www.w3.org/2000/svg",
|
|
6905
7006
|
children: /*#__PURE__*/ jsx("path", {
|
|
6906
|
-
|
|
7007
|
+
fillRule: "evenodd",
|
|
7008
|
+
d: "M9.23 1.875c-.765 0-1.417.552-1.542 1.306l-.149.893c-.017.1-.095.218-.247.29a6 6 0 0 0-.822.476c-.138.095-.279.104-.374.068l-.85-.318a1.56 1.56 0 0 0-1.901.682l-.768 1.331a1.56 1.56 0 0 0 .36 1.988l.7.576c.079.065.14.191.128.359a6 6 0 0 0 0 .949c.013.167-.049.293-.128.358l-.7.577a1.56 1.56 0 0 0-.36 1.987l.768 1.331c.382.662 1.186.95 1.901.682l.85-.318c.096-.036.236-.027.375.069q.39.268.82.474c.153.074.231.19.248.291l.149.893a1.56 1.56 0 0 0 1.541 1.306h1.537c.764 0 1.415-.552 1.541-1.306l.149-.893c.017-.1.095-.217.247-.29q.43-.207.822-.476c.138-.095.278-.104.374-.069l.85.319a1.56 1.56 0 0 0 1.9-.682l.77-1.331a1.56 1.56 0 0 0-.36-1.988l-.701-.576c-.08-.065-.141-.191-.128-.359a6 6 0 0 0 0-.949c-.013-.167.049-.293.128-.358l.7-.577c.59-.485.742-1.326.36-1.987l-.768-1.331a1.56 1.56 0 0 0-1.901-.682l-.85.318c-.096.036-.236.027-.375-.068a6 6 0 0 0-.821-.475c-.152-.074-.23-.19-.247-.291l-.149-.893a1.56 1.56 0 0 0-1.541-1.306zm.768 11.25a3.125 3.125 0 1 0 0-6.25 3.125 3.125 0 0 0 0 6.25",
|
|
7009
|
+
clipRule: "evenodd"
|
|
6907
7010
|
})
|
|
6908
7011
|
});
|
|
6909
7012
|
}
|
|
@@ -6934,13 +7037,14 @@ function getHeaderLabel(currentProjectKey, sourceEnvironmentKey) {
|
|
|
6934
7037
|
return label;
|
|
6935
7038
|
}
|
|
6936
7039
|
const ExpandedToolbarContent = /*#__PURE__*/ react.forwardRef((props, ref)=>{
|
|
6937
|
-
const { activeTab, slideDirection, searchTerm, searchIsExpanded, onSearch, onClose,
|
|
7040
|
+
const { activeTab, slideDirection, searchTerm, searchIsExpanded, onSearch, onClose, onToggleAutoCollapse, isAutoCollapseEnabled, onTabChange, setSearchIsExpanded, mode, flagOverridePlugin, eventInterceptionPlugin, baseUrl, defaultActiveTab, onHeaderMouseDown, reloadOnFlagChangeIsEnabled, onToggleReloadOnFlagChange } = props;
|
|
6938
7041
|
const { state } = useDevServerContext();
|
|
6939
7042
|
const headerLabel = getHeaderLabel(state.currentProjectKey, state.sourceEnvironmentKey);
|
|
6940
7043
|
const { error } = state;
|
|
6941
7044
|
const availableTabs = getTabsForMode(mode, !!flagOverridePlugin, !!eventInterceptionPlugin);
|
|
6942
7045
|
const shouldShowError = error && 'dev-server' === mode && 'error' === state.connectionStatus;
|
|
6943
7046
|
return /*#__PURE__*/ jsx(FocusScope, {
|
|
7047
|
+
restoreFocus: true,
|
|
6944
7048
|
children: /*#__PURE__*/ jsxs(motion.div, {
|
|
6945
7049
|
ref: ref,
|
|
6946
7050
|
className: toolbarContent,
|
|
@@ -7064,8 +7168,10 @@ const ExpandedToolbarContent = /*#__PURE__*/ react.forwardRef((props, ref)=>{
|
|
|
7064
7168
|
mode: mode,
|
|
7065
7169
|
flagOverridePlugin: flagOverridePlugin,
|
|
7066
7170
|
eventInterceptionPlugin: eventInterceptionPlugin,
|
|
7067
|
-
|
|
7068
|
-
|
|
7171
|
+
reloadOnFlagChangeIsEnabled: reloadOnFlagChangeIsEnabled,
|
|
7172
|
+
onToggleReloadOnFlagChange: onToggleReloadOnFlagChange,
|
|
7173
|
+
isAutoCollapseEnabled: isAutoCollapseEnabled,
|
|
7174
|
+
onToggleAutoCollapse: onToggleAutoCollapse
|
|
7069
7175
|
})
|
|
7070
7176
|
})
|
|
7071
7177
|
})
|
|
@@ -7084,7 +7190,8 @@ function useToolbarState(props) {
|
|
|
7084
7190
|
const [previousTab, setPreviousTab] = useState();
|
|
7085
7191
|
const [isAnimating, setIsAnimating] = useState(false);
|
|
7086
7192
|
const [searchIsExpanded, setSearchIsExpanded] = useState(false);
|
|
7087
|
-
const [
|
|
7193
|
+
const [reloadOnFlagChangeIsEnabled, enableReloadOnFlagChange] = useState(()=>loadReloadOnFlagChange());
|
|
7194
|
+
const [isAutoCollapseEnabled, setAutoCollapse] = useState(()=>loadToolbarAutoCollapse());
|
|
7088
7195
|
const hasBeenExpandedRef = useRef(false);
|
|
7089
7196
|
const toolbarRef = useRef(null);
|
|
7090
7197
|
const slideDirection = useMemo(()=>{
|
|
@@ -7120,8 +7227,8 @@ function useToolbarState(props) {
|
|
|
7120
7227
|
const handleClose = useCallback(()=>{
|
|
7121
7228
|
analytics.trackToolbarToggle('collapse', 'close_button');
|
|
7122
7229
|
setIsExpanded(false);
|
|
7123
|
-
|
|
7124
|
-
|
|
7230
|
+
setAutoCollapse(false);
|
|
7231
|
+
saveToolbarAutoCollapse(false);
|
|
7125
7232
|
}, [
|
|
7126
7233
|
analytics
|
|
7127
7234
|
]);
|
|
@@ -7130,10 +7237,17 @@ function useToolbarState(props) {
|
|
|
7130
7237
|
}, [
|
|
7131
7238
|
setSearchTerm
|
|
7132
7239
|
]);
|
|
7133
|
-
const
|
|
7134
|
-
|
|
7240
|
+
const handleToggleAutoCollapse = useCallback(()=>{
|
|
7241
|
+
setAutoCollapse((prev)=>{
|
|
7242
|
+
const newValue = !prev;
|
|
7243
|
+
saveToolbarAutoCollapse(newValue);
|
|
7244
|
+
return newValue;
|
|
7245
|
+
});
|
|
7246
|
+
}, []);
|
|
7247
|
+
const handleToggleReloadOnFlagChange = useCallback(()=>{
|
|
7248
|
+
enableReloadOnFlagChange((prev)=>{
|
|
7135
7249
|
const newValue = !prev;
|
|
7136
|
-
|
|
7250
|
+
saveReloadOnFlagChange(newValue);
|
|
7137
7251
|
return newValue;
|
|
7138
7252
|
});
|
|
7139
7253
|
}, []);
|
|
@@ -7154,7 +7268,7 @@ function useToolbarState(props) {
|
|
|
7154
7268
|
]);
|
|
7155
7269
|
useEffect(()=>{
|
|
7156
7270
|
const handleClickOutside = (event)=>{
|
|
7157
|
-
if (isExpanded &&
|
|
7271
|
+
if (isExpanded && isAutoCollapseEnabled && toolbarRef.current && !toolbarRef.current.contains(event.target)) {
|
|
7158
7272
|
analytics.trackToolbarToggle('collapse', 'click_outside');
|
|
7159
7273
|
setIsExpanded(false);
|
|
7160
7274
|
}
|
|
@@ -7165,7 +7279,7 @@ function useToolbarState(props) {
|
|
|
7165
7279
|
};
|
|
7166
7280
|
}, [
|
|
7167
7281
|
isExpanded,
|
|
7168
|
-
|
|
7282
|
+
isAutoCollapseEnabled,
|
|
7169
7283
|
analytics
|
|
7170
7284
|
]);
|
|
7171
7285
|
return {
|
|
@@ -7176,12 +7290,14 @@ function useToolbarState(props) {
|
|
|
7176
7290
|
searchIsExpanded,
|
|
7177
7291
|
slideDirection,
|
|
7178
7292
|
hasBeenExpanded: hasBeenExpandedRef.current,
|
|
7179
|
-
|
|
7293
|
+
reloadOnFlagChangeIsEnabled,
|
|
7294
|
+
isAutoCollapseEnabled,
|
|
7180
7295
|
toolbarRef,
|
|
7181
7296
|
handleTabChange,
|
|
7182
7297
|
handleClose,
|
|
7183
7298
|
handleSearch,
|
|
7184
|
-
|
|
7299
|
+
handleToggleReloadOnFlagChange,
|
|
7300
|
+
handleToggleAutoCollapse,
|
|
7185
7301
|
handleCircleClick,
|
|
7186
7302
|
setIsAnimating,
|
|
7187
7303
|
setSearchIsExpanded
|
|
@@ -7421,7 +7537,7 @@ function LdToolbar(props) {
|
|
|
7421
7537
|
});
|
|
7422
7538
|
const circleButtonRef = useRef(null);
|
|
7423
7539
|
const expandedContentRef = useRef(null);
|
|
7424
|
-
const { activeTab, slideDirection, searchIsExpanded, isExpanded, toolbarRef, handleTabChange, handleClose, handleSearch,
|
|
7540
|
+
const { activeTab, slideDirection, searchIsExpanded, isExpanded, toolbarRef, handleTabChange, handleClose, handleSearch, handleToggleReloadOnFlagChange, handleCircleClick, reloadOnFlagChangeIsEnabled, handleToggleAutoCollapse, isAutoCollapseEnabled, setSearchIsExpanded, setIsAnimating } = toolbarState;
|
|
7425
7541
|
const focusExpandedToolbar = useCallback(()=>{
|
|
7426
7542
|
if (expandedContentRef.current) expandedContentRef.current.focus();
|
|
7427
7543
|
}, [
|
|
@@ -7505,8 +7621,8 @@ function LdToolbar(props) {
|
|
|
7505
7621
|
searchIsExpanded: searchIsExpanded,
|
|
7506
7622
|
onSearch: handleSearch,
|
|
7507
7623
|
onClose: handleClose,
|
|
7508
|
-
|
|
7509
|
-
|
|
7624
|
+
onToggleAutoCollapse: handleToggleAutoCollapse,
|
|
7625
|
+
isAutoCollapseEnabled: isAutoCollapseEnabled,
|
|
7510
7626
|
onTabChange: handleTabChange,
|
|
7511
7627
|
setSearchIsExpanded: setSearchIsExpanded,
|
|
7512
7628
|
flagOverridePlugin: flagOverridePlugin,
|
|
@@ -7514,7 +7630,9 @@ function LdToolbar(props) {
|
|
|
7514
7630
|
mode: mode,
|
|
7515
7631
|
baseUrl: baseUrl,
|
|
7516
7632
|
defaultActiveTab: defaultActiveTab,
|
|
7517
|
-
onHeaderMouseDown: handleMouseDown
|
|
7633
|
+
onHeaderMouseDown: handleMouseDown,
|
|
7634
|
+
reloadOnFlagChangeIsEnabled: reloadOnFlagChangeIsEnabled,
|
|
7635
|
+
onToggleReloadOnFlagChange: handleToggleReloadOnFlagChange
|
|
7518
7636
|
})
|
|
7519
7637
|
})
|
|
7520
7638
|
]
|
|
@@ -1 +1,5 @@
|
|
|
1
|
-
|
|
1
|
+
interface FlagDevServerTabContentProps {
|
|
2
|
+
reloadOnFlagChangeIsEnabled: boolean;
|
|
3
|
+
}
|
|
4
|
+
export declare function FlagDevServerTabContent(props: FlagDevServerTabContentProps): import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
export {};
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import type { IFlagOverridePlugin } from '../../../types/plugin';
|
|
2
2
|
interface FlagSdkOverrideTabContentProps {
|
|
3
3
|
flagOverridePlugin?: IFlagOverridePlugin;
|
|
4
|
+
reloadOnFlagChangeIsEnabled: boolean;
|
|
4
5
|
}
|
|
5
6
|
export declare function FlagSdkOverrideTabContent(props: FlagSdkOverrideTabContentProps): import("react/jsx-runtime").JSX.Element;
|
|
6
7
|
export {};
|
|
@@ -4,6 +4,7 @@ export declare const switch_: string;
|
|
|
4
4
|
export declare const settingInfo: string;
|
|
5
5
|
export declare const settingDetails: string;
|
|
6
6
|
export declare const settingName: string;
|
|
7
|
+
export declare const settingDescription: string;
|
|
7
8
|
export declare const settingValue: string;
|
|
8
9
|
export declare const statusIndicator: string;
|
|
9
10
|
export declare const statusText: string;
|
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
import { type ToolbarMode } from '../types/toolbar';
|
|
2
2
|
interface SettingsTabContentProps {
|
|
3
3
|
mode: ToolbarMode;
|
|
4
|
-
|
|
5
|
-
|
|
4
|
+
reloadOnFlagChangeIsEnabled: boolean;
|
|
5
|
+
onToggleReloadOnFlagChange: () => void;
|
|
6
|
+
isAutoCollapseEnabled: boolean;
|
|
7
|
+
onToggleAutoCollapse: () => void;
|
|
6
8
|
}
|
|
7
9
|
export declare function SettingsTabContent(props: SettingsTabContentProps): import("react/jsx-runtime").JSX.Element;
|
|
8
10
|
export {};
|
|
@@ -8,8 +8,8 @@ interface ExpandedToolbarContentProps {
|
|
|
8
8
|
searchIsExpanded: boolean;
|
|
9
9
|
onSearch: (searchTerm: string) => void;
|
|
10
10
|
onClose: () => void;
|
|
11
|
-
|
|
12
|
-
|
|
11
|
+
onToggleAutoCollapse: () => void;
|
|
12
|
+
isAutoCollapseEnabled: boolean;
|
|
13
13
|
onTabChange: (tabId: string) => void;
|
|
14
14
|
setSearchIsExpanded: Dispatch<SetStateAction<boolean>>;
|
|
15
15
|
mode: ToolbarMode;
|
|
@@ -18,6 +18,8 @@ interface ExpandedToolbarContentProps {
|
|
|
18
18
|
flagOverridePlugin?: IFlagOverridePlugin;
|
|
19
19
|
eventInterceptionPlugin?: IEventInterceptionPlugin;
|
|
20
20
|
onHeaderMouseDown?: (event: React.MouseEvent) => void;
|
|
21
|
+
reloadOnFlagChangeIsEnabled: boolean;
|
|
22
|
+
onToggleReloadOnFlagChange: () => void;
|
|
21
23
|
}
|
|
22
24
|
export declare const ExpandedToolbarContent: React.ForwardRefExoticComponent<ExpandedToolbarContentProps & React.RefAttributes<HTMLDivElement>>;
|
|
23
25
|
export {};
|
|
@@ -7,8 +7,10 @@ interface TabContentRendererProps {
|
|
|
7
7
|
mode: ToolbarMode;
|
|
8
8
|
flagOverridePlugin?: IFlagOverridePlugin;
|
|
9
9
|
eventInterceptionPlugin?: IEventInterceptionPlugin;
|
|
10
|
-
|
|
11
|
-
|
|
10
|
+
reloadOnFlagChangeIsEnabled: boolean;
|
|
11
|
+
onToggleReloadOnFlagChange: () => void;
|
|
12
|
+
isAutoCollapseEnabled: boolean;
|
|
13
|
+
onToggleAutoCollapse: () => void;
|
|
12
14
|
}
|
|
13
15
|
export declare function TabContentRenderer(props: TabContentRendererProps): import("react/jsx-runtime").JSX.Element | null;
|
|
14
16
|
export {};
|
|
@@ -11,12 +11,14 @@ export interface UseToolbarStateReturn {
|
|
|
11
11
|
searchIsExpanded: boolean;
|
|
12
12
|
slideDirection: number;
|
|
13
13
|
hasBeenExpanded: boolean;
|
|
14
|
-
|
|
14
|
+
reloadOnFlagChangeIsEnabled: boolean;
|
|
15
|
+
isAutoCollapseEnabled: boolean;
|
|
15
16
|
toolbarRef: React.RefObject<HTMLDivElement | null>;
|
|
16
17
|
handleTabChange: (tabId: string) => void;
|
|
17
18
|
handleClose: () => void;
|
|
18
19
|
handleSearch: (newSearchTerm: string) => void;
|
|
19
|
-
|
|
20
|
+
handleToggleReloadOnFlagChange: () => void;
|
|
21
|
+
handleToggleAutoCollapse: () => void;
|
|
20
22
|
handleCircleClick: () => void;
|
|
21
23
|
setIsAnimating: Dispatch<SetStateAction<boolean>>;
|
|
22
24
|
setSearchIsExpanded: Dispatch<SetStateAction<boolean>>;
|
|
@@ -6,10 +6,13 @@ export declare const TOOLBAR_STORAGE_KEYS: {
|
|
|
6
6
|
};
|
|
7
7
|
export interface ToolbarSettings {
|
|
8
8
|
position: ToolbarPosition;
|
|
9
|
-
|
|
9
|
+
reloadOnFlagChange: boolean;
|
|
10
|
+
autoCollapse: boolean;
|
|
10
11
|
}
|
|
11
12
|
export declare const DEFAULT_SETTINGS: ToolbarSettings;
|
|
12
13
|
export declare function saveToolbarPosition(position: ToolbarPosition): void;
|
|
13
14
|
export declare function loadToolbarPosition(): ToolbarPosition | null;
|
|
14
|
-
export declare function
|
|
15
|
-
export declare function
|
|
15
|
+
export declare function saveToolbarAutoCollapse(autoCollapse: boolean): void;
|
|
16
|
+
export declare function loadToolbarAutoCollapse(): boolean;
|
|
17
|
+
export declare function saveReloadOnFlagChange(isReloadOnFlagChange: boolean): void;
|
|
18
|
+
export declare function loadReloadOnFlagChange(): boolean;
|
|
@@ -20,9 +20,9 @@ export declare class ToolbarAnalytics {
|
|
|
20
20
|
*/
|
|
21
21
|
trackPositionChange(oldPosition: string, newPosition: string, source: 'drag' | 'settings'): void;
|
|
22
22
|
/**
|
|
23
|
-
* Track toolbar
|
|
23
|
+
* Track toolbar auto-collapse toggle
|
|
24
24
|
*/
|
|
25
|
-
|
|
25
|
+
trackAutoCollapseToggle(action: 'enable' | 'disable'): void;
|
|
26
26
|
/**
|
|
27
27
|
* Track toolbar tab navigation
|
|
28
28
|
*/
|
|
@@ -34,7 +34,7 @@ export declare class ToolbarAnalytics {
|
|
|
34
34
|
/**
|
|
35
35
|
* Track toolbar expand/collapse events
|
|
36
36
|
*/
|
|
37
|
-
trackToolbarToggle(action: 'expand' | 'collapse', trigger: 'close_button' | 'click_outside' | 'tab_toggle'): void;
|
|
37
|
+
trackToolbarToggle(action: 'expand' | 'collapse', trigger: 'close_button' | 'click_outside' | 'tab_toggle' | 'focus_lost'): void;
|
|
38
38
|
/**
|
|
39
39
|
* Track flag override events
|
|
40
40
|
*/
|
|
@@ -51,4 +51,8 @@ export declare class ToolbarAnalytics {
|
|
|
51
51
|
* Track Event clicks
|
|
52
52
|
*/
|
|
53
53
|
trackEventClick(eventName: string): void;
|
|
54
|
+
/**
|
|
55
|
+
* Track Reload on Flag Change toggles
|
|
56
|
+
*/
|
|
57
|
+
trackReloadOnFlagChangeToggle(enabled: boolean): void;
|
|
54
58
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@launchdarkly/toolbar",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.26.0",
|
|
4
4
|
"description": "A React component that provides a developer-friendly toolbar for interacting with LaunchDarkly during development",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"launchdarkly",
|
|
@@ -66,9 +66,9 @@
|
|
|
66
66
|
"@vitest/coverage-v8": "3.2.4",
|
|
67
67
|
"jsdom": "^27.0.0",
|
|
68
68
|
"launchdarkly-js-client-sdk": "^3.9.0",
|
|
69
|
-
"oxlint": "^1.
|
|
69
|
+
"oxlint": "^1.23.0",
|
|
70
70
|
"react": "^19.1.1",
|
|
71
|
-
"storybook": "^9.
|
|
71
|
+
"storybook": "^9.1.12",
|
|
72
72
|
"storybook-addon-rslib": "^2.0.0",
|
|
73
73
|
"storybook-react-rsbuild": "^2.0.0",
|
|
74
74
|
"typescript": "^5.8.3",
|
|
@@ -93,7 +93,7 @@
|
|
|
93
93
|
"@vanilla-extract/webpack-plugin": "^2.3.22",
|
|
94
94
|
"class-variance-authority": "^0.7.1",
|
|
95
95
|
"motion": "^12.23.24",
|
|
96
|
-
"react-aria": "3.
|
|
96
|
+
"react-aria": "3.44.0",
|
|
97
97
|
"react-aria-components": "1.13.0",
|
|
98
98
|
"react-hook-form": "7.59.0",
|
|
99
99
|
"react-router": "7.9.4"
|