Team maintainer create & run new query, no save (#2141)

* team maintainer create & run new query, no save

* lint fixes

* showing table sidebar for team maintainer

* style fixes to no results

* lint fix

frontend/components/forms/queries/QueryForm/QueryForm.tsx

@@ -40,9 +40,9 @@ interface IQueryFormProps {
 }
 
 interface IRenderProps {
-  nameText: string;
-  descText: string;
   queryValue: string;
+  nameText?: string;
+  descText?: string;
   queryError?: any;
   queryOnChange?: any;
   name?: IFormField;
@@ -251,6 +251,42 @@ const QueryForm = ({
     </form>
   );
 
+  const renderCreateForTeamMaintainer = ({
+    queryValue,
+    queryOnChange,
+    queryError,
+  }: IRenderProps) => (
+    <>
+      <form className={`${baseClass}__wrapper`}>
+        <h1 className={`${baseClass}__query-name`}>New query</h1>
+        {baseError && <div className="form__base-error">{baseError}</div>}
+        <FleetAce
+          value={queryValue}
+          error={queryError}
+          label="Query:"
+          labelActionComponent={renderLabelComponent()}
+          name="query editor"
+          onLoad={onLoad}
+          wrapperClassName={`${baseClass}__text-editor-wrapper`}
+          onChange={queryOnChange}
+          handleSubmit={promptSaveQuery}
+        />
+        {renderLiveQueryWarning()}
+        <div
+          className={`${baseClass}__button-wrap ${baseClass}__button-wrap--new-query`}
+        >
+          <Button
+            className={`${baseClass}__run`}
+            variant="blue-green"
+            onClick={goToSelectTargets}
+          >
+            Run query
+          </Button>
+        </div>
+      </form>
+    </>
+  );
+
   const renderForGlobalAdminOrMaintainer = ({
     nameText,
     descText,
@@ -268,7 +304,7 @@ const QueryForm = ({
           <ContentEditable
             className={`${baseClass}__query-name`}
             innerRef={nameEditable}
-            html={nameText}
+            html={nameText || ""}
             tagName="h1"
             onChange={(evt: ContentEditableEvent) =>
               name?.onChange(evt.target.value)
@@ -390,6 +426,14 @@ const QueryForm = ({
     });
   }
 
+  if (!isEditMode && isAnyTeamMaintainer) {
+    return renderCreateForTeamMaintainer({
+      queryValue,
+      queryOnChange,
+      queryError,
+    });
+  }
+
   if (isAnyTeamMaintainer || isGlobalMaintainer) {
     return renderRunForMaintainer({ nameText, descText, queryValue });
   }

frontend/pages/queries/QueryPage/QueryPage.tsx

@@ -41,7 +41,9 @@ const QueryPage = ({
   location: { query: URLQuerySearch },
 }: IQueryPageProps) => {
   const queryIdForEdit = paramsQueryId ? parseInt(paramsQueryId, 10) : null;
-  const { isGlobalAdmin, isGlobalMaintainer } = useContext(AppContext);
+  const { isGlobalAdmin, isGlobalMaintainer, isAnyTeamMaintainer } = useContext(
+    AppContext
+  );
   const { selectedOsqueryTable, setSelectedOsqueryTable } = useContext(
     QueryContext
   );
@@ -199,7 +201,9 @@ const QueryPage = ({
   const isFirstStep = step === QUERIES_PAGE_STEPS[1];
   const sidebarClass = isFirstStep && isSidebarOpen && "has-sidebar";
   const showSidebar =
-    isFirstStep && isSidebarOpen && (isGlobalAdmin || isGlobalMaintainer);
+    isFirstStep &&
+    isSidebarOpen &&
+    (isGlobalAdmin || isGlobalMaintainer || isAnyTeamMaintainer);
 
   return (
     <div className={`${baseClass} ${sidebarClass}`}>

frontend/pages/queries/QueryPage/components/QueryResults/QueryResults.tsx

@@ -303,7 +303,6 @@ const QueryResults = ({
             {isQueryFinished && hasNoResults ? (
               <p className="no-results-message">
                 Your live query returned no results.
-                <br />
                 <span>
                   Expecting to see results? Check to see if the hosts you
                   targeted reported &ldquo;Online&rdquo; or check out the

frontend/pages/queries/QueryPage/components/QueryResults/_styles.scss

@@ -122,6 +122,20 @@
         font-weight: $bold;
       }
     }
+    &__tab-panel {
+      .no-results-message {
+        margin-top: $pad-xxlarge;
+        font-size: $small;
+        font-weight: $bold;
+
+        span {
+          margin-top: $pad-medium;
+          font-size: $x-small;
+          font-weight: $regular;
+          display: block;
+        }
+      }
+    }
   }
 
   &__results-table-container,
@@ -137,17 +151,6 @@
     margin-top: $pad-large;
     box-sizing: border-box;
     overflow: auto;
-
-    .kolide-spinner {
-      align-self: center;
-    }
-
-    .no-results-message {
-      flex-grow: 1;
-      align-self: center;
-      text-align: center;
-      font-size: $x-small;
-    }
   }
 
   &__table {