Skip to content

Commit

Permalink
deps(web-app-template): Migrate to Ant Design v5
Browse files Browse the repository at this point in the history 
Upgrade web app code to use Ant Design v5, replacing
deprecated API within ORT WebApp reporter code as needed.

Signed-off-by: Thomas Steenbergen <[email protected]>
  • Loading branch information
@tsteenbe
tsteenbe committed Nov 28, 2023
1 parent badbca1 commit ffbb872
Show file tree
Hide file tree
Showing 14 changed files with 1,445 additions and 1,307 deletions.
2 changes: 1 addition & 1 deletion plugins/reporters/web-app-template/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
},
"dependencies": {
"@ant-design/icons": "^5.2.6",
"antd": "^4.16.13",
"antd": "^5.11.4",
"markdown-to-jsx": "^7.3.2",
"memoize-one": "^6.0.0",
"pako": "^2.1.0",
Expand Down
6 changes: 5 additions & 1 deletion plugins/reporters/web-app-template/src/App.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -196,7 +196,11 @@ tr.ant-table-expanded-row, tr.ant-table-expanded-row:hover {
/* === Styling for TableView === */

/* Styling for 'Clear filters' and 'Show / Hide Columns' buttons in TableView */
.ort-table-buttons .ant-btn-group {
.ort-table-buttons .ant-dropdown-button {
overflow: auto;
}

.ort-table-buttons .ant-dropdown-button .ant-btn {
float: right;
margin-bottom: 5px;
z-index: 999;
Expand Down
2 changes: 0 additions & 2 deletions plugins/reporters/web-app-template/src/App.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,6 @@ import AboutModal from './components/AboutModal';
import SummaryView from './components/SummaryView';
import TableView from './components/TableView';
import TreeView from './components/TreeView';
import 'antd/dist/antd.css';
import './App.css';
import store from './store';
import {
Expand Down Expand Up @@ -124,7 +123,6 @@ class ReporterApp extends Component {
<TreeView />
)
}

]}
onChange={this.onChangeTab}
tabBarExtraContent={(
Expand Down
217 changes: 112 additions & 105 deletions plugins/reporters/web-app-template/src/components/AboutModal.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,6 @@ import {
import store from '../store';

const { Item } = Descriptions;
const { TabPane } = Tabs;

SyntaxHighlighter.registerLanguage('yaml', yaml);

Expand All @@ -65,7 +64,7 @@ const AboutModal = (props) => {
return (
<Modal
footer={null}
visible
open={true}
height="90%"
width="90%"
onCancel={
Expand All @@ -74,120 +73,128 @@ const AboutModal = (props) => {
}
}
>
<Tabs animated={false}>
{
webAppOrtResult.hasRepositoryConfiguration()
&& (
<TabPane
tab={(
<Tabs
animated={false}
items={(() => {
var tabItems = [];

if (webAppOrtResult.hasRepositoryConfiguration()) {
tabItems.push({
label: (
<span>
<FileTextOutlined />
Excludes (.ort.yml)
</span>
)}
key="ort-tabs-excludes"
>
<SyntaxHighlighter
language="yaml"
showLineNumbers
style={lioshi}
>
{repositoryConfiguration}
</SyntaxHighlighter>
</TabPane>
)
}
{
webAppOrtResult.hasLabels()
&& (
<TabPane
tab={(
),
key: "ort-tabs-excludes",
children: (
<SyntaxHighlighter
language="yaml"
showLineNumbers
style={lioshi}
>
{repositoryConfiguration}
</SyntaxHighlighter>
)
});
}

if (webAppOrtResult.hasLabels()) {
tabItems.push({
label: (
<span>
<TagsOutlined />
Labels
</span>
)}
key="ort-tabs-labels"
>
<Descriptions
bordered
column={1}
size="small"
>
),
key: "ort-tabs-labels",
children: (
<Descriptions
bordered
column={1}
size="small"
>
{
Object.entries(labels).map(([key, value]) => (
<Item
key={`ort-label-${key}`}
label={key}
>
{
value.startsWith('http')
? (
<a
href={value}
rel="noopener noreferrer"
target="_blank"
>
{value}
</a>
)
: value
}
</Item>
))
}
</Descriptions>
)
});
}

tabItems.push({
label: (
<span>
<InfoCircleOutlined />
About
</span>
),
key: "ort-tabs-about",
children: (
<span>
<a
href="https://github.com/oss-review-toolkit/ort"
rel="noopener noreferrer"
target="_blank"
>
<div
className="ort-about-logo ort-logo"
/>
</a>
<p>
For documentation on how to create this report please see
{' '}
<a
href="https://github.com/oss-review-toolkit/ort"
rel="noopener noreferrer"
target="_blank"
>
https://oss-review-toolkit.org/
</a>
.
</p>
<p>
Licensed under Apache License, Version 2.0 (SPDX: Apache-2.0) but also includes
third-party software components under other open source licenses.
See OSS Review Toolkit code repository for further details.
</p>
{
Object.entries(labels).map(([key, value]) => (
<Item
key={`ort-label-${key}`}
label={key}
>
{
value.startsWith('http')
? (
<a
href={value}
rel="noopener noreferrer"
target="_blank"
>
{value}
</a>
)
: value
}
</Item>
))
!!analyzerStartDate
&& (
<p>
This ORT report is based on an analysis started on
{' '}
{analyzerStartDate}
.
</p>
)
}
</Descriptions>
</TabPane>
)
}
<TabPane
tab={(
<span>
<InfoCircleOutlined />
About
</span>
)}
key="ort-tabs-about"
>
<a
href="https://github.com/oss-review-toolkit/ort"
rel="noopener noreferrer"
target="_blank"
>
<div
className="ort-about-logo ort-logo"
/>
</a>
<p>
For documentation on how to create this report please see
{' '}
<a
href="https://github.com/oss-review-toolkit/ort"
rel="noopener noreferrer"
target="_blank"
>
https://oss-review-toolkit.org/
</a>
.
</p>
<p>
Licensed under Apache License, Version 2.0 (SPDX: Apache-2.0) but also includes
third-party software components under other open source licenses.
See OSS Review Toolkit code repository for further details.
</p>
{
!!analyzerStartDate
&& (
<p>
This ORT report is based on an analysis started on
{' '}
{analyzerStartDate}
.
</p>
</span>
)
}
</TabPane>
</Tabs>
});

return tabItems;
})() }
/>
</Modal>
);
};
Expand Down
Loading

0 comments on commit ffbb872

Please sign in to comment.