Skip to content
Permalink

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also or learn more about diff comparisons.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also . Learn more about diff comparisons here.
base repository: AWeber-Imbi/imbi-ui
Failed to load repositories. Confirm that selected base ref is valid, then try again.
Loading
base: 8d13be7de8aa8a0e0fb42e8b5323938628019fcd
Choose a base ref
...
head repository: AWeber-Imbi/imbi-ui
Failed to load repositories. Confirm that selected head ref is valid, then try again.
Loading
compare: 616e3ec04a0fe1012fe0441b8a9eb470d800d761
Choose a head ref

Commits on Aug 19, 2024

  1. Update to react 18

    in-op committed Aug 19, 2024
    Copy the full SHA
    b2d86f7 View commit details
  2. Replace defaultProps with JS default parameters

    This also cleans up a few propTypes that were unused.
    in-op committed Aug 19, 2024
    Copy the full SHA
    c43db7a View commit details
  3. Replace class components with function components

    This also removes the remaining defaultProps
    in-op committed Aug 19, 2024
    Copy the full SHA
    d98a8f2 View commit details
  4. Remove await on httpGet

    in-op committed Aug 19, 2024
    Copy the full SHA
    4fd7d9e View commit details
  5. Update testing libraries

    The only test code change needed here was to wrap any DOM manipulation
    into the act() callback and update the jest-dom import. See
    https://react.dev/reference/react/act
    in-op committed Aug 19, 2024
    Copy the full SHA
    35af0e1 View commit details
  6. Update node version in CI tests

    in-op committed Aug 19, 2024
    Copy the full SHA
    c0abb0f View commit details

Commits on Aug 20, 2024

  1. Merge pull request #101 from in-op/react-18

    React 18 upgrade
    dave-shawley authored Aug 20, 2024
    Copy the full SHA
    95c00fe View commit details

Commits on Aug 21, 2024

  1. Copy the full SHA
    827cc45 View commit details
  2. Add .npmrc to gitignore

    This will help me keep our internal NPM repo out of yarns way.
    dave-shawley committed Aug 21, 2024
    Copy the full SHA
    45e36e1 View commit details
  3. Merge pull request #102 from dave-shawley/bye-bye-react-hot-loader

    Goodbye react-hot-loader, Hello react-refresh!
    in-op authored Aug 21, 2024
    Copy the full SHA
    0058de7 View commit details

Commits on Aug 22, 2024

  1. Copy the full SHA
    b19b041 View commit details

Commits on Aug 26, 2024

  1. Merge pull request #103 from dave-shawley/outdated-projects-report

    Add Outdated Projects report
    in-op authored Aug 26, 2024
    Copy the full SHA
    514b5f5 View commit details
  2. Added missing port to webpack config

    I think that this changed when I switched to react-refresh in 827cc45.
    Everything seemed to work but there was a warning/error in the console
    about the websocket being disconnected on `ws://localhost:8000/ws`. I
    noticed that my imbi api was receiving requests for `/ws`. Explicitly
    setting the port to 8080 fixed it.
    dave-shawley committed Aug 26, 2024
    Copy the full SHA
    95eaee9 View commit details
  3. Rename Component Usage report

    Decided to rename this report to "Components" and remove the version
    count column since it was little more than clutter. Also added a click
    handler that links to a search for projects that use the component.
    dave-shawley committed Aug 26, 2024
    Copy the full SHA
    6d7ac7c View commit details
  4. Move data out of Report component

    This is required to add any sort of filtering on the data set. I added a
    separate hook that is invoked when data needs to be sorted.
    dave-shawley committed Aug 26, 2024
    Copy the full SHA
    43b00e4 View commit details
  5. Add "hide unscored" checkbox in components report

    The filter text box made it into this commit as well though it is not
    wired up yet.
    dave-shawley committed Aug 26, 2024
    Copy the full SHA
    bd18c6b View commit details
  6. Copy the full SHA
    6425bd7 View commit details
  7. Copy the full SHA
    fd39932 View commit details
  8. Make NavigableTable and Report params consistent

    Also moved the simple single column sorter into utils since it was
    duplicated.
    dave-shawley committed Aug 26, 2024
    Copy the full SHA
    b0c7bc4 View commit details
  9. Copy the full SHA
    15065ab View commit details
  10. Copy the full SHA
    bc7c0f7 View commit details
  11. Merge pull request #105 from dave-shawley/wildcard-searching

    Add wildcards to single word project searches
    in-op authored Aug 26, 2024
    Copy the full SHA
    dbf44f6 View commit details

