@featurevisor/site 0.46.0 → 0.47.1
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/.eslintcache +1 -0
- package/.eslintrc.js +12 -0
- package/.prettierignore +6 -0
- package/CHANGELOG.md +63 -44
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/lib/components/ShowAttribute.d.ts +1 -1
- package/lib/components/ShowFeature.d.ts +1 -1
- package/lib/components/ShowSegment.d.ts +1 -1
- package/package.json +10 -7
- package/prettier.config.js +8 -0
- package/public/index.html +1 -1
- package/src/components/EditLink.tsx +0 -2
- package/src/components/EnvironmentDot.tsx +1 -4
- package/src/components/ExpandConditions.tsx +2 -6
- package/src/components/ExpandRuleSegments.tsx +3 -10
- package/src/components/HistoryTimeline.tsx +27 -46
- package/src/components/LastModified.tsx +1 -4
- package/src/components/PageTitle.tsx +1 -4
- package/src/components/PrettyDate.tsx +2 -6
- package/src/components/ShowAttribute.tsx +1 -1
- package/src/components/ShowFeature.tsx +3 -4
- package/src/components/ShowSegment.tsx +1 -1
|
@@ -2,4 +2,4 @@
|
|
|
2
2
|
export declare function DisplayAttributeOverview(): JSX.Element;
|
|
3
3
|
export declare function DisplayAttributeUsage(): JSX.Element;
|
|
4
4
|
export declare function DisplayAttributeHistory(): JSX.Element;
|
|
5
|
-
export declare function ShowAttribute(
|
|
5
|
+
export declare function ShowAttribute(): JSX.Element;
|
|
@@ -7,4 +7,4 @@ export declare function DisplayFeatureRules(): JSX.Element;
|
|
|
7
7
|
export declare function DisplayFeatureVariations(): JSX.Element;
|
|
8
8
|
export declare function DisplayFeatureVariablesSchema(): JSX.Element;
|
|
9
9
|
export declare function DisplayFeatureHistory(): JSX.Element;
|
|
10
|
-
export declare function ShowFeature(
|
|
10
|
+
export declare function ShowFeature(): JSX.Element;
|
|
@@ -2,4 +2,4 @@
|
|
|
2
2
|
export declare function DisplaySegmentOverview(): JSX.Element;
|
|
3
3
|
export declare function DisplaySegmentUsage(): JSX.Element;
|
|
4
4
|
export declare function DisplaySegmentHistory(): JSX.Element;
|
|
5
|
-
export declare function ShowSegment(
|
|
5
|
+
export declare function ShowSegment(): JSX.Element;
|
package/package.json
CHANGED
|
@@ -1,16 +1,19 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@featurevisor/site",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.47.1",
|
|
4
4
|
"description": "Static site for Featurevisor",
|
|
5
5
|
"main": "dist",
|
|
6
6
|
"scripts": {
|
|
7
|
-
"lint": "echo 'not linting in this package yet'",
|
|
8
7
|
"transpile": "echo 'Nothing to transpile in this package'",
|
|
9
8
|
"dist:js": "webpack --config ./webpack.config.js",
|
|
10
9
|
"dist:css": "tailwindcss -i ./src/index.css -o ./dist/index.css",
|
|
11
10
|
"dist": "npm run dist:js && npm run dist:css",
|
|
12
11
|
"build": "npm run dist",
|
|
13
|
-
"test": "echo 'Nothing to test in types package'"
|
|
12
|
+
"test": "echo 'Nothing to test in types package'",
|
|
13
|
+
"format": "prettier . --check --cache --log-level=warn",
|
|
14
|
+
"lint": "eslint . --cache",
|
|
15
|
+
"format:fix": "prettier . --write --cache --log-level=warn",
|
|
16
|
+
"lint:fix": "eslint . --fix --cache"
|
|
14
17
|
},
|
|
15
18
|
"author": {
|
|
16
19
|
"name": "Fahad Heylaal",
|
|
@@ -31,14 +34,14 @@
|
|
|
31
34
|
],
|
|
32
35
|
"repository": {
|
|
33
36
|
"type": "git",
|
|
34
|
-
"url": "https://github.com/
|
|
37
|
+
"url": "https://github.com/featurevisor/featurevisor.git"
|
|
35
38
|
},
|
|
36
39
|
"publishConfig": {
|
|
37
40
|
"access": "public",
|
|
38
41
|
"registry": "https://registry.npmjs.org/"
|
|
39
42
|
},
|
|
40
43
|
"bugs": {
|
|
41
|
-
"url": "https://github.com/
|
|
44
|
+
"url": "https://github.com/featurevisor/featurevisor/issues"
|
|
42
45
|
},
|
|
43
46
|
"license": "MIT",
|
|
44
47
|
"devDependencies": {
|
|
@@ -56,7 +59,7 @@
|
|
|
56
59
|
"tailwindcss": "^3.3.0"
|
|
57
60
|
},
|
|
58
61
|
"dependencies": {
|
|
59
|
-
"@featurevisor/types": "^0.
|
|
62
|
+
"@featurevisor/types": "^0.47.1"
|
|
60
63
|
},
|
|
61
|
-
"gitHead": "
|
|
64
|
+
"gitHead": "1f71f945cf6bbfe420d41ae03ac205cbf30aba83"
|
|
62
65
|
}
|
package/public/index.html
CHANGED
|
@@ -9,10 +9,7 @@ interface EnvironmentDotProps {
|
|
|
9
9
|
}
|
|
10
10
|
|
|
11
11
|
export function EnvironmentDot(props: EnvironmentDotProps) {
|
|
12
|
-
const enabledInProduction = isEnabledInEnvironment(
|
|
13
|
-
props.feature,
|
|
14
|
-
"production"
|
|
15
|
-
);
|
|
12
|
+
const enabledInProduction = isEnabledInEnvironment(props.feature, "production");
|
|
16
13
|
|
|
17
14
|
if (enabledInProduction) {
|
|
18
15
|
return (
|
|
@@ -44,9 +44,7 @@ export function ExpandConditions(props: ExpandConditionsProps) {
|
|
|
44
44
|
<a href="#" className="text-sm">
|
|
45
45
|
{condition.attribute}
|
|
46
46
|
</a>{" "}
|
|
47
|
-
<span className="text-sm font-semibold">
|
|
48
|
-
{condition.operator}
|
|
49
|
-
</span>{" "}
|
|
47
|
+
<span className="text-sm font-semibold">{condition.operator}</span>{" "}
|
|
50
48
|
<ConditionValue value={condition.value} />
|
|
51
49
|
</>
|
|
52
50
|
) : (
|
|
@@ -72,9 +70,7 @@ export function ExpandConditions(props: ExpandConditionsProps) {
|
|
|
72
70
|
|
|
73
71
|
return (
|
|
74
72
|
<>
|
|
75
|
-
<span className={`rounded-full px-2 py-1 text-sm font-bold ${classes}`}>
|
|
76
|
-
{type}:
|
|
77
|
-
</span>
|
|
73
|
+
<span className={`rounded-full px-2 py-1 text-sm font-bold ${classes}`}>{type}:</span>
|
|
78
74
|
<ExpandConditions conditions={conditions[type]} />
|
|
79
75
|
</>
|
|
80
76
|
);
|
|
@@ -10,8 +10,7 @@ export function ExpandRuleSegments(props: ExpandRuleSegmentsProps) {
|
|
|
10
10
|
if (segments === "*") {
|
|
11
11
|
return (
|
|
12
12
|
<pre>
|
|
13
|
-
<code className="rounded bg-gray-100 px-2 py-1 text-red-400">*</code>
|
|
14
|
-
(everyone)
|
|
13
|
+
<code className="rounded bg-gray-100 px-2 py-1 text-red-400">*</code> (everyone)
|
|
15
14
|
</pre>
|
|
16
15
|
);
|
|
17
16
|
}
|
|
@@ -22,11 +21,7 @@ export function ExpandRuleSegments(props: ExpandRuleSegmentsProps) {
|
|
|
22
21
|
{segments.map((segment: any, index: number) => {
|
|
23
22
|
return (
|
|
24
23
|
<li key={index} className="py-1">
|
|
25
|
-
{typeof segment === "string" ?
|
|
26
|
-
segment
|
|
27
|
-
) : (
|
|
28
|
-
<ExpandRuleSegments segments={segment} />
|
|
29
|
-
)}
|
|
24
|
+
{typeof segment === "string" ? segment : <ExpandRuleSegments segments={segment} />}
|
|
30
25
|
</li>
|
|
31
26
|
);
|
|
32
27
|
})}
|
|
@@ -47,9 +42,7 @@ export function ExpandRuleSegments(props: ExpandRuleSegmentsProps) {
|
|
|
47
42
|
|
|
48
43
|
return (
|
|
49
44
|
<>
|
|
50
|
-
<span className={`rounded-full px-2 py-1 text-sm font-bold ${classes}`}>
|
|
51
|
-
{type}:
|
|
52
|
-
</span>
|
|
45
|
+
<span className={`rounded-full px-2 py-1 text-sm font-bold ${classes}`}>{type}:</span>
|
|
53
46
|
<ExpandRuleSegments segments={segments[type]} />
|
|
54
47
|
</>
|
|
55
48
|
);
|
|
@@ -19,8 +19,7 @@ function Activity(props) {
|
|
|
19
19
|
|
|
20
20
|
return (
|
|
21
21
|
<>
|
|
22
|
-
<span className="font-semibold text-gray-600">{entry.author}</span>{" "}
|
|
23
|
-
updated{" "}
|
|
22
|
+
<span className="font-semibold text-gray-600">{entry.author}</span> updated{" "}
|
|
24
23
|
{entry.entities.length === 1 ? (
|
|
25
24
|
<>
|
|
26
25
|
{entry.entities[0].type}{" "}
|
|
@@ -33,11 +32,7 @@ function Activity(props) {
|
|
|
33
32
|
)}{" "}
|
|
34
33
|
on{" "}
|
|
35
34
|
<a
|
|
36
|
-
href={
|
|
37
|
-
links
|
|
38
|
-
? links.commit.replace("{{hash}}", entry.commit)
|
|
39
|
-
: `#${entry.commit}`
|
|
40
|
-
}
|
|
35
|
+
href={links ? links.commit.replace("{{hash}}", entry.commit) : `#${entry.commit}`}
|
|
41
36
|
target="_blank"
|
|
42
37
|
className="font-semibold text-gray-600"
|
|
43
38
|
>
|
|
@@ -60,11 +55,7 @@ function Activity(props) {
|
|
|
60
55
|
|
|
61
56
|
{!showAll && entry.entities.length > initialMaxEntitiesCount && (
|
|
62
57
|
<li key="show-all">
|
|
63
|
-
<a
|
|
64
|
-
href="#"
|
|
65
|
-
className="font-bold underline"
|
|
66
|
-
onClick={() => setShowAll(true)}
|
|
67
|
-
>
|
|
58
|
+
<a href="#" className="font-bold underline" onClick={() => setShowAll(true)}>
|
|
68
59
|
Show all
|
|
69
60
|
</a>
|
|
70
61
|
</li>
|
|
@@ -102,9 +93,7 @@ export function HistoryTimeline(props: HistoryTimelineProps) {
|
|
|
102
93
|
|
|
103
94
|
if (props.entityType && props.entityKey) {
|
|
104
95
|
return entry.entities.some(
|
|
105
|
-
(entity: any) =>
|
|
106
|
-
entity.type === props.entityType &&
|
|
107
|
-
entity.key === props.entityKey
|
|
96
|
+
(entity: any) => entity.type === props.entityType && entity.key === props.entityKey,
|
|
108
97
|
);
|
|
109
98
|
}
|
|
110
99
|
|
|
@@ -119,47 +108,39 @@ export function HistoryTimeline(props: HistoryTimelineProps) {
|
|
|
119
108
|
|
|
120
109
|
return (
|
|
121
110
|
<div className={props.className || ""}>
|
|
122
|
-
{entriesToRender.length === 0 &&
|
|
123
|
-
<Alert type="warning">No history found.</Alert>
|
|
124
|
-
)}
|
|
111
|
+
{entriesToRender.length === 0 && <Alert type="warning">No history found.</Alert>}
|
|
125
112
|
|
|
126
113
|
{entriesToRender.length > 0 && (
|
|
127
114
|
<div>
|
|
128
115
|
<ul className="mt-8">
|
|
129
116
|
<li>
|
|
130
|
-
{entriesToRender
|
|
131
|
-
.
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
<div className="flex h-8 w-8 items-center justify-center rounded-full bg-gray-100 ring-4 ring-white">
|
|
146
|
-
<UserCircleIcon className="h-5 w-5 text-gray-500" />
|
|
147
|
-
</div>
|
|
117
|
+
{entriesToRender.slice(0, page * entriesPerPage).map((entry: any, index) => {
|
|
118
|
+
const isNotLast = entriesToRender.length !== index + 1;
|
|
119
|
+
|
|
120
|
+
return (
|
|
121
|
+
<div className="relative pb-8">
|
|
122
|
+
{isNotLast ? (
|
|
123
|
+
<span className="absolute left-4 top-5 -ml-px h-full w-0.5 bg-gray-200" />
|
|
124
|
+
) : (
|
|
125
|
+
""
|
|
126
|
+
)}
|
|
127
|
+
<div className="relative flex space-x-3">
|
|
128
|
+
<div>
|
|
129
|
+
<div className="relative">
|
|
130
|
+
<div className="flex h-8 w-8 items-center justify-center rounded-full bg-gray-100 ring-4 ring-white">
|
|
131
|
+
<UserCircleIcon className="h-5 w-5 text-gray-500" />
|
|
148
132
|
</div>
|
|
149
133
|
</div>
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
showTime={props.showTime}
|
|
155
|
-
links={links}
|
|
156
|
-
/>
|
|
157
|
-
</div>
|
|
134
|
+
</div>
|
|
135
|
+
<div className="min-w-0 flex-1 py-1.5">
|
|
136
|
+
<div className="text-sm text-gray-500">
|
|
137
|
+
<Activity entry={entry} showTime={props.showTime} links={links} />
|
|
158
138
|
</div>
|
|
159
139
|
</div>
|
|
160
140
|
</div>
|
|
161
|
-
|
|
162
|
-
|
|
141
|
+
</div>
|
|
142
|
+
);
|
|
143
|
+
})}
|
|
163
144
|
</li>
|
|
164
145
|
</ul>
|
|
165
146
|
|
|
@@ -17,10 +17,7 @@ export function LastModified(props: any) {
|
|
|
17
17
|
return (
|
|
18
18
|
<p className="inline-flex rounded-full px-2 text-xs leading-5 text-gray-500">
|
|
19
19
|
Last modified by
|
|
20
|
-
<span className="pl-1 pr-1 font-semibold text-gray-600">
|
|
21
|
-
{lastModified.author}
|
|
22
|
-
</span>{" "}
|
|
23
|
-
on
|
|
20
|
+
<span className="pl-1 pr-1 font-semibold text-gray-600">{lastModified.author}</span> on
|
|
24
21
|
<span className="pl-1 font-semibold text-gray-600">
|
|
25
22
|
<PrettyDate date={lastModified.timestamp} />
|
|
26
23
|
</span>
|
|
@@ -5,9 +5,7 @@ function getPrettyDate(props) {
|
|
|
5
5
|
const date = new Date(props.date);
|
|
6
6
|
|
|
7
7
|
const day = date.getDate();
|
|
8
|
-
const month = new Intl.DateTimeFormat("en-US", { month: "short" }).format(
|
|
9
|
-
date
|
|
10
|
-
);
|
|
8
|
+
const month = new Intl.DateTimeFormat("en-US", { month: "short" }).format(date);
|
|
11
9
|
const year = date.getFullYear();
|
|
12
10
|
|
|
13
11
|
const ordinalSuffix = (day: number) => {
|
|
@@ -30,9 +28,7 @@ function getPrettyDate(props) {
|
|
|
30
28
|
const minutes = date.getMinutes();
|
|
31
29
|
const ampm = hours >= 12 ? "PM" : "AM";
|
|
32
30
|
const hour12 = hours % 12 || 12;
|
|
33
|
-
const prettyTime = `${hour12}:${minutes
|
|
34
|
-
.toString()
|
|
35
|
-
.padStart(2, "0")}${ampm}`;
|
|
31
|
+
const prettyTime = `${hour12}:${minutes.toString().padStart(2, "0")}${ampm}`;
|
|
36
32
|
|
|
37
33
|
return (
|
|
38
34
|
<>
|
|
@@ -103,7 +103,7 @@ export function DisplayAttributeHistory() {
|
|
|
103
103
|
return <HistoryTimeline entityType="attribute" entityKey={attribute.key} />;
|
|
104
104
|
}
|
|
105
105
|
|
|
106
|
-
export function ShowAttribute(
|
|
106
|
+
export function ShowAttribute() {
|
|
107
107
|
const { attributeKey } = useParams();
|
|
108
108
|
const { data } = useSearchIndex();
|
|
109
109
|
const links = data?.links;
|
|
@@ -168,7 +168,7 @@ export function DisplayFeatureForce() {
|
|
|
168
168
|
const { feature } = useOutletContext() as any;
|
|
169
169
|
const environmentKeys = Object.keys(feature.environments).sort();
|
|
170
170
|
|
|
171
|
-
const environmentTabs = environmentKeys.map((environmentKey
|
|
171
|
+
const environmentTabs = environmentKeys.map((environmentKey) => {
|
|
172
172
|
return {
|
|
173
173
|
title: environmentKey,
|
|
174
174
|
to: `/features/${feature.key}/force/${environmentKey}`,
|
|
@@ -260,7 +260,7 @@ export function DisplayFeatureRules() {
|
|
|
260
260
|
const { feature } = useOutletContext() as any;
|
|
261
261
|
const environmentKeys = Object.keys(feature.environments).sort();
|
|
262
262
|
|
|
263
|
-
const environmentTabs = environmentKeys.map((environmentKey
|
|
263
|
+
const environmentTabs = environmentKeys.map((environmentKey) => {
|
|
264
264
|
return {
|
|
265
265
|
title: environmentKey,
|
|
266
266
|
to: `/features/${feature.key}/rules/${environmentKey}`,
|
|
@@ -425,7 +425,7 @@ export function DisplayFeatureHistory() {
|
|
|
425
425
|
return <HistoryTimeline entityType="feature" entityKey={feature.key} />;
|
|
426
426
|
}
|
|
427
427
|
|
|
428
|
-
export function ShowFeature(
|
|
428
|
+
export function ShowFeature() {
|
|
429
429
|
const { featureKey } = useParams();
|
|
430
430
|
const { data } = useSearchIndex();
|
|
431
431
|
const feature = data?.entities.features.find((f) => f.key === featureKey);
|
|
@@ -440,7 +440,6 @@ export function ShowFeature(props) {
|
|
|
440
440
|
title: "Overview",
|
|
441
441
|
to: `/features/${featureKey}`,
|
|
442
442
|
},
|
|
443
|
-
,
|
|
444
443
|
{
|
|
445
444
|
title: "Variations",
|
|
446
445
|
to: `/features/${featureKey}/variations`,
|
|
@@ -83,7 +83,7 @@ export function DisplaySegmentHistory() {
|
|
|
83
83
|
return <HistoryTimeline entityType="segment" entityKey={segment.key} />;
|
|
84
84
|
}
|
|
85
85
|
|
|
86
|
-
export function ShowSegment(
|
|
86
|
+
export function ShowSegment() {
|
|
87
87
|
const { segmentKey } = useParams();
|
|
88
88
|
const { data } = useSearchIndex();
|
|
89
89
|
const links = data?.links;
|