fix lint issues: no-extraneous-dependencies & no-unused-vars

Signed-off-by: Alfonso Martínez <[email protected]>

.eslintrc.js

@@ -57,7 +57,10 @@ module.exports = {
     'default-case': 'off',
     'global-require': 'off',
     'implicit-arrow-linebreak': 'off',
-    'import/no-extraneous-dependencies': 'off',
+    'import/no-extraneous-dependencies': [
+      'error',
+      { packageDir: ['.', './packages/odf'] },
+    ],
     'jsx-a11y/anchor-is-valid': 'off',
     'jsx-a11y/click-events-have-key-events': 'off',
     'jsx-a11y/label-has-associated-control': 'off',
@@ -92,7 +95,7 @@ module.exports = {
     'react/no-unused-state': 'off',
     'react/sort-comp': 'off',
     'no-unused-vars': 'off',
-    '@typescript-eslint/no-unused-vars': 'off',
+    '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
     'react/function-component-definition': [
       2,
       {

cypress/helpers/add-capacity.ts

@@ -1,4 +1,4 @@
-import * as _ from 'lodash';
+import * as _ from 'lodash-es';
 
 export const createOSDTreeMap = (nodes) =>
   nodes.reduce((acc, curr) => Object.assign(acc, { [curr.id]: curr }), {});

cypress/tests/add-capacity.spec.ts

@@ -1,4 +1,4 @@
-import * as _ from 'lodash';
+import * as _ from 'lodash-es';
 import {
   CLUSTER_STATUS,
   STORAGE_SYSTEM_NAME,

package.json

@@ -51,11 +51,16 @@
     "@patternfly/react-core": "4.175.4",
     "@patternfly/react-icons": "^4.11.0",
     "@patternfly/react-table": "4.104.7",
+    "@patternfly/react-tokens": "^4.12.0",
     "@types/react-dnd-html5-backend": "^3.0.2",
     "classnames": "^2.3.1",
     "eslint-config-airbnb": "18.2.1",
     "fuzzysearch": "^1.0.3",
+    "history": "^4.9.0",
+    "i18next": "^20.2.1",
     "i18next-conv": "^10.1.0",
+    "js-base64": "^2.1.9",
+    "js-yaml": "^3.13.1",
     "lodash-es": "^4.17.21",
     "murmurhash-js": "^1.0.0",
     "react": "^17.0.1",
@@ -69,7 +74,9 @@
     "react-redux": "^7.2.6",
     "react-router": "5.2.0",
     "react-router-dom": "5.2.0",
-    "react-tagsinput": "^3.19.0"
+    "react-tagsinput": "^3.19.0",
+    "redux": "^4.0.0",
+    "victory-core": "^35.4.4"
   },
   "devDependencies": {
     "@cypress/webpack-preprocessor": "^5.9.1",

packages/mco/components/data-policies/data-policies-list/data-policies-list.tsx

@@ -10,7 +10,7 @@ type DataPoliciesListProps = {
   history: RouteComponentProps['history'];
 };
 
-export const DataPoliciesList: React.FC<DataPoliciesListProps> = (props) => {
+export const DataPoliciesList: React.FC<DataPoliciesListProps> = () => {
   const { t } = useCustomTranslation();
   const title = t('Data policies');
   const pages = [

packages/mco/components/disaster-recovery/app-dr-status/dr-status-table.tsx

@@ -10,7 +10,7 @@ import {
   StatusIconAndText,
 } from '@openshift-console/dynamic-plugin-sdk';
 import { TFunction } from 'i18next';
-import * as _ from 'lodash';
+import * as _ from 'lodash-es';
 import {
   Flex,
   FlexItem,

packages/mco/components/disaster-recovery/create-dr-policy/create-dr-policy.tsx

@@ -13,7 +13,6 @@ import {
   k8sPatch,
   useK8sWatchResource,
 } from '@openshift-console/dynamic-plugin-sdk';
-import * as _ from 'lodash';
 import { RouteComponentProps, match as Match } from 'react-router';
 import {
   Form,

packages/mco/components/disaster-recovery/create-dr-policy/select-cluster-list.tsx

@@ -3,7 +3,6 @@ import { isMinimumSupportedODFVersion } from '@odf/mco/utils';
 import { useCustomTranslation } from '@odf/shared/useCustomTranslationHook';
 import { referenceForModel } from '@odf/shared/utils';
 import { useK8sWatchResource } from '@openshift-console/dynamic-plugin-sdk';
-import * as _ from 'lodash';
 import {
   DataList,
   DataListItem,
@@ -233,7 +232,7 @@ export const SelectClusterList: React.FC<SelectClusterListProps> = ({
               placeholder={t('Cluster name')}
               onChange={(val) => setNameSearch(val)}
               value={nameSearch}
-              onClear={(e) => setNameSearch('')}
+              onClear={() => setNameSearch('')}
             />
           </ToolbarItem>
         </ToolbarContent>

packages/mco/components/disaster-recovery/create-dr-policy/selected-cluster-view.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import * as _ from 'lodash';
 import {
   Text,
   Badge,
@@ -20,7 +19,7 @@ type SelectedClusterProps = {
 export const SelectedCluster: React.FC<SelectedClusterProps> = ({
   id,
   cluster,
-  dispatch,
+  dispatch, // eslint-disable-line @typescript-eslint/no-unused-vars
 }) => {
   const { name, region, storageSystemName } = cluster;
   return (

packages/mco/components/disaster-recovery/drpolicy-list-page/drpolicy-list-page.tsx

@@ -21,7 +21,6 @@ import {
   TableColumn,
 } from '@openshift-console/dynamic-plugin-sdk';
 import classNames from 'classnames';
-import * as _ from 'lodash';
 import { Trans } from 'react-i18next';
 import { useHistory } from 'react-router';
 import { sortable, wrappable } from '@patternfly/react-table';

packages/mco/components/mco-dashboard/dashboard.tsx

@@ -31,7 +31,7 @@ export const MCODashboard: React.FC = () => {
   );
 };
 
-const MCODashboardPage: React.FC<MCODashboardPageProps> = (props) => {
+const MCODashboardPage: React.FC<MCODashboardPageProps> = () => {
   const { t } = useCustomTranslation();
   const title = t('Storage System');
   const pages = [

packages/mco/components/mco-dashboard/status-card/status-card.tsx

@@ -14,7 +14,6 @@ import {
   PrometheusResponse,
 } from '@openshift-console/dynamic-plugin-sdk';
 import { HealthBody } from '@openshift-console/dynamic-plugin-sdk-internal';
-import * as _ from 'lodash';
 import {
   Flex,
   FlexItem,

packages/mco/components/mco-dashboard/system-capacity-card/capacity-card.tsx

@@ -19,7 +19,7 @@ import {
 } from '@openshift-console/dynamic-plugin-sdk';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import { TFunction } from 'i18next';
-import * as _ from 'lodash';
+import * as _ from 'lodash-es';
 import {
   Progress,
   ProgressMeasureLocation,

packages/ocs/block-pool/body.tsx

@@ -8,7 +8,7 @@ import {
 } from '@odf/shared/types';
 import { useCustomTranslation } from '@odf/shared/useCustomTranslationHook';
 import { useFlag } from '@openshift-console/dynamic-plugin-sdk';
-import * as _ from 'lodash';
+import * as _ from 'lodash-es';
 import {
   Alert,
   Dropdown,

packages/ocs/dashboards/block-pool/mirroring-card.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { useCustomTranslation } from '@odf/shared/useCustomTranslationHook';
 import { StatusIconAndText } from '@openshift-console/dynamic-plugin-sdk';
 import { TFunction } from 'i18next';
-import * as _ from 'lodash';
+import * as _ from 'lodash-es';
 import { Trans } from 'react-i18next';
 import { ChartPie, ChartThemeColor } from '@patternfly/react-charts';
 import {

packages/ocs/dashboards/object-service/capacity-breakdown/capacity-breakdown-card.tsx

@@ -21,7 +21,7 @@ import {
   useFlag,
 } from '@openshift-console/dynamic-plugin-sdk';
 import { K8sModel } from '@openshift-console/dynamic-plugin-sdk/lib/api/common-types';
-import * as _ from 'lodash';
+import * as _ from 'lodash-es';
 import {
   Select,
   SelectGroup,

packages/ocs/dashboards/object-service/data-consumption-card/data-consumption-card-utils.ts

@@ -7,7 +7,7 @@ import {
   PrometheusResponse,
 } from '@openshift-console/dynamic-plugin-sdk';
 import { TFunction } from 'i18next';
-import * as _ from 'lodash';
+import * as _ from 'lodash-es';
 
 export const DataConsumersValue = {
   [Breakdown.PROVIDERS]: 'PROVIDERS_',

packages/ocs/dashboards/object-service/data-consumption-card/data-consumption-card.tsx

@@ -25,7 +25,7 @@ import {
   PrometheusResponse,
   useFlag,
 } from '@openshift-console/dynamic-plugin-sdk';
-import * as _ from 'lodash';
+import * as _ from 'lodash-es';
 import { Card, CardBody, CardHeader, CardTitle } from '@patternfly/react-core';
 import { DataConsumptionDropdown } from './data-consumption-card-dropdown';
 import DataConsumptionGraph from './data-consumption-graph';

packages/ocs/dashboards/object-service/data-consumption-card/data-consumption-graph.tsx

@@ -9,7 +9,7 @@ import { DATA_CONSUMPTION_QUERIES } from '@odf/ocs/queries';
 import { GraphEmpty } from '@odf/shared/charts';
 import { useCustomTranslation } from '@odf/shared/useCustomTranslationHook';
 import { PrometheusResponse } from '@openshift-console/dynamic-plugin-sdk';
-import * as _ from 'lodash';
+import * as _ from 'lodash-es';
 import {
   Chart,
   ChartAxis,

packages/ocs/dashboards/object-service/data-consumption-card/performance-graph.tsx

@@ -6,7 +6,7 @@ import { useCustomTranslation } from '@odf/shared/useCustomTranslationHook';
 import { DataPoint } from '@odf/shared/utils';
 import { humanizeDecimalBytesPerSec, humanizeSeconds } from '@odf/shared/utils';
 import classNames from 'classnames';
-import * as _ from 'lodash';
+import * as _ from 'lodash-es';
 import {
   Chart,
   ChartVoronoiContainer,

packages/ocs/dashboards/object-service/details-card/details-card.tsx

@@ -27,7 +27,6 @@ import {
 } from '@openshift-console/dynamic-plugin-sdk';
 import { DetailsBody } from '@openshift-console/dynamic-plugin-sdk-internal';
 import { OverviewDetailItem as DetailItem } from '@openshift-console/plugin-shared';
-import * as _ from 'lodash';
 import { Link } from 'react-router-dom';
 import { Card, CardBody, CardHeader, CardTitle } from '@patternfly/react-core';
 import { getOCSVersion } from '../../../utils';

packages/ocs/dashboards/object-service/resource-providers-card/resource-providers-card-item.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { RedExclamationCircleIcon } from '@odf/shared/status/icons';
-import * as _ from 'lodash';
+import * as _ from 'lodash-es';
 
 const ResourceProvidersItemStatus: React.FC<ResourceProvidersRowStatusProps> =
   // eslint-disable-next-line react/display-name

packages/ocs/dashboards/object-service/resource-providers-card/resource-providers-card.tsx

@@ -7,7 +7,7 @@ import {
 import { useCustomTranslation } from '@odf/shared/useCustomTranslationHook';
 import { getMetric } from '@odf/shared/utils';
 import { PrometheusResponse } from '@openshift-console/dynamic-plugin-sdk';
-import * as _ from 'lodash';
+import * as _ from 'lodash-es';
 import { Card, CardBody, CardHeader, CardTitle } from '@patternfly/react-core';
 import { ResourceProvidersBody } from './resource-providers-card-body';
 import {

packages/ocs/dashboards/object-service/status-card/status-card.tsx

@@ -22,7 +22,7 @@ import {
   HealthBody,
 } from '@openshift-console/dynamic-plugin-sdk-internal';
 import { SubsystemHealth } from '@openshift-console/dynamic-plugin-sdk/lib/extensions/dashboard-types';
-import * as _ from 'lodash';
+import * as _ from 'lodash-es';
 import {
   Gallery,
   GalleryItem,

packages/ocs/dashboards/persistent-internal/activity-card/activity-card.tsx

@@ -24,7 +24,7 @@ import {
   RecentEventsBody,
 } from '@openshift-console/dynamic-plugin-sdk-internal';
 import { EventKind } from '@openshift-console/dynamic-plugin-sdk/lib/api/internal-types';
-import * as _ from 'lodash';
+import * as _ from 'lodash-es';
 import { Card, CardHeader, CardTitle } from '@patternfly/react-core';
 import { OCS_OPERATOR, PVC_PROVISIONER_ANNOTATION } from '../../../constants';
 import { StorageClusterModel } from '../../../models';

packages/ocs/dashboards/persistent-internal/status-card/status-card.tsx

@@ -20,7 +20,7 @@ import {
   HealthItem,
 } from '@openshift-console/dynamic-plugin-sdk-internal';
 import { SubsystemHealth } from '@openshift-console/dynamic-plugin-sdk/lib/extensions/dashboard-types';
-import * as _ from 'lodash';
+import * as _ from 'lodash-es';
 import {
   Gallery,
   GalleryItem,

packages/ocs/dashboards/persistent-internal/utilization-card/prometheus-multi-utilization-item.tsx

@@ -6,7 +6,6 @@ import {
 } from '@odf/shared/hooks/custom-prometheus-poll';
 import { Humanize } from '@openshift-console/dynamic-plugin-sdk';
 import { useUtilizationDuration } from '@openshift-console/dynamic-plugin-sdk-internal';
-import * as _ from 'lodash';
 import { MultilineUtilizationItem } from './multi-utilization-item';
 
 export const PrometheusMultilineUtilizationItem: React.FC<PrometheusMultilineUtilizationItemProps> =

packages/ocs/queries/object-storage.ts

@@ -1,6 +1,6 @@
 import { NooBaaBucketClassModel } from '@odf/core/models';
 import { ProjectModel } from '@odf/shared/models';
-import * as _ from 'lodash';
+import * as _ from 'lodash-es';
 import {
   CapacityBreakdown,
   ServiceType,

packages/ocs/storage-class/sc-form.tsx

@@ -53,7 +53,7 @@ import {
   useK8sWatchResource,
   useModal,
 } from '@openshift-console/dynamic-plugin-sdk';
-import * as _ from 'lodash';
+import * as _ from 'lodash-es';
 import {
   Alert,
   Dropdown,

packages/ocs/utils/common.ts

@@ -16,7 +16,7 @@ import {
 } from '@odf/shared/types';
 import { DataPoint, humanizePercentage } from '@odf/shared/utils';
 import { EventKind } from '@openshift-console/dynamic-plugin-sdk-internal/lib/api/internal-types';
-import * as _ from 'lodash';
+import * as _ from 'lodash-es';
 import { cephStorageLabel, CEPH_NS } from '../constants';
 
 const OCS_OPERATOR = 'ocs-operator';

packages/ocs/utils/metrics.ts

@@ -6,7 +6,7 @@ import {
   PrometheusRule,
   Rule,
 } from '@openshift-console/dynamic-plugin-sdk';
-import * as _ from 'lodash';
+import * as _ from 'lodash-es';
 import { murmur3 } from 'murmurhash-js';
 
 export const getStackChartStats: GetStackStats = (

packages/odf/components/bucket-class/time-duration-dropdown.tsx

@@ -9,7 +9,7 @@ import {
 import { TimeUnits } from '../../constants';
 
 export const TimeDurationDropdown: React.FC<TimeDurationDropdownProps> = ({
-  id,
+  id, // eslint-disable-line @typescript-eslint/no-unused-vars
   inputClassName,
   onChange,
   required,

packages/odf/components/create-storage-system/create-storage-system-steps/create-local-volume-set-step/body.tsx

@@ -12,7 +12,7 @@ import { SingleSelectDropdown } from '@odf/shared/dropdown/singleselectdropdown'
 import { NodeKind } from '@odf/shared/types';
 import { useCustomTranslation } from '@odf/shared/useCustomTranslationHook';
 import { TFunction } from 'i18next';
-import * as _ from 'lodash';
+import * as _ from 'lodash-es';
 import { SelectOption } from '@patternfly/react-core';
 import {
   FormGroup,

packages/odf/components/create-storage-system/create-storage-system-steps/create-local-volume-set-step/selected-capacity.tsx

@@ -19,7 +19,7 @@ import { NodeKind } from '@odf/shared/types';
 import { useCustomTranslation } from '@odf/shared/useCustomTranslationHook';
 import { convertToBaseValue, humanizeBinaryBytes } from '@odf/shared/utils';
 import { useK8sWatchResource } from '@openshift-console/dynamic-plugin-sdk';
-import * as _ from 'lodash';
+import * as _ from 'lodash-es';
 import { ChartDonut, ChartLabel } from '@patternfly/react-charts';
 import { Button } from '@patternfly/react-core';
 import { WizardState, WizardDispatch } from '../../reducer';

packages/odf/components/create-storage-system/create-storage-system-steps/review-and-create-step/review-and-create-step.tsx

@@ -14,7 +14,7 @@ import { BackingStorageType, DeploymentType } from '@odf/core/types';
 import { useCustomTranslation } from '@odf/shared/useCustomTranslationHook';
 import { humanizeBinaryBytes } from '@odf/shared/utils';
 import { useFlag } from '@openshift-console/dynamic-plugin-sdk';
-import * as _ from 'lodash';
+import * as _ from 'lodash-es';
 import {
   TextContent,
   Text,

packages/odf/components/create-storage-system/create-storage-system-steps/security-and-network-step/encryption.tsx

@@ -271,7 +271,7 @@ export const EncryptionForm: React.FC<EncryptionProps> = ({
   kms,
   dispatch,
   infraType,
-  isMCG,
+  isMCG, // eslint-disable-line @typescript-eslint/no-unused-vars
 }) => {
   // enclosed in a "Form" so that child components can use default pf classes
   return (

packages/odf/components/create-storage-system/external-storage/red-hat-ceph-storage/index.tsx

@@ -22,7 +22,7 @@ import { ListKind, PodKind } from '@odf/shared/types';
 import { useCustomTranslation } from '@odf/shared/useCustomTranslationHook';
 import { getAPIVersionForModel } from '@odf/shared/utils';
 import { K8sKind } from '@openshift-console/dynamic-plugin-sdk/lib/api/common-types';
-import * as _ from 'lodash';
+import * as _ from 'lodash-es';
 import { Trans } from 'react-i18next';
 import {
   FormGroup,

packages/odf/components/create-storage-system/header.tsx

@@ -4,7 +4,7 @@ import { TextVariants, Text, TextContent } from '@patternfly/react-core';
 import './create-storage-system.scss';
 
 export const CreateStorageSystemHeader: React.FC<CreateStorageSystemHeaderProps> =
-  ({ url }) => {
+  () => {
     const { t } = useCustomTranslation();
     return (
       <div className="odf-create-storage-system__header">

packages/odf/components/create-storage-system/payloads.ts

@@ -10,7 +10,7 @@ import { K8sResourceKind, Patch, StorageSystemKind } from '@odf/shared/types';
 import { getAPIVersionForModel, k8sPatchByName } from '@odf/shared/utils';
 import { k8sCreate, k8sGet } from '@openshift-console/dynamic-plugin-sdk';
 import { K8sKind } from '@openshift-console/dynamic-plugin-sdk/lib/api/common-types';
-import * as _ from 'lodash';
+import * as _ from 'lodash-es';
 import {
   ocsTaint,
   defaultRequestSize,

packages/odf/components/create-storage-system/reducer.ts

@@ -1,5 +1,5 @@
 import { NodeKind } from '@odf/shared/types';
-import * as _ from 'lodash';
+import * as _ from 'lodash-es';
 import {
   KMSEmptyState,
   NO_PROVISIONER,

packages/odf/components/create-storage-system/select-nodes-table/select-nodes-table.tsx

@@ -27,7 +27,7 @@ import {
   useListPageFilter,
 } from '@openshift-console/dynamic-plugin-sdk';
 import classNames from 'classnames';
-import * as _ from 'lodash';
+import * as _ from 'lodash-es';
 import { Table, TableHeader, TableBody } from '@patternfly/react-table';
 import { IRow, sortable } from '@patternfly/react-table';
 import { WizardNodeState } from '../reducer';