Commits on Aug 28, 2024

  1. Fix the global search box on project search page

    Entering a search into the *global* search box navigates to the project
    search page with the filter added to the URL. Doing this while *on the
    project search page* would update the URL but not the filter since the
    query params are only read on initial render (eg, `useCallback({}, [])`).
    
    Adding a small snippet that sets the filter & refresh state when the
    location is updated and the f search param is included and does not
    match the current filter seems to address the issue.
    dave-shawley committed Aug 28, 2024
    Copy the full SHA
    fedecc1 View commit details
  2. Copy the full SHA
    3a0c417 View commit details
  3. Copy the full SHA
    c0670d3 View commit details
  4. Merge pull request #104 from dave-shawley/scored-components-report

    Scored components report
    in-op authored Aug 28, 2024
    Copy the full SHA
    5447f8e View commit details
  5. Copy the full SHA
    45333ed View commit details

Commits on Aug 29, 2024

  1. Merge pull request #106 from dave-shawley/fix-global-project-search

    Fix the global search box on project search page
    in-op authored Aug 29, 2024
    Copy the full SHA
    616e3ec View commit details
Showing with 983 additions and 1,063 deletions.
  1. +0 −12 .babelrc
  2. +1 −1 .depcheckrc
  3. +1 −1 .github/workflows/ui-testing.yml
  4. +1 −0 .gitignore
  5. +17 −0 babel.config.js
  6. +8 −7 package.json
  7. +38 −6 public/locales/en.js
  8. +17 −25 src/js/components/Alert/Alert.jsx
  9. +1 −1 src/js/components/Alert/Alert.test.js
  10. +14 −18 src/js/components/Backdrop/Backdrop.jsx
  11. +19 −29 src/js/components/Badge/Badge.jsx
  12. +29 −30 src/js/components/Button/Button.jsx
  13. +1 −1 src/js/components/Button/Button.test.js
  14. +2 −6 src/js/components/CRUD/CRUD.jsx
  15. +9 −11 src/js/components/Card/Card.jsx
  16. +25 −27 src/js/components/Chart/Line.jsx
  17. +13 −19 src/js/components/CodeBlock/CodeBlock.jsx
  18. +8 −10 src/js/components/Components.jsx
  19. +3 −6 src/js/components/ContentArea/ContentArea.jsx
  20. +2 −7 src/js/components/ContentArea/PageHeader.jsx
  21. +2 −4 src/js/components/DescriptionList/DescriptionList.jsx
  22. +9 −2 src/js/components/Form/Checkbox.jsx
  23. +6 −12 src/js/components/Form/DatePicker.jsx
  24. +6 −12 src/js/components/Form/DateTimePicker.jsx
  25. +6 −14 src/js/components/Form/Field.jsx
  26. +1 −1 src/js/components/Form/Field.test.jsx
  27. +2 −4 src/js/components/Form/Footer.jsx
  28. +6 −12 src/js/components/Form/IconSelect.jsx
  29. +6 −4 src/js/components/Form/IconSelect.test.js
  30. +1 −5 src/js/components/Form/ModalForm.jsx
  31. +3 −6 src/js/components/Form/MultiSectionForm.jsx
  32. +7 −14 src/js/components/Form/NumericInput.jsx
  33. +1 −1 src/js/components/Form/NumericInput.test.js
  34. +5 −12 src/js/components/Form/PrefixTextInput.jsx
  35. +4 −8 src/js/components/Form/ProjectPicker.jsx
  36. +2 −4 src/js/components/Form/Section.jsx
  37. +7 −14 src/js/components/Form/Select.jsx
  38. +6 −5 src/js/components/Form/Select.test.js
  39. +2 −4 src/js/components/Form/SideBar.jsx
  40. +7 −13 src/js/components/Form/SimpleForm.jsx
  41. +7 −14 src/js/components/Form/TextArea.jsx
  42. +1 −1 src/js/components/Form/TextArea.test.js
  43. +6 −12 src/js/components/Form/TextInput.jsx
  44. +1 −1 src/js/components/Form/TextInput.test.js
  45. +4 −10 src/js/components/Form/Toggle.jsx
  46. +1 −1 src/js/components/Icon/Icon.test.js
  47. +1 −5 src/js/components/Loading/Loading.jsx
  48. +46 −61 src/js/components/Markdown/Markdown.jsx
  49. +24 −22 src/js/components/Markdown/MarkdownField.jsx
  50. +2 −10 src/js/components/Modal/Body.jsx
  51. +12 −15 src/js/components/Modal/Footer.jsx
  52. +20 −26 src/js/components/Modal/Modal.jsx
  53. +18 −22 src/js/components/Modal/Title.jsx
  54. +3 −7 src/js/components/Paginator/Container.jsx
  55. +5 −10 src/js/components/Paginator/Controls.jsx
  56. +2 −4 src/js/components/Paginator/PageSizeSelector.jsx
  57. +5 −6 src/js/components/Paginator/StateDisplay.jsx
  58. +9 −11 src/js/components/Panel/Panel.jsx
  59. +35 −13 src/js/components/Report/Report.jsx
  60. +10 −12 src/js/components/ScoreBadge/ScoreBadge.jsx
  61. +9 −11 src/js/components/Sidebar/MenuItem.jsx
  62. +1 −5 src/js/components/Sidebar/Section.jsx
  63. +7 −11 src/js/components/Sidebar/Sidebar.jsx
  64. +9 −7 src/js/components/Tab/Tab.jsx
  65. +1 −3 src/js/components/Table/Body.jsx
  66. +1 −5 src/js/components/Table/Head.jsx
  67. +8 −6 src/js/components/Table/HeadColumn.jsx
  68. +2 −1 src/js/components/Table/NavigableTable.jsx
  69. +2 −4 src/js/components/Table/Row.jsx
  70. +7 −7 src/js/components/Tooltip/Tooltip.jsx
  71. +1 −1 src/js/components/Tooltip/Tooltip.test.js
  72. +6 −6 src/js/index.jsx
  73. +19 −0 src/js/utils.js
  74. +25 −30 src/js/views/Dashboard/Namespaces/PopupGraph.jsx
  75. +7 −6 src/js/views/Main.jsx
  76. +2 −9 src/js/views/Project/Components/ComponentList.jsx
  77. +2 −2 src/js/views/Project/Create/Create.jsx
  78. +32 −7 src/js/views/Projects/Projects.jsx
  79. +0 −27 src/js/views/Reports/ComponentUsage.jsx
  80. +99 −0 src/js/views/Reports/Components.jsx
  81. +3 −0 src/js/views/Reports/NamespaceKPIs.jsx
  82. +54 −0 src/js/views/Reports/OutdatedProjects.jsx
  83. +11 −5 src/js/views/Reports/Reports.jsx
  84. +2 −4 src/js/views/User/Profile.jsx
  85. +2 −1 webpack.common.js
  86. +14 −0 webpack.dev.js
  87. +147 −274 yarn.lock
