Repository: hasura/graphql-engine
File: console/src/components/Services/RemoteSchema/RemoteSchemaSubSidebar.js (JavaScript)

Code before:
          data-test="remote-schema-sidebar-no-schemas"
        >
          <i>No remote schemas available</i>
        </li>
      );
    } else {
      if (_dataList.length > 0) {
        childList = _dataList.map((d, i) => {
          let activeTableClass = '';
          let isSchemaInconsistent = false;
          let inconsistentCurrentSchema;
          const filteredList = inconsistentRemoteSchemas.filter(
            inconObject => inconObject.definition.name === d.name
          );

          if (
            d.name === viewRemoteSchema &&
            location.pathname.includes(viewRemoteSchema)
          ) {
            activeTableClass = styles.activeLink;
          }

          if (filteredList.length) {
            isSchemaInconsistent = true;
            inconsistentCurrentSchema = filteredList[0];
          }

          return (
            <li
              className={activeTableClass}
              key={i}
              data-test={`remote-schema-sidebar-links-${i + 1}`}
            >
              <Link
                to={`${appPrefix}/manage/${d.name}/details`}
                data-test={d.name}
              >
                <i
                  className={`${styles.tableIcon} fa fa-code-fork`}
                  aria-hidden="true"
                />
                {d.name}
                {isSchemaInconsistent ? (
                  <ToolTip message={inconsistentCurrentSchema.reason}>
                    <i
                      className={`${styles.tableIcon} ${styles.icon_mar_left} fa fa-exclamation-triangle ${styles.colorRed}`}
                      aria-hidden="true"
                    />
                  </ToolTip>
                ) : null}
              </Link>

Review comment (suggestion):
You can use `find` instead of filter. 

Also, let's use only one variable for this:

```suggestion
          let activeTableClass = '';
          if (
            d.name === viewRemoteSchema &&
            location.pathname.includes(viewRemoteSchema)
          ) {
            activeTableClass = styles.activeLink;
          }

          const inconsistentSchema = inconsistentRemoteSchemas.find(elem => elem.definition.name === d.name)
```

And then use `inconsistentSchema` to do:

```js
   {inconsistentSchema ? (
                  <ToolTip message={inconsistentSchema.reason}>
                     // ....
                  </ToolTip>
                ) : null}
```

Code after:
          data-test="remote-schema-sidebar-no-schemas"
        >
          <i>No remote schemas available</i>
        </li>
      );
    } else {
      if (_dataList.length > 0) {
        childList = _dataList.map((d, i) => {
          let activeTableClass = '';

          if (
            d.name === viewRemoteSchema &&
            location.pathname.includes(viewRemoteSchema)
          ) {
            activeTableClass = styles.activeLink;
          }

          const inconsistentCurrentSchema = inconsistentRemoteSchemas.find(
            elem => elem.definition.name === d.name
          );

          return (
            <li
              className={activeTableClass}
              key={i}
              data-test={`remote-schema-sidebar-links-${i + 1}`}
            >
              <Link
                to={`${appPrefix}/manage/${d.name}/details`}
                data-test={d.name}
              >
                <i
                  className={`${styles.tableIcon} fa fa-code-fork`}
                  aria-hidden="true"
                />
                {d.name}
                {inconsistentCurrentSchema ? (
                  <WarningSymbol
                    customStyle={styles.padLeft4}
                    tooltipText={
                      'This remote schema is in an inconsistent state. ' +
                      'Fields from this remote schema are currently not exposed over the GraphQL API'
                    }
                    tooltipPlacement="right"
                  />
                ) : null}
              </Link>
            </li>
          );
        });
      }