Add special case for null attributes

Summary: before this was just an empty box and was a little unclear. With a new color, italic font and the word Null explictly called outit should be less ambigious

Reviewed By: antonk52

Differential Revision: D60509577

fbshipit-source-id: d013550b7b71365144a07b3343daa7fc8f5acbe3

desktop/plugins/public/ui-debugger/components/sidebarV2/attributes/AttributesInspector.tsx

@@ -46,6 +46,7 @@ import {
 import {
   boolColor,
   enumColor,
+  nullColor,
   numberColor,
   rowHeight,
   stringColor,
@@ -374,6 +375,19 @@ function NamedAttribute({
   );
 }
 
+function checkForNull(inspectable: Inspectable) {
+  if (inspectable.type === 'array') {
+    return inspectable.items == null;
+  } else if (inspectable.type === 'pluginDeeplink') {
+    return inspectable.pluginId == null;
+  } else if (inspectable.type === 'object') {
+    return inspectable.fields == null;
+  } else {
+    return inspectable.value == null;
+  }
+}
+const emptyfn = () => {};
+
 function AttributeValue({
   metadataMap,
   name,
@@ -396,6 +410,19 @@ function AttributeValue({
   const numberGroupOnChange = (value: number, hint: CompoundTypeHint): void => {
     instance.uiActions.editClientAttribute(nodeId, value, metadataPath, hint);
   };
+
+  if (checkForNull(inspectable)) {
+    return (
+      <StyledTextArea
+        style={{fontStyle: 'italic'}}
+        color={nullColor}
+        mutable={false}
+        value={'NULL'}
+        onChange={emptyfn}
+      />
+    );
+  }
+
   switch (inspectable.type) {
     case 'boolean':
       return (

desktop/plugins/public/ui-debugger/components/sidebarV2/attributes/TextInput.tsx

@@ -18,7 +18,9 @@ export function StyledTextArea({
   color,
   mutable,
   onChange,
+  style,
 }: {
+  style?: React.CSSProperties;
   value: string;
   color: string;
   mutable: boolean;
@@ -32,7 +34,7 @@ export function StyledTextArea({
       autoSize
       className={cx(inputBase, !mutable && readOnlyInput)}
       bordered
-      style={{color, ...pendingStyle(optimisticValue)}}
+      style={{color, ...pendingStyle(optimisticValue), ...style}}
       readOnly={!mutable}
       value={optimisticValue.value}
       onChange={(event) => optimisticValue.onChange(event.target.value)}

desktop/plugins/public/ui-debugger/components/sidebarV2/attributes/shared.tsx

@@ -39,6 +39,7 @@ export const readOnlyInput = css`
 
 export const boolColor = '#C41D7F';
 export const stringColor = '#AF5800';
+export const nullColor = '#cb34cb';
 export const enumColor = '#006D75';
 export const numberColor = '#003EB3';
 export const rowHeight = 26;