Performance: Standardize lodash imports to use destructured members (#33040)

* Performance: Standardize lodash imports to use destructured members
Changes lodash imports of the form `import x from 'lodash/x'` to
`import { x } from 'lodash'` to reduce bundle size.

* Remove unnecessary _ import from Graph component

* Enforce lodash import style

* Fix remaining lodash imports

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

@@ -1,8 +1,6 @@
-// @ts-ignore
-import * as _ from 'lodash';
+import { difference, sortBy } from 'lodash';
 import { Task } from './task';
 import GithubClient from '../utils/githubClient';
-import difference from 'lodash/difference';
 import chalk from 'chalk';
 import { useSpinner } from '../utils/useSpinner';
 
@@ -26,8 +24,8 @@ const getPackageChangelog = (packageName: string, issues: any[]) => {
   }
 
   let markdown = chalk.bold.yellow(`\n\n/*** ${packageName} changelog  ***/\n\n`);
-  const bugs = _.sortBy(issues.filter(filterBugs), 'title');
-  const notBugs = _.sortBy(difference(issues, bugs), 'title');
+  const bugs = sortBy(issues.filter(filterBugs), 'title');
+  const notBugs = sortBy(difference(issues, bugs), 'title');
 
   if (notBugs.length > 0) {
     markdown += '### Features / Enhancements\n';
@@ -89,7 +87,7 @@ const changelogTaskRunner = ({ milestone }: ChangelogOptions) =>
         mergedIssues.push(item);
       }
     }
-    const issues = _.sortBy(mergedIssues, 'title');
+    const issues = sortBy(mergedIssues, 'title');
 
     const toolkitIssues = issues.filter((item: any) =>
       item.labels.find((label: any) => label.name === 'area/grafana/toolkit')

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

@@ -1,6 +1,6 @@
 import { Task, TaskRunner } from './task';
 import fs from 'fs';
-import _ from 'lodash';
+import { template as _template } from 'lodash';
 import { prompt } from 'inquirer';
 import { pascalCase } from '../utils/pascalCase';
 import { promptConfirm, promptInput, promptList } from '../utils/prompt';
@@ -53,7 +53,7 @@ export const promptDetails = () => {
 export const generateComponents: ComponentGenerator = async ({ details, path }) => {
   const name = pascalCase(details.name);
   const getCompiled = (template: string) => {
-    return _.template(template)({ ...details, name });
+    return _template(template)({ ...details, name });
   };
   const filePath = `${path}/${name}`;
   let paths = [];

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

@@ -2,7 +2,7 @@ import chalk from 'chalk';
 import commandExists from 'command-exists';
 import { promises as fs, readFileSync } from 'fs';
 import { prompt } from 'inquirer';
-import kebabCase from 'lodash/kebabCase';
+import { kebabCase } from 'lodash';
 import path from 'path';
 import gitPromise from 'simple-git/promise';
 import { promptConfirm, promptInput } from '../../utils/prompt';

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

@@ -1,3 +1,3 @@
-import _ from 'lodash';
+import { flow, camelCase, upperFirst } from 'lodash';
 
-export const pascalCase = _.flow(_.camelCase, _.upperFirst);
+export const pascalCase = flow(camelCase, upperFirst);