toil: add more linter configuration options

Author: skipi

front/assets/.eslintrc.js

@@ -105,8 +105,10 @@ module.exports = {
         "semi-spacing": ["error", {"before": false, "after": true}],
         "react/jsx-uses-react": "off",
         "react/react-in-jsx-scope": "off",
-        // "react/jsx-one-expression-per-line": ["error", { "allow": "single-child" }],
         "react/display-name": "off",
+        "react/jsx-first-prop-new-line": ["error", "multiline"],
+        "react/jsx-max-props-per-line": ["error", { maximum: {single: 2, multi: 1} }],
+        "react/jsx-closing-bracket-location": ["error", { selfClosing: "line-aligned", nonEmpty: "line-aligned" }],
         "react/jsx-tag-spacing": [
           "error",
           {
@@ -116,6 +118,20 @@ module.exports = {
             beforeClosing: "never",
           },
         ],
+        "comma-dangle": "off",
+        "@typescript-eslint/comma-dangle": [
+          "error",
+          {
+            arrays: "always-multiline",
+            objects: "always-multiline",
+            imports: "always-multiline",
+            exports: "always-multiline",
+            functions: "always-multiline",
+            enums: "always-multiline",
+            generics: "always-multiline",
+            tuples: "always-multiline"
+          }
+        ],
         "@typescript-eslint/no-misused-promises": [
           "error",
           {

front/assets/js/agents/components/activity_item.tsx

@@ -264,7 +264,7 @@ const JobSummary = (props: JobSummaryProps) => {
       labels.push(
         <span className="fw5 bg-green white ph1 br1 mr1">
           {jobPlural(runningCount)} running
-        </span>
+        </span>,
       );
     }
 
@@ -273,7 +273,7 @@ const JobSummary = (props: JobSummaryProps) => {
       labels.push(
         <span className="fw5 bg-yellow black-60 ph1 br1 mr1">
           {showLabel ? jobPlural(waitingCount) : waitingCount} waiting
-        </span>
+        </span>,
       );
     }
 
@@ -282,7 +282,7 @@ const JobSummary = (props: JobSummaryProps) => {
       labels.push(
         <span className="fw5 bg-mid-gray white ph1 br1 mr1">
           {showLabel ? jobPlural(leftCount) : leftCount} left
-        </span>
+        </span>,
       );
     }
 
@@ -301,7 +301,7 @@ const JobSummary = (props: JobSummaryProps) => {
 
       if (waitingCount > 0 && runningCount > 0) {
         descriptionItems.push(
-          `${type} (${runningCount} running, ${waitingCount} waiting)`
+          `${type} (${runningCount} running, ${waitingCount} waiting)`,
         );
         continue;
       }

front/assets/js/agents/components/activity_monitor.tsx

@@ -59,7 +59,11 @@ const LobbyItems = () => {
         in their branch, pull request and delivery queue
       </summary>
       {lobbyItems.map((item, idx) => (
-        <ActivityItem item={item} key={idx} inLobby={true}/>
+        <ActivityItem
+          item={item}
+          key={idx}
+          inLobby={true}
+        />
       ))}
     </details>
   );

front/assets/js/agents/components/instructions/aws.tsx

@@ -20,7 +20,7 @@ export const Component = (): VNode => {
     active: boolean;
   }
   const SubOS = (
-    props: SubOSProps
+    props: SubOSProps,
   ) => {
     const ButtonEl = styled.button`
       &:hover,

front/assets/js/agents/components/instructions/kubernetes.tsx

@@ -18,7 +18,11 @@ export const Component = (): VNode => {
           <li>
             <div className="mb2">
               Install{` `}
-              <a href="https://helm.sh/" target="_blank" rel="noreferrer">
+              <a
+                href="https://helm.sh/"
+                target="_blank"
+                rel="noreferrer"
+              >
                 helm
               </a>
             </div>

front/assets/js/agents/components/instructions/macos.tsx

@@ -9,15 +9,15 @@ export const icon = `images/icn-os-mac.svg`;
 
 export const Component = (): VNode => {
   const [selectedOs, setSelectedOs] = useState<`macos` | `homebrew`>(
-    `homebrew`
+    `homebrew`,
   );
 
   interface SubOsProps extends h.JSX.HTMLAttributes {
     name: string;
     active: boolean;
   }
   const SubOS = (
-    props: SubOsProps
+    props: SubOsProps,
   ) => {
     const ButtonEl = styled.button`
       &:hover,
@@ -182,7 +182,11 @@ export const HomebrewInstructions = () => {
           <li>
             <div className="mb2">
               Install{` `}
-              <a href="https://brew.sh/" target="_blank" rel="noreferrer">
+              <a
+                href="https://brew.sh/"
+                target="_blank"
+                rel="noreferrer"
+              >
                 Homebrew
               </a>
             </div>

front/assets/js/agents/index.tsx

@@ -35,6 +35,6 @@ export default function ({ dom, config }: { dom: HTMLElement, config: any }) {
         </Routes>
       </stores.Config.Context.Provider>
     </BrowserRouter>,
-    dom
+    dom,
   );
 }

front/assets/js/agents/pages/activity_monitor.tsx

@@ -13,19 +13,19 @@ export const Page = () => {
   const [activity, dispatchActivity] = useReducer(stores.Activity.Reducer, {
     ...stores.Activity.EmptyState,
     hostedAgents: config.activity.agent_stats.agent_types.map(
-      stores.Activity.Agent.fromJSON
+      stores.Activity.Agent.fromJSON,
     ),
     selfHostedAgents: config.activity.agent_stats.self_hosted_agent_types.map(
-      stores.Activity.Agent.fromJSON
+      stores.Activity.Agent.fromJSON,
     ),
     waitingItems: config.activity.items.waiting.items.map(
-      stores.Activity.Item.fromJSON
+      stores.Activity.Item.fromJSON,
     ),
     runningItems: config.activity.items.running.items.map(
-      stores.Activity.Item.fromJSON
+      stores.Activity.Item.fromJSON,
     ),
     lobbyItems: config.activity.items.lobby.items.map(
-      stores.Activity.Item.fromJSON
+      stores.Activity.Item.fromJSON,
     ),
   });
 
@@ -44,7 +44,7 @@ export const Page = () => {
       dispatchActivity({
         type: `SET_SELF_HOSTED_AGENTS`,
         value: agent_stats.self_hosted_agent_types.map(
-          stores.Activity.Agent.fromJSON
+          stores.Activity.Agent.fromJSON,
         ),
       });
 

front/assets/js/agents/pages/self_hosted/agent.tsx

@@ -12,9 +12,7 @@ import moment from "moment";
 import { Notice } from "js/notice";
 
 export const Agent = () => {
-  const { state, dispatch: dispatchSelfHostedAgent } = useContext(
-    stores.SelfHostedAgent.Context
-  );
+  const { state, dispatch: dispatchSelfHostedAgent } = useContext(stores.SelfHostedAgent.Context);
   const navigate = useNavigate();
   const selfHostedAgent = state.type;
   const [showGuide, setShowGuide] = useState(false);
@@ -29,7 +27,7 @@ export const Agent = () => {
   if (!selfHostedAgent) return;
 
   const { state: locationState } = useLocation();
-  const targetId = (locationState as any)?.targetId as string;
+  const targetId = (locationState )?.targetId as string;
 
   useEffect(() => {
     if (state.type && state.type.totalAgentCount === 0) {
@@ -47,10 +45,7 @@ export const Agent = () => {
   const refreshActivity = async () => {
     setRefreshing(true);
     try {
-      await types.SelfHosted.AgentType.get(
-        config.selfHostedUrl,
-        state.type.name
-      )
+      await types.SelfHosted.AgentType.get(config.selfHostedUrl, state.type.name)
         .then((agentType) => {
           dispatchSelfHostedAgent({
             type: `SET_AGENT_TYPE`,
@@ -84,9 +79,7 @@ export const Agent = () => {
   const EmptyList = () => {
     return (
       <div className="bg-white shadow-1 br3 pa3 pa4-l mb3">
-        <p className="f5 gray mv0">
-          No agents are currently connected to this agent type.
-        </p>
+        <p className="f5 gray mv0">No agents are currently connected to this agent type.</p>
       </div>
     );
   };
@@ -100,28 +93,16 @@ export const Agent = () => {
         </div>
         {config.accessProvider.canManageAgents() && (
           <div>
-            <button
-              onClick={() => navigate(`settings`)}
-              className="btn btn-secondary mr2"
-            >
+            <button onClick={() => navigate(`settings`)} className="btn btn-secondary mr2">
               Settings
             </button>
-            <button
-              onClick={() => navigate(`reset`)}
-              className="btn btn-secondary mr2"
-            >
+            <button onClick={() => navigate(`reset`)} className="btn btn-secondary mr2">
               Reset token
             </button>
-            <button
-              onClick={() => navigate(`disable_all`)}
-              className="btn btn-secondary mr2"
-            >
+            <button onClick={() => navigate(`disable_all`)} className="btn btn-secondary mr2">
               Disable all
             </button>
-            <button
-              onClick={() => navigate(`delete`)}
-              className="btn btn-danger"
-            >
+            <button onClick={() => navigate(`delete`)} className="btn btn-danger">
               Delete
             </button>
           </div>
@@ -169,13 +150,7 @@ export const Agent = () => {
       </div>
       <h2 className="f4 normal gray mb3">
         <span id="self-hosted-agents-count">
-          <span className="green">
-            {toolbox.Pluralize(
-              selfHostedAgent.totalAgentCount,
-              `connected agent`,
-              `connected agents`
-            )}
-          </span>
+          <span className="green">{toolbox.Pluralize(selfHostedAgent.totalAgentCount, `connected agent`, `connected agents`)}</span>
         </span>
         <span className="mh1">&middot;</span>
         <span className="pointer link underline" onClick={toggleInstructions}>
@@ -209,9 +184,7 @@ const ConnectedAgent = (props: ConnectAgentProps) => {
     }
   };
   const disableAgent = async () => {
-    await toolbox.APIRequest.post(
-      `${config.selfHostedUrl}/${selfHostedState.type.name}/agents/${agent.name}/disable?format=json`
-    );
+    await toolbox.APIRequest.post(`${config.selfHostedUrl}/${selfHostedState.type.name}/agents/${agent.name}/disable?format=json`);
   };
 
   const agent = props.agent;
@@ -222,9 +195,7 @@ const ConnectedAgent = (props: ConnectAgentProps) => {
       onMouseOver={() => setShowStop(true)}
       onMouseOut={() => setShowStop(false)}
     >
-      {showStop && (
-        <StopAgent state={transitionState} setState={transitionTo}/>
-      )}
+      {showStop && <StopAgent state={transitionState} setState={transitionTo}/>}
       <div className="pl2-l">
         <div className="flex-l items-center justify-between">
           <h3 className="f4 mb1">
@@ -270,16 +241,10 @@ const StopAgent = (props: StopAgentProps) => {
         return (
           <div className="shadow-1 bg-white f6 br2 pa1">
             <span className="ph1">Are you sure?</span>
-            <button
-              onClick={() => props.setState(`running`)}
-              className="input-reset pv1 ph2 br2 bg-gray white bn pointer mh1"
-            >
+            <button onClick={() => props.setState(`running`)} className="input-reset pv1 ph2 br2 bg-gray white bn pointer mh1">
               Nevermind
             </button>
-            <button
-              onClick={() => props.setState(`stopping`)}
-              className="input-reset pv1 ph2 br2 bg-red white bn pointer"
-            >
+            <button onClick={() => props.setState(`stopping`)} className="input-reset pv1 ph2 br2 bg-red white bn pointer">
               Stop
             </button>
           </div>
@@ -293,7 +258,5 @@ const StopAgent = (props: StopAgentProps) => {
     }
   };
 
-  return (
-    <div className="child absolute top-0 right-0 z-5 nt2 mr3">{content()}</div>
-  );
+  return <div className="child absolute top-0 right-0 z-5 nt2 mr3">{content()}</div>;
 };

front/assets/js/agents/pages/self_hosted/delete.tsx

@@ -1,4 +1,3 @@
-
 import { useNavigate, useParams } from "react-router-dom";
 import { useContext } from "preact/hooks";
 import * as stores from "js/agents/stores";
@@ -36,16 +35,10 @@ export const Delete = () => {
         </ul>
         <div className="mw6">
           <div className="mt3">
-            <button
-              className="btn btn-danger mr2"
-              onClick={() => void deleteAgent()}
-            >
+            <button className="btn btn-danger mr2" onClick={() => void deleteAgent()}>
               Delete
             </button>
-            <a
-              className="btn btn-secondary pointer"
-              onClick={() => navigate(`..`)}
-            >
+            <a className="btn btn-secondary pointer" onClick={() => navigate(`..`)}>
               Nevermind
             </a>
           </div>