@carbon/upgrade 11.17.0 → 11.18.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/cli.js +569 -453
- package/package.json +2 -2
- package/transforms/__testfixtures__/featureflag-deprecate-flags-prop.input.js +134 -0
- package/transforms/__testfixtures__/featureflag-deprecate-flags-prop.output.js +124 -0
- package/transforms/__tests__/featureflag-deprecate-flags-prop-test.js +12 -0
- package/transforms/featureflag-deprecate-flags-prop.js +80 -0
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@carbon/upgrade",
|
|
3
3
|
"description": "A tool for upgrading Carbon versions",
|
|
4
|
-
"version": "11.
|
|
4
|
+
"version": "11.18.0",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"bin": {
|
|
7
7
|
"carbon-upgrade": "./bin/carbon-upgrade.js"
|
|
@@ -61,5 +61,5 @@
|
|
|
61
61
|
"@ibm/telemetry-js": "^1.5.0",
|
|
62
62
|
"jscodeshift": "^17.0.0"
|
|
63
63
|
},
|
|
64
|
-
"gitHead": "
|
|
64
|
+
"gitHead": "ea46616d9ea6afb2f14b862a344203e54d19e5a0"
|
|
65
65
|
}
|
|
@@ -0,0 +1,134 @@
|
|
|
1
|
+
import { FeatureFlags } from '../FeatureFlags';
|
|
2
|
+
import {
|
|
3
|
+
RadioTile,
|
|
4
|
+
TileGroup,
|
|
5
|
+
TreeView,
|
|
6
|
+
VStack,
|
|
7
|
+
TreeNode,
|
|
8
|
+
OverflowMenu,
|
|
9
|
+
MenuItem,
|
|
10
|
+
} from '@carbon/react';
|
|
11
|
+
import { Document, Folder } from '@carbon/icons-react';
|
|
12
|
+
export const EnableV12TileDefaultIconsFlag = () => {
|
|
13
|
+
return (
|
|
14
|
+
<FeatureFlags flags={{ 'enable-v12-tile-default-icons': true }}>
|
|
15
|
+
<TileGroup legend="TestGroup" name="test">
|
|
16
|
+
<RadioTile id="test-1" value="test-1">
|
|
17
|
+
Option 1
|
|
18
|
+
</RadioTile>
|
|
19
|
+
<RadioTile id="test-2" value="test-2">
|
|
20
|
+
Option 2
|
|
21
|
+
</RadioTile>
|
|
22
|
+
</TileGroup>
|
|
23
|
+
</FeatureFlags>
|
|
24
|
+
);
|
|
25
|
+
};
|
|
26
|
+
export const EnableExperimentalFocusWrapWithoutSentinels = () => {
|
|
27
|
+
return (
|
|
28
|
+
// prettier-ignore
|
|
29
|
+
<FeatureFlags flags={{ 'enable-experimental-focus-wrap-without-sentinels': true }}>
|
|
30
|
+
<ActionableNotification
|
|
31
|
+
title="Notification title"
|
|
32
|
+
subtitle="Subtitle text goes here"
|
|
33
|
+
closeOnEscape
|
|
34
|
+
inline={false}
|
|
35
|
+
actionButtonLabel="Action"
|
|
36
|
+
/>
|
|
37
|
+
</FeatureFlags>
|
|
38
|
+
);
|
|
39
|
+
};
|
|
40
|
+
export const EnableTreeviewControllable = (args) => {
|
|
41
|
+
return (
|
|
42
|
+
<div>
|
|
43
|
+
<FeatureFlags flags={{ 'enable-treeview-controllable': true }}>
|
|
44
|
+
<TreeView
|
|
45
|
+
label="Tree View"
|
|
46
|
+
active={true}
|
|
47
|
+
onActivate={() => {
|
|
48
|
+
console.log('test');
|
|
49
|
+
}}
|
|
50
|
+
selected={[]}
|
|
51
|
+
onSelect={() => {
|
|
52
|
+
console.log('test');
|
|
53
|
+
}}>
|
|
54
|
+
{renderTree(nodes)}
|
|
55
|
+
</TreeView>
|
|
56
|
+
</FeatureFlags>
|
|
57
|
+
</div>
|
|
58
|
+
);
|
|
59
|
+
};
|
|
60
|
+
export const EnableV12Overflowmenu = () => {
|
|
61
|
+
return (
|
|
62
|
+
<FeatureFlags flags={{ 'enable-v12-overflowmenu': true }}>
|
|
63
|
+
<OverflowMenu autoAlign={true}>
|
|
64
|
+
<MenuItem label="Stop app" />
|
|
65
|
+
<MenuItem label="Restart app" />
|
|
66
|
+
<MenuItem label="Rename app" />
|
|
67
|
+
<MenuItem label="Edit routes and access" />
|
|
68
|
+
|
|
69
|
+
<MenuItem label="Delete app" kind="danger" />
|
|
70
|
+
</OverflowMenu>
|
|
71
|
+
</FeatureFlags>
|
|
72
|
+
);
|
|
73
|
+
};
|
|
74
|
+
export const EnableV12TileRadioIcons = () => {
|
|
75
|
+
return (
|
|
76
|
+
<FeatureFlags flags={{ 'enable-v12-tile-radio-icons': true }}>
|
|
77
|
+
<TileGroup legend="TestGroup" name="test">
|
|
78
|
+
<RadioTile id="test-1" value="test-1">
|
|
79
|
+
Option 1
|
|
80
|
+
</RadioTile>
|
|
81
|
+
<RadioTile id="test-2" value="test-2">
|
|
82
|
+
Option 2
|
|
83
|
+
</RadioTile>
|
|
84
|
+
</TileGroup>
|
|
85
|
+
</FeatureFlags>
|
|
86
|
+
);
|
|
87
|
+
};
|
|
88
|
+
export const TestRegularJsx = () => {
|
|
89
|
+
return <div className={wrapperClasses}></div>;
|
|
90
|
+
};
|
|
91
|
+
export const CombinedFlags = () => {
|
|
92
|
+
return (
|
|
93
|
+
// prettier-ignore
|
|
94
|
+
<FeatureFlags
|
|
95
|
+
flags={{
|
|
96
|
+
'enable-v12-tile-default-icons': true,
|
|
97
|
+
'enable-v12-tile-radio-icons': true,
|
|
98
|
+
'enable-v12-overflowmenu': true,
|
|
99
|
+
'enable-treeview-controllable': true,
|
|
100
|
+
'enable-experimental-focus-wrap-without-sentinels': true,
|
|
101
|
+
'enable-v11-release': true,
|
|
102
|
+
'enable-css-custom-properties': true,
|
|
103
|
+
'enable-css-grid': true,
|
|
104
|
+
}}>
|
|
105
|
+
<TileGroup legend="TestGroup" name="test">
|
|
106
|
+
<RadioTile id="test-1" value="test-1">
|
|
107
|
+
Option 1
|
|
108
|
+
</RadioTile>
|
|
109
|
+
<RadioTile id="test-2" value="test-2">
|
|
110
|
+
Option 2
|
|
111
|
+
</RadioTile>
|
|
112
|
+
</TileGroup>
|
|
113
|
+
</FeatureFlags>
|
|
114
|
+
);
|
|
115
|
+
};
|
|
116
|
+
export const OldFlags = () => {
|
|
117
|
+
return (
|
|
118
|
+
<FeatureFlags
|
|
119
|
+
flags={{
|
|
120
|
+
'enable-v11-release': true,
|
|
121
|
+
'enable-css-custom-properties': true,
|
|
122
|
+
'enable-css-grid': true,
|
|
123
|
+
}}>
|
|
124
|
+
<TileGroup legend="TestGroup" name="test">
|
|
125
|
+
<RadioTile id="test-1" value="test-1">
|
|
126
|
+
Option 1
|
|
127
|
+
</RadioTile>
|
|
128
|
+
<RadioTile id="test-2" value="test-2">
|
|
129
|
+
Option 2
|
|
130
|
+
</RadioTile>
|
|
131
|
+
</TileGroup>
|
|
132
|
+
</FeatureFlags>
|
|
133
|
+
);
|
|
134
|
+
};
|
|
@@ -0,0 +1,124 @@
|
|
|
1
|
+
import { FeatureFlags } from '../FeatureFlags';
|
|
2
|
+
import {
|
|
3
|
+
RadioTile,
|
|
4
|
+
TileGroup,
|
|
5
|
+
TreeView,
|
|
6
|
+
VStack,
|
|
7
|
+
TreeNode,
|
|
8
|
+
OverflowMenu,
|
|
9
|
+
MenuItem,
|
|
10
|
+
} from '@carbon/react';
|
|
11
|
+
import { Document, Folder } from '@carbon/icons-react';
|
|
12
|
+
export const EnableV12TileDefaultIconsFlag = () => {
|
|
13
|
+
return (
|
|
14
|
+
(<FeatureFlags enableV12TileDefaultIcons>
|
|
15
|
+
<TileGroup legend="TestGroup" name="test">
|
|
16
|
+
<RadioTile id="test-1" value="test-1">
|
|
17
|
+
Option 1
|
|
18
|
+
</RadioTile>
|
|
19
|
+
<RadioTile id="test-2" value="test-2">
|
|
20
|
+
Option 2
|
|
21
|
+
</RadioTile>
|
|
22
|
+
</TileGroup>
|
|
23
|
+
</FeatureFlags>)
|
|
24
|
+
);
|
|
25
|
+
};
|
|
26
|
+
export const EnableExperimentalFocusWrapWithoutSentinels = () => {
|
|
27
|
+
return (
|
|
28
|
+
// prettier-ignore
|
|
29
|
+
(<FeatureFlags enableExperimentalFocusWrapWithoutSentinels>
|
|
30
|
+
<ActionableNotification
|
|
31
|
+
title="Notification title"
|
|
32
|
+
subtitle="Subtitle text goes here"
|
|
33
|
+
closeOnEscape
|
|
34
|
+
inline={false}
|
|
35
|
+
actionButtonLabel="Action"
|
|
36
|
+
/>
|
|
37
|
+
</FeatureFlags>)
|
|
38
|
+
);
|
|
39
|
+
};
|
|
40
|
+
export const EnableTreeviewControllable = (args) => {
|
|
41
|
+
return (
|
|
42
|
+
(<div>
|
|
43
|
+
<FeatureFlags enableTreeviewControllable>
|
|
44
|
+
<TreeView
|
|
45
|
+
label="Tree View"
|
|
46
|
+
active={true}
|
|
47
|
+
onActivate={() => {
|
|
48
|
+
console.log('test');
|
|
49
|
+
}}
|
|
50
|
+
selected={[]}
|
|
51
|
+
onSelect={() => {
|
|
52
|
+
console.log('test');
|
|
53
|
+
}}>
|
|
54
|
+
{renderTree(nodes)}
|
|
55
|
+
</TreeView>
|
|
56
|
+
</FeatureFlags>
|
|
57
|
+
</div>)
|
|
58
|
+
);
|
|
59
|
+
};
|
|
60
|
+
export const EnableV12Overflowmenu = () => {
|
|
61
|
+
return (
|
|
62
|
+
(<FeatureFlags enableV12Overflowmenu>
|
|
63
|
+
<OverflowMenu autoAlign={true}>
|
|
64
|
+
<MenuItem label="Stop app" />
|
|
65
|
+
<MenuItem label="Restart app" />
|
|
66
|
+
<MenuItem label="Rename app" />
|
|
67
|
+
<MenuItem label="Edit routes and access" />
|
|
68
|
+
|
|
69
|
+
<MenuItem label="Delete app" kind="danger" />
|
|
70
|
+
</OverflowMenu>
|
|
71
|
+
</FeatureFlags>)
|
|
72
|
+
);
|
|
73
|
+
};
|
|
74
|
+
export const EnableV12TileRadioIcons = () => {
|
|
75
|
+
return (
|
|
76
|
+
(<FeatureFlags enableV12TileRadioIcons>
|
|
77
|
+
<TileGroup legend="TestGroup" name="test">
|
|
78
|
+
<RadioTile id="test-1" value="test-1">
|
|
79
|
+
Option 1
|
|
80
|
+
</RadioTile>
|
|
81
|
+
<RadioTile id="test-2" value="test-2">
|
|
82
|
+
Option 2
|
|
83
|
+
</RadioTile>
|
|
84
|
+
</TileGroup>
|
|
85
|
+
</FeatureFlags>)
|
|
86
|
+
);
|
|
87
|
+
};
|
|
88
|
+
export const TestRegularJsx = () => {
|
|
89
|
+
return <div className={wrapperClasses}></div>;
|
|
90
|
+
};
|
|
91
|
+
export const CombinedFlags = () => {
|
|
92
|
+
return (
|
|
93
|
+
// prettier-ignore
|
|
94
|
+
(<FeatureFlags
|
|
95
|
+
enableV12TileDefaultIcons
|
|
96
|
+
enableV12TileRadioIcons
|
|
97
|
+
enableV12Overflowmenu
|
|
98
|
+
enableTreeviewControllable
|
|
99
|
+
enableExperimentalFocusWrapWithoutSentinels>
|
|
100
|
+
<TileGroup legend="TestGroup" name="test">
|
|
101
|
+
<RadioTile id="test-1" value="test-1">
|
|
102
|
+
Option 1
|
|
103
|
+
</RadioTile>
|
|
104
|
+
<RadioTile id="test-2" value="test-2">
|
|
105
|
+
Option 2
|
|
106
|
+
</RadioTile>
|
|
107
|
+
</TileGroup>
|
|
108
|
+
</FeatureFlags>)
|
|
109
|
+
);
|
|
110
|
+
};
|
|
111
|
+
export const OldFlags = () => {
|
|
112
|
+
return (
|
|
113
|
+
(<FeatureFlags>
|
|
114
|
+
<TileGroup legend="TestGroup" name="test">
|
|
115
|
+
<RadioTile id="test-1" value="test-1">
|
|
116
|
+
Option 1
|
|
117
|
+
</RadioTile>
|
|
118
|
+
<RadioTile id="test-2" value="test-2">
|
|
119
|
+
Option 2
|
|
120
|
+
</RadioTile>
|
|
121
|
+
</TileGroup>
|
|
122
|
+
</FeatureFlags>)
|
|
123
|
+
);
|
|
124
|
+
};
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 2016, 2023
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
'use strict';
|
|
9
|
+
|
|
10
|
+
const { defineTest } = require('jscodeshift/dist/testUtils');
|
|
11
|
+
|
|
12
|
+
defineTest(__dirname, 'featureflag-deprecate-flags-prop');
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 2024
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*
|
|
7
|
+
* Migrate the `flags` object prop to individual boolean props
|
|
8
|
+
*
|
|
9
|
+
* Transforms:
|
|
10
|
+
*
|
|
11
|
+
* <FeatureFlags flags={{ 'enable-v12-tile-default-icons': true }}>
|
|
12
|
+
*
|
|
13
|
+
* Into:
|
|
14
|
+
*
|
|
15
|
+
* <FeatureFlags enableV12TileDefaultIcons>
|
|
16
|
+
*/
|
|
17
|
+
|
|
18
|
+
'use strict';
|
|
19
|
+
|
|
20
|
+
const defaultOptions = {
|
|
21
|
+
quote: 'single',
|
|
22
|
+
trailingComma: true,
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
//This list can be updated as needed, if any flags are made true by default
|
|
26
|
+
const flagsToRemove = [
|
|
27
|
+
'enable-v11-release',
|
|
28
|
+
'enable-css-custom-properties',
|
|
29
|
+
'enable-css-grid',
|
|
30
|
+
];
|
|
31
|
+
|
|
32
|
+
function transform(fileInfo, api, options) {
|
|
33
|
+
const { jscodeshift: j } = api;
|
|
34
|
+
const root = j(fileInfo.source);
|
|
35
|
+
const printOptions = options.printOptions || defaultOptions;
|
|
36
|
+
if (
|
|
37
|
+
!root.find(j.JSXOpeningElement, { name: { name: 'FeatureFlags' } }).size()
|
|
38
|
+
) {
|
|
39
|
+
return null; // if no FeatureFlags found, don't modify & return the file
|
|
40
|
+
}
|
|
41
|
+
root
|
|
42
|
+
.find(j.JSXOpeningElement, { name: { name: 'FeatureFlags' } })
|
|
43
|
+
.forEach((path) => {
|
|
44
|
+
const flagsAttribute = path.node.attributes.find(
|
|
45
|
+
(attr) => attr.type === 'JSXAttribute' && attr.name.name === 'flags'
|
|
46
|
+
);
|
|
47
|
+
|
|
48
|
+
if (flagsAttribute?.value?.expression?.type === 'ObjectExpression') {
|
|
49
|
+
const properties = flagsAttribute.value.expression.properties;
|
|
50
|
+
|
|
51
|
+
// Filter out flags to remove
|
|
52
|
+
const filteredProperties = properties.filter((prop) => {
|
|
53
|
+
const keyName =
|
|
54
|
+
prop.key.type === 'Identifier' ? prop.key.name : prop.key.value;
|
|
55
|
+
return !flagsToRemove.includes(keyName);
|
|
56
|
+
});
|
|
57
|
+
|
|
58
|
+
// Convert remaining flags to boolean props
|
|
59
|
+
const newAttributes = filteredProperties
|
|
60
|
+
.filter((flag) => flag.value.value === true)
|
|
61
|
+
.map((flag) => {
|
|
62
|
+
const flagName =
|
|
63
|
+
flag.key.type === 'Identifier' ? flag.key.name : flag.key.value;
|
|
64
|
+
const propName = flagName.replace(/-(\w)/g, (_, c) =>
|
|
65
|
+
c.toUpperCase()
|
|
66
|
+
);
|
|
67
|
+
return j.jsxAttribute(j.jsxIdentifier(propName));
|
|
68
|
+
});
|
|
69
|
+
|
|
70
|
+
path.node.attributes = [
|
|
71
|
+
...path.node.attributes.filter((attr) => attr.name.name !== 'flags'),
|
|
72
|
+
...newAttributes,
|
|
73
|
+
];
|
|
74
|
+
}
|
|
75
|
+
});
|
|
76
|
+
|
|
77
|
+
return root.toSource(printOptions);
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
module.exports = transform;
|