add 'no query to review' component

finos · Aug 25, 2022 · a319e10 · a319e10
1 parent 5799dae
commit a319e10
Showing 1 changed file with 48 additions and 39 deletions.
diff --git a/packages/legend-application-query/src/components/QueryEditor.tsx b/packages/legend-application-query/src/components/QueryEditor.tsx
@@ -333,46 +333,55 @@ const QueryLoader = observer(
           <div className="query-editor__query-loader__body">
             {!editorStore.isLoadingQueryInProgress && (
               <>
-                <table className="table">
-                  <thead style={{ position: 'sticky', top: -1 }}>
-                    <tr>
-                      {queryLoaderColumns.map((column, idx) => (
-                        // eslint-disable-next-line react/no-array-index-key
-                        <th key={idx} className="table__cell--left">
-                          {column}
-                        </th>
-                      ))}
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {(editorStore.isMineOnly
-                      ? editorStore.queries.filter((q) => q.isCurrentUserQuery)
-                      : editorStore.queries
-                    ).map((q) => (
-                      <tr
-                        key={q.id}
-                        className={clsx(
-                          'query-editor__query-loader__body__table__row',
-                          {
-                            'query-editor__query-loader__body__table__row--selected':
-                              selectedQueryID === q.id,
-                          },
-                        )}
-                        onClick={(event) => setSelectedQueryID(q.id)}
-                      >
-                        {buildQueryTableRow(q).map((value, columnIdx) => (
-                          // eslint-disable-next-line react/no-array-index-key
-                          <td key={columnIdx} className="table__cell--left">
-                            {value}
-                          </td>
+                {editorStore.queries.length > 0 && (
+                  <>
+                    <table className="table">
+                      <thead style={{ position: 'sticky', top: -1 }}>
+                        <tr>
+                          {queryLoaderColumns.map((column, idx) => (
+                            // eslint-disable-next-line react/no-array-index-key
+                            <th key={idx} className="table__cell--left">
+                              {column}
+                            </th>
+                          ))}
+                        </tr>
+                      </thead>
+                      <tbody>
+                        {(editorStore.isMineOnly
+                          ? editorStore.queries.filter(
+                              (q) => q.isCurrentUserQuery,
+                            )
+                          : editorStore.queries
+                        ).map((q) => (
+                          <tr
+                            key={q.id}
+                            className={clsx(
+                              'query-editor__query-loader__body__table__row',
+                              {
+                                'query-editor__query-loader__body__table__row--selected':
+                                  selectedQueryID === q.id,
+                              },
+                            )}
+                            onClick={(event) => setSelectedQueryID(q.id)}
+                          >
+                            {buildQueryTableRow(q).map((value, columnIdx) => (
+                              // eslint-disable-next-line react/no-array-index-key
+                              <td key={columnIdx} className="table__cell--left">
+                                {value}
+                              </td>
+                            ))}
+                          </tr>
                         ))}
-                      </tr>
-                    ))}
-                  </tbody>
-                </table>
-                <div className="query-editor__query-loader__body__warning">
-                  Show relevant queries by searching names
-                </div>
+                      </tbody>
+                    </table>
+                    <div className="query-editor__query-loader__body__warning">
+                      Show relevant queries by searching names
+                    </div>
+                  </>
+                )}
+                {editorStore.queries.length === 0 && (
+                  <BlankPanelContent>No Query to Preview</BlankPanelContent>
+                )}
               </>
             )}
             {editorStore.isLoadingQueryInProgress && (