Fix DataInspector Component diff some problems. (#397)

Summary:
1. In `diffMetadataExtractor` function, when the `data` or `diff` is `null`, it diff view does not display correctly.

```jsx

<Panel floating={false} heading={'Test'}>
  <ManagedDataInspector
    diff={{
      auth: null
    }}
    data={{
      auth: {
        user: {
          name: 'JianyingLi'
        }
      }
    }}
    expandRoot={true}
  />
</Panel>
```

Before:
![2561552808023_ pic](https://user-images.githubusercontent.com/3889523/54486986-db383b80-48ca-11e9-9869-a008f72f4324.jpg)

After:
![2551552807969_ pic](https://user-images.githubusercontent.com/3889523/54486992-ea1eee00-48ca-11e9-90b0-7fd043f1c2bd.jpg)

2. Status `added`(green) and `removed`(red) should be the opposite

```jsx
<ManagedDataInspector
  diff={{
    user: {
      name: 'Leo'
    }
  }}
  data={{
    user: {
      name: 'JianyingLi'
    }
  }}
  expandRoot={true}
/>
```

Before:
![2591552808195_ pic](https://user-images.githubusercontent.com/3889523/54487019-35390100-48cb-11e9-8c20-1526aeae52a1.jpg)

After:
![2581552808145_ pic](https://user-images.githubusercontent.com/3889523/54487022-3c600f00-48cb-11e9-9ea9-75a8c8490c22.jpg)
Pull Request resolved: https://github.com/facebook/flipper/pull/397

Reviewed By: danielbuechele

Differential Revision: D14505757

Pulled By: passy

fbshipit-source-id: 35ca1bf8721468fdde13f3a9ede75cb72a59caea
This commit is contained in:
JianyingLi
2019-03-19 17:00:27 -07:00
committed by Facebook Github Bot
parent 04cebe6e29
commit 2564bce5a0
2 changed files with 5 additions and 3 deletions

View File

@@ -62,6 +62,7 @@ function decodeBody(container: Request | Response): string {
if (!container.data) {
return '';
}
const b64Decoded = atob(container.data);
const body =
getHeaderValue(container.headers, 'Content-Encoding') === 'gzip'

View File

@@ -217,6 +217,7 @@ function getRootContextMenu(data: Object): Array<Electron$MenuItemOptions> {
function isPureObject(obj: Object) {
return (
obj !== null &&
Object.prototype.toString.call(obj) !== '[object Date]' &&
typeof obj === 'object'
);
@@ -234,10 +235,10 @@ const diffMetadataExtractor: DiffMetadataExtractor = (
const val = data[key];
const diffVal = diff[key];
if (!data.hasOwnProperty(key)) {
return [{data: diffVal, status: 'added'}];
return [{data: diffVal, status: 'removed'}];
}
if (!diff.hasOwnProperty(key)) {
return [{data: val, status: 'removed'}];
return [{data: val, status: 'added'}];
}
if (isPureObject(diffVal) && isPureObject(val)) {
@@ -248,7 +249,7 @@ const diffMetadataExtractor: DiffMetadataExtractor = (
// Check if there's a difference between the original value and
// the value from the diff prop
// The property name still exists, but the values may be different.
return [{data: diffVal, status: 'added'}, {data: val, status: 'removed'}];
return [{data: val, status: 'added'}, {data: diffVal, status: 'removed'}];
}
return Object.prototype.hasOwnProperty.call(data, key) ? [{data: val}] : [];