12 changes: 0 additions & 12 deletions .babelrc

This file was deleted.

2 changes: 1 addition & 1 deletion .depcheckrc
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
ignores: ["@babel/core", "@testing-library/dom", "autoprefixer", "babel-loader", "babel-polyfill", "browserslist", "css-loader", "depcheck", "dns-packet", "elliptic", "eslint", "file-loader", "hosted-git-info", "husky", "identity-obj-proxy", "inter-ui", "jest", "lint-staged", "lodash", "node-fetch", "postcss", "postcss-import", "postcss-loader", "prettier", "react-hot-loader", "ssri", "style-loader", "typescript", "url", "webpack", "webpack-cli", "webpack-dev-server"]
ignores: [ "@babel/core", "@babel/plugin-*", "@babel/preset-*", "@testing-library/dom", "autoprefixer", "babel-*", "browserslist", "css-loader", "depcheck", "dns-packet", "elliptic", "eslint", "file-loader", "hosted-git-info", "husky", "identity-obj-proxy", "inter-ui", "jest", "lint-staged", "lodash", "node-fetch", "postcss", "postcss-import", "postcss-loader", "prettier", "react-refresh", "ssri", "style-loader", "typescript", "url", "webpack", "webpack-cli", "webpack-dev-server"]
specials: ["babel", "eslint", "jest", "prettier", "webpack"]
2 changes: 1 addition & 1 deletion .github/workflows/ui-testing.yml
Original file line number Diff line number Diff line change
@@ -11,7 +11,7 @@ jobs:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [16.x]
node-version: [18.x]
steps:
- uses: actions/checkout@v2
- name: Use Node.js ${{ matrix.node-version }}
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -3,3 +3,4 @@ build
coverage/
node_modules/
yarn-error.log
/.npmrc
17 changes: 17 additions & 0 deletions babel.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
module.exports = function babel(api) {
const BABEL_ENV = api.env()
const presets = ['@babel/preset-env', '@babel/preset-react']
const plugins = [
'babel-plugin-dynamic-import-webpack',
'@babel/plugin-proposal-class-properties',
'@babel/plugin-syntax-dynamic-import',
'transform-regenerator'
]
if (BABEL_ENV === 'development') {
plugins.push('react-refresh/babel')
}
return {
presets,
plugins
}
}
15 changes: 8 additions & 7 deletions package.json
Original file line number Diff line number Diff line change
@@ -33,12 +33,13 @@
"@fortawesome/free-solid-svg-icons": "^5.15.4",
"@fortawesome/react-fontawesome": "^0.2.0",
"@headlessui/react": "^1.4.0",
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.15",
"@sentry/react": "^6.0.4",
"@tailwindcss/forms": "^0.5.2",
"@testing-library/dom": "^8.11.1",
"@testing-library/jest-dom": "^5.3.0",
"@testing-library/react": "^12.1.2",
"@testing-library/user-event": "^14.4.3",
"@testing-library/dom": "^10.4.0",
"@testing-library/jest-dom": "^6.4.8",
"@testing-library/react": "^16.0.0",
"@testing-library/user-event": "^14.5.2",
"@types/react": ">=16",
"autoprefixer": "^10.4.8",
"babel-loader": "^8.0.4",
@@ -72,15 +73,15 @@
"postcss-loader": "^6.2.1",
"prettier": "^2.0.4",
"prop-types": "^15.7.2",
"react": "17.0.2",
"react": "^18.3.1",
"react-chartjs-2": "^4.3.1",
"react-circular-progressbar": "^2.0.3",
"react-dom": "17.0.2",
"react-dom": "^18.3.1",
"react-gravatar": "^2.6.3",
"react-hot-loader": "^4.13.0",
"react-i18next": "^11.3.4",
"react-infinite-scroll-component": "^6.1.0",
"react-markdown": "^6.0.3",
"react-refresh": "^0.14.2",
"react-router-dom": "^6.3.0",
"react-sparklines": "^1.7.0",
"react-syntax-highlighter": "^15.4.3",
44 changes: 38 additions & 6 deletions public/locales/en.js
Original file line number Diff line number Diff line change
@@ -493,8 +493,8 @@ export default {
},
reports: {
available: 'Available Reports',
componentUsage: {
title: 'Component Usage',
components: {
title: 'Components',
columns: {
active_version: {
title: 'Active Version',
@@ -522,11 +522,10 @@ export default {
description:
'Administrative status for **all** versions of this component. "Forbidden"' +
'or "Deprecated" components always impact the score of project\'s that use any version of the component.'
},
version_count: {
title: 'Version Count',
description: 'Number of versions recorded for this component'
}
},
labels: {
scoredOnly: 'Hide unscored'
}
},
lastUpdated: 'Last Updated: {{lastUpdated}}',
@@ -557,6 +556,39 @@ export default {
}
}
},
outdatedProjects: {
title: 'Outdated Projects',
columns: {
project_namespace: {
title: 'Namespace',
description: 'Human-readable namespace name'
},
project_name: {
title: 'Project Name',
description: 'Human-readable project name'
},
component_score: {
title: 'Component Score',
description: "Project's component score out of 100"
},
up_to_date: {
title: 'Up-to-date',
description: 'Number of up-to-date components'
},
deprecated: {
title: 'Deprecated',
description: 'Number of deprecated components'
},
forbidden: {
title: 'Forbidden',
description: 'Number of forbidden components'
},
outdated: {
title: 'Outdated',
description: 'Number of outdated components'
}
}
},
projectTypeDefinitions: {
title: 'Project Type Definitions'
}
42 changes: 17 additions & 25 deletions src/js/components/Alert/Alert.jsx
Original file line number Diff line number Diff line change
@@ -17,34 +17,26 @@ const icons = {
warning: 'fas exclamation-triangle'
}

class Alert extends React.PureComponent {
render() {
const className =
this.props.className !== undefined ? this.props.className : ''
return (
<div
className={`border px-6 py-4 rounded-lg text-sm ${
alertClass[this.props.level]
} ${className}`}>
<div className="flex">
<div className="flex-shrink-0">
<Icon icon={icons[this.props.level]} />
</div>
<div className="ml-3">
{typeof this.props.children == 'string' ? (
<h3 className="font-medium">{this.props.children}</h3>
) : (
this.props.children
)}
</div>
function Alert({ className = '', children, level = 'info' }) {
return (
<div
className={`border px-6 py-4 rounded-lg text-sm ${alertClass[level]} ${className}`}>
<div className="flex">
<div className="flex-shrink-0">
<Icon icon={icons[level]} />
</div>
<div className="ml-3">
{typeof children == 'string' ? (
<h3 className="font-medium">{children}</h3>
) : (
children
)}
</div>
</div>
)
}
}
Alert.defaultProps = {
level: 'info'
</div>
)
}

Alert.propTypes = {
className: PropTypes.string,
children: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
2 changes: 1 addition & 1 deletion src/js/components/Alert/Alert.test.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react'
import { render, screen } from '@testing-library/react'
import '@testing-library/jest-dom/extend-expect'
import '@testing-library/jest-dom'

import '../../icons'
import { Alert } from './Alert'
32 changes: 14 additions & 18 deletions src/js/components/Backdrop/Backdrop.jsx
Original file line number Diff line number Diff line change
@@ -1,27 +1,23 @@
import PropTypes from 'prop-types'
import React from 'react'

class Backdrop extends React.PureComponent {
render() {
return (
<div className="fixed inset-0 overflow-y-auto z-50 cursor-not-allowed">
<div
className={
(this.props.wait ? 'cursor-wait ' : '') +
'flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0'
}>
<div className="fixed inset-0 transition-opacity" aria-hidden="true">
<div className="absolute inset-0 bg-gray-500 opacity-75" />
</div>
{this.props.children}
function Backdrop({ children, wait = false }) {
return (
<div className="fixed inset-0 overflow-y-auto z-50 cursor-not-allowed">
<div
className={
(wait ? 'cursor-wait ' : '') +
'flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0'
}>
<div className="fixed inset-0 transition-opacity" aria-hidden="true">
<div className="absolute inset-0 bg-gray-500 opacity-75" />
</div>
{children}
</div>
)
}
}
Backdrop.defaultProps = {
wait: false
</div>
)
}

Backdrop.propTypes = {
children: PropTypes.oneOfType([
PropTypes.arrayOf(PropTypes.element),
48 changes: 19 additions & 29 deletions src/js/components/Badge/Badge.jsx
Original file line number Diff line number Diff line change
@@ -14,40 +14,30 @@ const colors = {
yellow: 'border border-yellow-300 bg-yellow-100 text-yellow-800'
}

class Badge extends React.PureComponent {
render() {
if (this.props.href !== undefined)
return (
<a
href={this.props.href}
target={this.props.target}
className={
`inline-flex cursor-pointer items-center px-2.5 py-0.5 rounded-md text-sm font-medium ${
colors[this.props.color]
}` +
(this.props.className !== undefined
? ` ${this.props.className}`
: '')
}>
{this.props.children}
</a>
)
function Badge({ className, color = 'gray', children, href, target }) {
if (href !== undefined)
return (
<div
<a
href={href}
target={target}
className={
`inline-flex cursor-default items-center px-2.5 py-0.5 rounded-md text-sm font-medium ${
colors[this.props.color]
}` +
(this.props.className !== undefined ? ` ${this.props.className}` : '')
`inline-flex cursor-pointer items-center px-2.5 py-0.5 rounded-md text-sm font-medium ${colors[color]}` +
(className !== undefined ? ` ${className}` : '')
}>
{this.props.children}
</div>
{children}
</a>
)
}
}
Badge.defaultProps = {
color: 'gray'
return (
<div
className={
`inline-flex cursor-default items-center px-2.5 py-0.5 rounded-md text-sm font-medium ${colors[color]}` +
(className !== undefined ? ` ${className}` : '')
}>
{children}
</div>
)
}

Badge.propTypes = {
className: PropTypes.string,
color: PropTypes.oneOf([
59 changes: 29 additions & 30 deletions src/js/components/Button/Button.jsx
Original file line number Diff line number Diff line change
@@ -2,39 +2,38 @@ import { NavLink } from 'react-router-dom'
import PropTypes from 'prop-types'
import React from 'react'

class Button extends React.PureComponent {
render() {
if (this.props.destination !== undefined)
return (
<NavLink
className={
!this.props.disabled ? this.props.className : 'btn-disabled'
}
to={this.props.destination}>
{this.props.children}
</NavLink>
)
function Button({
children,
className = 'btn-white',
destination,
disabled = false,
onClick,
type = 'button'
}) {
if (destination !== undefined)
return (
<button
className={!this.props.disabled ? this.props.className : 'btn-disabled'}
disabled={this.props.disabled}
onClick={(event) => {
if (this.props.onClick !== undefined) {
event.preventDefault()
this.props.onClick(event)
}
}}
type={this.props.type}>
{this.props.children}
</button>
<NavLink
className={!disabled ? className : 'btn-disabled'}
to={destination}>
{children}
</NavLink>
)
}
}
Button.defaultProps = {
className: 'btn-white',
disabled: false,
type: 'button'
return (
<button
className={!disabled ? className : 'btn-disabled'}
disabled={disabled}
onClick={(event) => {
if (onClick !== undefined) {
event.preventDefault()
onClick(event)
}
}}
type={type}>
{children}
</button>
)
}

Button.propTypes = {
children: PropTypes.oneOfType([
PropTypes.arrayOf(
2 changes: 1 addition & 1 deletion src/js/components/Button/Button.test.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react'
import { fireEvent, render, screen } from '@testing-library/react'
import '@testing-library/jest-dom/extend-expect'
import '@testing-library/jest-dom'

const mockOnCancel = jest.fn()

Loading