@grafana-toolkit: promise improvements (#27868)

* Default `useSpinner` to a void argument

* Use promise-based file system functions in package:build

packages/grafana-toolkit/src/cli/tasks/package.build.ts

 import execa = require('execa');
-// @ts-ignore
-import * as fs from 'fs';
+import { promises as fs } from 'fs';
 // @ts-ignore
 import * as path from 'path';
 import chalk from 'chalk';
@@ -10,35 +9,20 @@ import globby from 'globby';
 
 let distDir: string, cwd: string;
 
-// @ts-ignore
-export const clean = useSpinner<void>('Cleaning', async () => await execa('npm', ['run', 'clean']));
+export const clean = useSpinner('Cleaning', () => execa('npm', ['run', 'clean']));
 
-// @ts-ignore
-const compile = useSpinner<void>('Compiling sources', () => execa('tsc', ['-p', './tsconfig.build.json']));
+const compile = useSpinner('Compiling sources', () => execa('tsc', ['-p', './tsconfig.build.json']));
 
-// @ts-ignore
-const rollup = useSpinner<void>('Bundling', () => execa('npm', ['run', 'bundle']));
+const rollup = useSpinner('Bundling', () => execa('npm', ['run', 'bundle']));
 
 interface SavePackageOptions {
   path: string;
   pkg: {};
 }
 
-// @ts-ignore
 export const savePackage = useSpinner<SavePackageOptions>(
   'Updating package.json',
-  // @ts-ignore
-  async ({ path, pkg }: SavePackageOptions) => {
-    return new Promise((resolve, reject) => {
-      fs.writeFile(path, JSON.stringify(pkg, null, 2), err => {
-        if (err) {
-          reject(err);
-          return;
-        }
-        resolve();
-      });
-    });
-  }
+  ({ path, pkg }: SavePackageOptions) => fs.writeFile(path, JSON.stringify(pkg, null, 2))
 );
 
 const preparePackage = async (pkg: any) => {
@@ -70,44 +54,22 @@ const preparePackage = async (pkg: any) => {
 const moveFiles = () => {
   const files = ['README.md', 'CHANGELOG.md', 'index.js'];
 
-  // @ts-ignore
-  return useSpinner<void>(`Moving ${files.join(', ')} files`, async () => {
-    const promises = files.map(file => {
-      return new Promise((resolve, reject) => {
-        fs.copyFile(`${cwd}/${file}`, `${distDir}/${file}`, err => {
-          if (err) {
-            reject(err);
-            return;
-          }
-          resolve();
-        });
-      });
-    });
-
-    await Promise.all(promises);
+  return useSpinner(`Moving ${files.join(', ')} files`, () => {
+    const promises = files.map(file => fs.copyFile(`${cwd}/${file}`, `${distDir}/${file}`));
+    return Promise.all(promises);
   })();
 };
 
 const moveStaticFiles = async (pkg: any) => {
   if (pkg.name.endsWith('/ui')) {
-    const staticFiles = await globby('src/**/*.{png,svg,gif,jpg}');
-    return useSpinner<void>(`Moving static files`, async () => {
-      const promises = staticFiles.map(file => {
-        return new Promise((resolve, reject) => {
-          fs.copyFile(file, file.replace(/^src/, 'compiled'), (err: any) => {
-            if (err) {
-              reject(err);
-              return;
-            }
-            resolve();
-          });
-        });
-      });
-
+    return useSpinner('Moving static files', async () => {
+      const staticFiles = await globby('src/**/*.{png,svg,gif,jpg}');
+      const promises = staticFiles.map(file => fs.copyFile(file, file.replace(/^src/, 'compiled')));
       await Promise.all(promises);
     })();
   }
 };
+
 interface PackageBuildOptions {
   scope: string;
 }

packages/grafana-toolkit/src/cli/tasks/plugin.build.ts

@@ -24,7 +24,7 @@ interface Fixable {
 
 export const bundlePlugin = useSpinner<PluginBundleOptions>('Compiling...', async options => await bundleFn(options));
 
-export const clean = useSpinner<void>('Cleaning', async () => await rimraf(`${process.cwd()}/dist`));
+export const clean = useSpinner('Cleaning', async () => await rimraf(`${process.cwd()}/dist`));
 
 const copyIfNonExistent = (srcPath: string, destPath: string) =>
   copyFile(srcPath, destPath, COPYFILE_EXCL)
@@ -35,7 +35,7 @@ const copyIfNonExistent = (srcPath: string, destPath: string) =>
       }
     });
 
-export const prepare = useSpinner<void>('Preparing', async () => {
+export const prepare = useSpinner('Preparing', async () => {
   await Promise.all([
     // Remove local dependencies for @grafana/data/node_modules
     // See: https://github.com/grafana/grafana/issues/26748
@@ -57,7 +57,7 @@ export const prepare = useSpinner<void>('Preparing', async () => {
 });
 
 // @ts-ignore
-const typecheckPlugin = useSpinner<void>('Typechecking', async () => {
+const typecheckPlugin = useSpinner('Typechecking', async () => {
   await execa('tsc', ['--noEmit']);
 });
 

packages/grafana-toolkit/src/cli/tasks/plugin.dev.ts

@@ -11,7 +11,7 @@ const bundlePlugin = useSpinner<PluginBundleOptions>('Bundling plugin in dev mod
   return bundleFn(options);
 });
 
-const yarnlink = useSpinner<void>('Linking local toolkit', async () => {
+const yarnlink = useSpinner('Linking local toolkit', async () => {
   try {
     // Make sure we are not using package.json defined toolkit
     await execa('yarn', ['remove', '@grafana/toolkit']);

packages/grafana-toolkit/src/cli/tasks/plugin/create.ts

@@ -149,7 +149,9 @@ export const prepareJsonFiles = useSpinner<{ type: PluginType; pluginDetails: Pl
   }
 );
 
-export const removeGitFiles = useSpinner('Cleaning', async pluginPath => rmdir(`${path.resolve(pluginPath, '.git')}`));
+export const removeGitFiles = useSpinner<string>('Cleaning', async pluginPath =>
+  rmdir(`${path.resolve(pluginPath, '.git')}`)
+);
 
 /* eslint-disable no-console */
 export const formatPluginDetails = (details: PluginDetails) => {

packages/grafana-toolkit/src/cli/tasks/toolkit.build.ts

@@ -9,10 +9,10 @@ const path = require('path');
 let distDir: string, cwd: string;
 
 // @ts-ignore
-export const clean = useSpinner<void>('Cleaning', async () => await execa('npm', ['run', 'clean']));
+export const clean = useSpinner('Cleaning', async () => await execa('npm', ['run', 'clean']));
 
 // @ts-ignore
-const compile = useSpinner<void>('Compiling sources', async () => {
+const compile = useSpinner('Compiling sources', async () => {
   try {
     await execa('tsc', ['-p', './tsconfig.json']);
   } catch (e) {
@@ -64,7 +64,7 @@ const copyFiles = () => {
     'src/config/jest.plugin.config.local.js',
   ];
   // @ts-ignore
-  return useSpinner<void>(`Moving ${files.join(', ')} files`, async () => {
+  return useSpinner(`Moving ${files.join(', ')} files`, async () => {
     const promises = files.map(file => {
       return new Promise((resolve, reject) => {
         const basedir = path.dirname(`${distDir}/${file}`);
@@ -88,7 +88,7 @@ const copyFiles = () => {
 const copySassFiles = () => {
   const files = ['_variables.generated.scss', '_variables.dark.generated.scss', '_variables.light.generated.scss'];
   // @ts-ignore
-  return useSpinner<void>(`Copy scss files ${files.join(', ')} files`, async () => {
+  return useSpinner(`Copy scss files ${files.join(', ')} files`, async () => {
     const sassDir = path.resolve(cwd, '../../public/sass/');
     const promises = files.map(file => {
       return new Promise((resolve, reject) => {

packages/grafana-toolkit/src/cli/utils/useSpinner.ts

 import ora = require('ora');
 
-type FnToSpin<T> = (options: T) => Promise<void>;
+type FnToSpin<T> = (options: T) => Promise<any>;
 
-export const useSpinner = <T = any>(spinnerLabel: string, fn: FnToSpin<T>, killProcess = true) => {
+export function useSpinner<T = void>(spinnerLabel: string, fn: FnToSpin<T>, killProcess = true) {
   return async (options: T) => {
     const spinner = ora(spinnerLabel);
     spinner.start();
@@ -17,4 +17,4 @@ export const useSpinner = <T = any>(spinnerLabel: string, fn: FnToSpin<T>, killP
       }
     }
   };
-};
+}