Compute schema properties at render time

The previous implementation computed this once when the component is instantiated, this type of state is a common source of bugs. The new implementation computes the list at render time which has a small, but negligible overhead, and is simpler.

ui/src/react-ftm/components/NetworkDiagram/toolbox/EntityViewer.tsx

@@ -37,13 +37,9 @@ export class EntityViewer extends React.PureComponent<
   IEntityViewerState
 > {
   static contextType = GraphContext;
-  private schemaProperties: FTMProperty[];
 
   constructor(props: IEntityViewerProps) {
     super(props);
-    this.schemaProperties = props.entity.schema
-      .getEditableProperties()
-      .sort((a, b) => a.label.localeCompare(b.label));
 
     this.state = {
       currEditing: null,
@@ -56,6 +52,12 @@ export class EntityViewer extends React.PureComponent<
     this.onEditPropertyClick = this.onEditPropertyClick.bind(this);
   }
 
+  getSchemaProperties(): FTMProperty[] {
+    return this.props.entity.schema
+      .getEditableProperties()
+      .sort((a, b) => a.label.localeCompare(b.label));
+  }
+
   getVisibleProperties(): FTMProperty[] {
     const { entity } = this.props;
 
@@ -120,7 +122,7 @@ export class EntityViewer extends React.PureComponent<
     const { writeable } = this.context;
     const { entity, vertexRef } = this.props;
     const visibleProps = this.getVisibleProperties();
-    const availableProperties = this.schemaProperties.filter(
+    const availableProperties = this.getSchemaProperties().filter(
       (p) => visibleProps.indexOf(p) < 0
     );
     const hasCaption = entity.getCaption() !== entity.schema.label;