Add Support page in the configurator with help resources. Added an a ability to clear platformio source core_dir

Author: jurgelenas

graphql.schema.json

@@ -669,6 +669,22 @@
             },
             "isDeprecated": false,
             "deprecationReason": null
+          },
+          {
+            "name": "clearPlatformioCoreDir",
+            "description": null,
+            "args": [],
+            "type": {
+              "kind": "NON_NULL",
+              "name": null,
+              "ofType": {
+                "kind": "OBJECT",
+                "name": "ClearPlatformioCoreDirResult",
+                "ofType": null
+              }
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
           }
         ],
         "inputFields": null,
@@ -1108,6 +1124,45 @@
         "enumValues": null,
         "possibleTypes": null
       },
+      {
+        "kind": "OBJECT",
+        "name": "ClearPlatformioCoreDirResult",
+        "description": null,
+        "fields": [
+          {
+            "name": "success",
+            "description": null,
+            "args": [],
+            "type": {
+              "kind": "NON_NULL",
+              "name": null,
+              "ofType": {
+                "kind": "SCALAR",
+                "name": "Boolean",
+                "ofType": null
+              }
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
+          },
+          {
+            "name": "message",
+            "description": null,
+            "args": [],
+            "type": {
+              "kind": "SCALAR",
+              "name": "String",
+              "ofType": null
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
+          }
+        ],
+        "inputFields": null,
+        "interfaces": [],
+        "enumValues": null,
+        "possibleTypes": null
+      },
       {
         "kind": "OBJECT",
         "name": "Subscription",

package.json

@@ -223,6 +223,7 @@
     "@types/react-dom": "^17.0.0",
     "@types/react-router-dom": "^5.1.7",
     "@types/react-test-renderer": "^17.0.0",
+    "@types/rimraf": "^3.0.0",
     "@types/uuid": "^8.3.0",
     "@types/webpack-env": "^1.16.0",
     "@typescript-eslint/eslint-plugin": "^4.15.0",
@@ -274,7 +275,7 @@
     "prettier": "^2.2.1",
     "react-refresh": "^0.9.0",
     "react-test-renderer": "^17.0.1",
-    "rimraf": "^3.0.0",
+    "rimraf": "^3.0.2",
     "sass-loader": "^10.1.1",
     "style-loader": "^2.0.0",
     "terser-webpack-plugin": "^5.1.1",

src/api/src/graphql/resolvers/Firmware.resolver.ts

@@ -20,6 +20,7 @@ import BuildProgressNotification from '../../models/BuildProgressNotification';
 import PubSubTopic from '../../pubsub/enum/PubSubTopic';
 import BuildLogUpdate from '../../models/BuildLogUpdate';
 import { ConfigToken, IConfig } from '../../config';
+import ClearPlatformioCoreDirResult from '../../models/ClearPlatformioCoreDirResult';
 
 @Service()
 @Resolver()
@@ -48,6 +49,19 @@ export default class FirmwareResolver {
     return this.firmwareService.buildFlashFirmware(input, this.config.git);
   }
 
+  @Mutation(() => ClearPlatformioCoreDirResult)
+  async clearPlatformioCoreDir(): Promise<ClearPlatformioCoreDirResult> {
+    try {
+      await this.firmwareService.clearPlatformioCoreDir();
+      return new ClearPlatformioCoreDirResult(true);
+    } catch (e) {
+      return new ClearPlatformioCoreDirResult(
+        false,
+        `Failed to clear platformio state: ${e}`
+      );
+    }
+  }
+
   @Subscription(() => BuildProgressNotification, {
     topics: [PubSubTopic.BuildProgressNotification],
   })

src/api/src/models/ClearPlatformioCoreDirResult.ts

@@ -0,0 +1,15 @@
+import { Field, ObjectType } from 'type-graphql';
+
+@ObjectType('ClearPlatformioCoreDirResult')
+export default class ClearPlatformioCoreDirResult {
+  @Field()
+  success: boolean;
+
+  @Field({ nullable: true })
+  message?: string;
+
+  constructor(success: boolean, message?: string) {
+    this.success = success;
+    this.message = message;
+  }
+}

src/api/src/services/Firmware/index.ts

@@ -1,6 +1,8 @@
 import { Service } from 'typedi';
 import { PubSubEngine } from 'graphql-subscriptions';
 import * as os from 'os';
+import * as fs from 'fs';
+import rimraf from 'rimraf';
 import BuildJobType from '../../models/enum/BuildJobType';
 import DeviceTarget from '../../library/FirmwareBuilder/Enum/DeviceTarget';
 import UserDefinesMode from '../../models/enum/UserDefinesMode';
@@ -392,4 +394,30 @@ export default class FirmwareService {
       this.mutex.unlock();
     }
   }
+
+  async clearPlatformioCoreDir(): Promise<void> {
+    const platformioStateJson = await this.platformio.getPlatformioState();
+    if (
+      platformioStateJson.core_dir === undefined ||
+      platformioStateJson.core_dir.length === 0 ||
+      platformioStateJson.core_dir.indexOf('.platformio') === -1
+    ) {
+      throw new Error(`core_dir is invalid: ${platformioStateJson.core_dir}`);
+    }
+
+    const statResult = await fs.promises.lstat(platformioStateJson.core_dir);
+    if (!statResult.isDirectory()) {
+      throw new Error(`core_dir is invalid: ${platformioStateJson.core_dir}`);
+    }
+
+    return new Promise((resolve, reject) => {
+      rimraf(platformioStateJson.core_dir, (err) => {
+        if (err) {
+          reject();
+        } else {
+          resolve();
+        }
+      });
+    });
+  }
 }

src/ui/App.tsx

@@ -10,6 +10,7 @@ import client from './gql';
 import ConfiguratorView from './views/ConfiguratorView';
 import SettingsView from './views/SettingsView';
 import LogsView from './views/LogsView';
+import SupportView from './views/SupportView';
 
 export default function App() {
   return (
@@ -24,6 +25,7 @@ export default function App() {
             <Route path="/configurator" component={ConfiguratorView} />
             <Route path="/settings" component={SettingsView} />
             <Route path="/logs" component={LogsView} />
+            <Route path="/support" component={SupportView} />
           </Switch>
         </HashRouter>
       </ApolloProvider>

src/ui/components/Sidebar/index.tsx

@@ -11,6 +11,7 @@ import {
   Toolbar,
 } from '@material-ui/core';
 import BuildIcon from '@material-ui/icons/Build';
+import HelpIcon from '@material-ui/icons/Help';
 // import SettingsIcon from '@material-ui/icons/Settings';
 import ListIcon from '@material-ui/icons/List';
 import { matchPath, useLocation, Link } from 'react-router-dom';
@@ -44,6 +45,7 @@ const Sidebar: FunctionComponent<SidebarProps> = ({ navigationEnabled }) => {
     matchPath(location.pathname, '/configurator') !== null;
   // const settingsActive = matchPath(location.pathname, '/settings') !== null;
   const logsActive = matchPath(location.pathname, '/logs') !== null;
+  const supportActive = matchPath(location.pathname, '/support') !== null;
 
   return (
     <Drawer
@@ -97,6 +99,20 @@ const Sidebar: FunctionComponent<SidebarProps> = ({ navigationEnabled }) => {
             </ListItemIcon>
             <ListItemText primary="Logs" />
           </ListItem>
+
+          <ListItem
+            component={Link}
+            to="/support"
+            selected={supportActive}
+            className={styles.menuItem}
+            button
+            disabled={!navigationEnabled}
+          >
+            <ListItemIcon>
+              <HelpIcon />
+            </ListItemIcon>
+            <ListItemText primary="Support" />
+          </ListItem>
         </List>
       </div>
     </Drawer>

src/ui/gql/generated/types.ts

@@ -110,6 +110,7 @@ export enum UserDefineKey {
 export type Mutation = {
   readonly __typename?: 'Mutation';
   readonly buildFlashFirmware: BuildFlashFirmwareResult;
+  readonly clearPlatformioCoreDir: ClearPlatformioCoreDirResult;
 };
 
 export type MutationBuildFlashFirmwareArgs = {
@@ -175,6 +176,12 @@ export type UserDefineInput = {
   readonly value?: Maybe<Scalars['String']>;
 };
 
+export type ClearPlatformioCoreDirResult = {
+  readonly __typename?: 'ClearPlatformioCoreDirResult';
+  readonly success: Scalars['Boolean'];
+  readonly message?: Maybe<Scalars['String']>;
+};
+
 export type Subscription = {
   readonly __typename?: 'Subscription';
   readonly buildProgressNotifications: BuildProgressNotification;
@@ -255,6 +262,18 @@ export type BuildProgressNotificationsSubscription = {
   } & Pick<BuildProgressNotification, 'type' | 'step' | 'message'>;
 };
 
+export type ClearPlatformioCoreDirMutationVariables = Exact<{
+  [key: string]: never;
+}>;
+
+export type ClearPlatformioCoreDirMutation = {
+  readonly __typename?: 'Mutation';
+} & {
+  readonly clearPlatformioCoreDir: {
+    readonly __typename?: 'ClearPlatformioCoreDirResult';
+  } & Pick<ClearPlatformioCoreDirResult, 'success' | 'message'>;
+};
+
 export type TargetDeviceOptionsQueryVariables = Exact<{
   target: DeviceTarget;
 }>;
@@ -469,6 +488,55 @@ export type BuildProgressNotificationsSubscriptionHookResult = ReturnType<
   typeof useBuildProgressNotificationsSubscription
 >;
 export type BuildProgressNotificationsSubscriptionResult = Apollo.SubscriptionResult<BuildProgressNotificationsSubscription>;
+export const ClearPlatformioCoreDirDocument = gql`
+  mutation clearPlatformioCoreDir {
+    clearPlatformioCoreDir {
+      success
+      message
+    }
+  }
+`;
+export type ClearPlatformioCoreDirMutationFn = Apollo.MutationFunction<
+  ClearPlatformioCoreDirMutation,
+  ClearPlatformioCoreDirMutationVariables
+>;
+
+/**
+ * __useClearPlatformioCoreDirMutation__
+ *
+ * To run a mutation, you first call `useClearPlatformioCoreDirMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useClearPlatformioCoreDirMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [clearPlatformioCoreDirMutation, { data, loading, error }] = useClearPlatformioCoreDirMutation({
+ *   variables: {
+ *   },
+ * });
+ */
+export function useClearPlatformioCoreDirMutation(
+  baseOptions?: Apollo.MutationHookOptions<
+    ClearPlatformioCoreDirMutation,
+    ClearPlatformioCoreDirMutationVariables
+  >
+) {
+  return Apollo.useMutation<
+    ClearPlatformioCoreDirMutation,
+    ClearPlatformioCoreDirMutationVariables
+  >(ClearPlatformioCoreDirDocument, baseOptions);
+}
+
+export type ClearPlatformioCoreDirMutationHookResult = ReturnType<
+  typeof useClearPlatformioCoreDirMutation
+>;
+export type ClearPlatformioCoreDirMutationResult = Apollo.MutationResult<ClearPlatformioCoreDirMutation>;
+export type ClearPlatformioCoreDirMutationOptions = Apollo.BaseMutationOptions<
+  ClearPlatformioCoreDirMutation,
+  ClearPlatformioCoreDirMutationVariables
+>;
 export const TargetDeviceOptionsDocument = gql`
   query targetDeviceOptions($target: DeviceTarget!) {
     targetDeviceOptions(target: $target) {

src/ui/gql/queries/clearPlatformioCoreDir.graphql

@@ -0,0 +1,6 @@
+mutation clearPlatformioCoreDir {
+  clearPlatformioCoreDir {
+    success
+    message
+  }
+}

src/ui/views/SettingsView/index.tsx

@@ -41,9 +41,6 @@ const SettingsView: FunctionComponent = () => {
               <ul>
                 <li>Display configurator version</li>
                 <li>Language selector</li>
-                <li>Git exec location</li>
-                <li>Python location</li>
-                <li>Platformio location</li>
               </ul>
             </CardContent>
           </Card>

src/ui/views/SupportView/Troubleshooting/ClearPlatformioDependencies/index.tsx

@@ -0,0 +1,54 @@
+import React, { FunctionComponent } from 'react';
+import { Button, makeStyles, Typography } from '@material-ui/core';
+import { useClearPlatformioCoreDirMutation } from '../../../../gql/generated/types';
+import Loader from '../../../../components/Loader';
+import ShowAlerts from '../../../../components/ShowAlerts';
+
+const useStyles = makeStyles((theme) => ({
+  actions: {
+    marginBottom: theme.spacing(2),
+  },
+}));
+
+const ClearPlatformioDependencies: FunctionComponent = () => {
+  const styles = useStyles();
+  const [
+    clearPlatformioCoreDirMutation,
+    { loading, data, error },
+  ] = useClearPlatformioCoreDirMutation();
+  const onClearPlatformioDependencies = () => {
+    clearPlatformioCoreDirMutation().catch((err) => {
+      console.error('clearPlatformioCoreDirMutation err: ', err);
+    });
+  };
+  return (
+    <div>
+      <Typography variant="h6">Corrupted platformio dependencies</Typography>
+      <p>
+        If you close the Configurator while platformio installs the required
+        dependencies their state might get corrupted. You can manually clear all
+        dependencies and start the build process again.
+      </p>
+      <div className={styles.actions}>
+        <Button variant="contained" onClick={onClearPlatformioDependencies}>
+          Clear platformio dependencies
+        </Button>
+      </div>
+      <Loader loading={loading} />
+      <ShowAlerts severity="error" messages={error} />
+      {data?.clearPlatformioCoreDir?.success === true && (
+        <ShowAlerts
+          severity="success"
+          messages="Corrupted platformio dependencies were deleted. Try building again."
+        />
+      )}
+      {data?.clearPlatformioCoreDir?.success === false && (
+        <ShowAlerts
+          severity="error"
+          messages={data?.clearPlatformioCoreDir?.message}
+        />
+      )}
+    </div>
+  );
+};
+export default ClearPlatformioDependencies;