Update storybook version (#685)

**What this PR does / why we need it**:

* Change hierarchy separators (`|` -> `/`) 
  * https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#removed-hierarchy-separators
* Remove unnecessary config for support TypeScript

**Which issue(s) this PR fixes**:

Fixes #

**Does this PR introduce a user-facing change?**:
<!--
If no, just write "NONE" in the release-note block below.
-->
```release-note
NONE
```

This PR was merged by Kapetanios.

pkg/app/web/.storybook/webpack.config.js

@@ -1,32 +1,18 @@
 const path = require("path");
 
 module.exports = ({ config }) => {
-  config.module.rules.push(
-    {
-      test: /\.(ts|tsx)$/,
-      use: [
-        {
-          loader: "ts-loader",
-          options: {
-            transpileOnly: true
-          }
-        },
-        require.resolve("react-docgen-typescript-loader")
-      ]
-    },
-    {
-      type: "javascript/auto",
-      test: /\.mjs$/,
-      use: []
-    }
-  );
+  config.module.rules.push({
+    type: "javascript/auto",
+    test: /\.mjs$/,
+    use: [],
+  });
   config.resolve.extensions.push(".mjs", ".ts", ".tsx", ".js");
   config.resolve.modules.push(
     path.resolve(__dirname, "../node_modules"),
     "node_modules"
   );
   config.resolve.alias = {
-    pipe: path.resolve(__dirname, "../../../../bazel-bin/")
+    pipe: path.resolve(__dirname, "../../../../bazel-bin/"),
   };
 
   return config;

pkg/app/web/package.json

@@ -16,10 +16,10 @@
   "devDependencies": {
     "@bazel/labs": "^1.6.1",
     "@bazel/typescript": "^1.6.1",
-    "@storybook/addon-actions": "^5.3.18",
-    "@storybook/addon-docs": "^5.3.18",
-    "@storybook/addons": "^5.3.18",
-    "@storybook/react": "^5.3.18",
+    "@storybook/addon-actions": "^6.0.16",
+    "@storybook/addon-docs": "^6.0.16",
+    "@storybook/addons": "^6.0.16",
+    "@storybook/react": "^6.0.16",
     "@testing-library/react": "^10.4.3",
     "@types/google-protobuf": "^3.7.2",
     "@types/jest": "^25.2.3",

pkg/app/web/src/components/add-application-form.stories.tsx

@@ -4,7 +4,7 @@ import { action } from "@storybook/addon-actions";
 import { createDecoratorRedux } from "../../.storybook/redux-decorator";
 
 export default {
-  title: "APPLICATION|AddApplicationForm",
+  title: "APPLICATION/AddApplicationForm",
   component: AddApplicationForm,
   decorators: [createDecoratorRedux({})],
 };

pkg/app/web/src/components/add-env-form.stories.tsx

@@ -3,7 +3,7 @@ import { AddEnvForm } from "./add-env-form";
 import { action } from "@storybook/addon-actions";
 
 export default {
-  title: "SETTINGS|AddEnvForm",
+  title: "SETTINGS/AddEnvForm",
   component: AddEnvForm,
 };
 

pkg/app/web/src/components/add-piped-form.stories.tsx

@@ -3,7 +3,7 @@ import { AddPipedForm } from "./add-piped-form";
 import { action } from "@storybook/addon-actions";
 
 export default {
-  title: "SETTINGS|AddPipedForm",
+  title: "SETTINGS/AddPipedForm",
   component: AddPipedForm,
 };
 

pkg/app/web/src/components/application-detail.stories.tsx

@@ -42,7 +42,7 @@ const dummyStore: Partial<AppState> = {
 };
 
 export default {
-  title: "APPLICATION|ApplicationDetail",
+  title: "APPLICATION/ApplicationDetail",
   component: ApplicationDetail,
 };
 

pkg/app/web/src/components/application-filter.stories.tsx

@@ -4,7 +4,7 @@ import { action } from "@storybook/addon-actions";
 import { createDecoratorRedux } from "../../.storybook/redux-decorator";
 
 export default {
-  title: "ApplicationFilter",
+  title: "APPLICATION/ApplicationFilter",
   component: ApplicationFilter,
   decorators: [
     createDecoratorRedux({

pkg/app/web/src/components/application-list.stories.tsx

@@ -4,7 +4,7 @@ import { createDecoratorRedux } from "../../.storybook/redux-decorator";
 import { dummyApplication } from "../__fixtures__/dummy-application";
 
 export default {
-  title: "APPLICATION|ApplicationList",
+  title: "APPLICATION/ApplicationList",
   component: ApplicationList,
   decorators: [
     createDecoratorRedux({

pkg/app/web/src/components/application-state-view.stories.tsx

@@ -4,7 +4,7 @@ import { createDecoratorRedux } from "../../.storybook/redux-decorator";
 import { dummyApplicationLiveState } from "../__fixtures__/dummy-application-live-state";
 
 export default {
-  title: "APPLICATION|ApplicationStateView",
+  title: "APPLICATION/ApplicationStateView",
   component: ApplicationStateView,
   decorators: [
     createDecoratorRedux({

pkg/app/web/src/components/approval-stage.stories.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import { ApprovalStage } from "./approval-stage";
 
 export default {
-  title: "DEPLOYMENT|Pipeline/ApprovalStage",
+  title: "DEPLOYMENT/Pipeline/ApprovalStage",
   component: ApprovalStage,
 };
 

pkg/app/web/src/components/deployment-config-form.stories.tsx

@@ -4,7 +4,7 @@ import { createDecoratorRedux } from "../../.storybook/redux-decorator";
 import { action } from "@storybook/addon-actions";
 
 export default {
-  title: "DeploymentConfigForm",
+  title: "DEPLOYMENT/DeploymentConfigForm",
   component: DeploymentConfigForm,
   decorators: [createDecoratorRedux({})],
 };

pkg/app/web/src/components/deployment-detail.stories.tsx

@@ -7,7 +7,7 @@ import { dummyPiped } from "../__fixtures__/dummy-piped";
 import { DeploymentStatus } from "../modules/deployments";
 
 export default {
-  title: "DEPLOYMENT|DeploymentDetail",
+  title: "DEPLOYMENT/DeploymentDetail",
   component: DeploymentDetail,
   decorators: [
     createDecoratorRedux({

pkg/app/web/src/components/deployment-filter.stories.tsx

@@ -6,7 +6,7 @@ import { dummyApplication } from "../__fixtures__/dummy-application";
 import { action } from "@storybook/addon-actions";
 
 export default {
-  title: "DeploymentFilter",
+  title: "DEPLOYMENT/DeploymentFilter",
   component: DeploymentFilter,
   decorators: [
     createDecoratorRedux({

pkg/app/web/src/components/deployment-item.stories.tsx

@@ -6,7 +6,7 @@ import { dummyApplication } from "../__fixtures__/dummy-application";
 import { dummyEnv } from "../__fixtures__/dummy-environment";
 
 export default {
-  title: "DEPLOYMENT|DeploymentItem",
+  title: "DEPLOYMENT/DeploymentItem",
   component: DeploymentItem,
   decorators: [
     createDecoratorRedux({

pkg/app/web/src/components/deployment-status-icon.stories.tsx

@@ -3,7 +3,7 @@ import { StatusIcon as DeploymentStatusIcon } from "./deployment-status-icon";
 import { DeploymentStatus } from "pipe/pkg/app/web/model/deployment_pb";
 
 export default {
-  title: "DEPLOYMENT|StatusIcon",
+  title: "DEPLOYMENT/StatusIcon",
   component: DeploymentStatusIcon,
 };
 

pkg/app/web/src/components/github-sso-form.stories.tsx

@@ -3,7 +3,7 @@ import { GithubSSOForm } from "./github-sso-form";
 import { action } from "@storybook/addon-actions";
 
 export default {
-  title: "GithubSSOForm",
+  title: "SETTINGS/GithubSSOForm",
   component: GithubSSOForm,
 };
 

pkg/app/web/src/components/header.stories.tsx

@@ -5,7 +5,7 @@ import { Provider } from "react-redux";
 import { Role } from "../../../../../bazel-bin/pkg/app/web/model/role_pb";
 
 export default {
-  title: "COMMON|Header",
+  title: "COMMON/Header",
   component: Header,
 };
 

pkg/app/web/src/components/health-status-icon.stories.tsx

@@ -3,7 +3,7 @@ import { KubernetesResourceHealthStatusIcon } from "./health-status-icon";
 import { HealthStatus } from "../modules/applications-live-state";
 
 export default {
-  title: "APPLICATION|HealthStatusIcon",
+  title: "APPLICATION/HealthStatusIcon",
   component: KubernetesResourceHealthStatusIcon,
 };
 

pkg/app/web/src/components/kubernetes-resource.stories.tsx

@@ -4,7 +4,7 @@ import { HealthStatus } from "../modules/applications-live-state";
 import { action } from "@storybook/addon-actions";
 
 export default {
-  title: "APPLICATION|KubernetesResource",
+  title: "APPLICATION/KubernetesResource",
   component: KubernetesResource,
 };
 

pkg/app/web/src/components/kubernetes-state-view.stories.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { KubernetesStateView } from "./kubernetes-state-view";
 
 export default {
-  title: "APPLICATION|KubernetesStateView",
+  title: "APPLICATION/KubernetesStateView",
   component: KubernetesStateView,
 };
 

pkg/app/web/src/components/labeled-text.stories.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { LabeledText } from "./labeled-text";
 
 export default {
-  title: "COMMON|LabeledText",
+  title: "COMMON/LabeledText",
   component: LabeledText,
 };
 

pkg/app/web/src/components/log-viewer.stories.tsx

@@ -4,7 +4,7 @@ import { createDecoratorRedux } from "../../.storybook/redux-decorator";
 import { LogSeverity } from "../modules/stage-logs";
 
 export default {
-  title: "DEPLOYMENT|LogViewer",
+  title: "DEPLOYMENT/LogViewer",
   component: LogViewer,
   decorators: [
     createDecoratorRedux({

pkg/app/web/src/components/log.stories.tsx

@@ -3,7 +3,7 @@ import { Log } from "./log";
 import { LogSeverity } from "../modules/stage-logs";
 
 export default {
-  title: "DEPLOYMENT|Log",
+  title: "DEPLOYMENT/Log",
   component: Log,
 };
 

pkg/app/web/src/components/login-form.stories.tsx

@@ -3,7 +3,7 @@ import { LoginForm } from "./login-form";
 import { createDecoratorRedux } from "../../.storybook/redux-decorator";
 
 export default {
-  title: "LoginForm",
+  title: "LOGIN/LoginForm",
   component: LoginForm,
   decorators: [createDecoratorRedux({})],
 };

pkg/app/web/src/components/pipeline-stage.stories.tsx

@@ -4,7 +4,7 @@ import { StageStatus } from "pipe/pkg/app/web/model/deployment_pb";
 import { action } from "@storybook/addon-actions";
 
 export default {
-  title: "DEPLOYMENT|Pipeline/PipelineStage",
+  title: "DEPLOYMENT/Pipeline/PipelineStage",
   component: PipelineStage,
 };
 

pkg/app/web/src/components/pipeline.stories.tsx

@@ -118,7 +118,7 @@ const fakeDeployment: Deployment = {
 };
 
 export default {
-  title: "DEPLOYMENT|Pipeline/Pipeline",
+  title: "DEPLOYMENT/Pipeline/Pipeline",
   component: Pipeline,
   decorators: [
     createDecoratorRedux({

pkg/app/web/src/components/split-button.stories.tsx

@@ -4,7 +4,7 @@ import CancelIcon from "@material-ui/icons/Cancel";
 import { action } from "@storybook/addon-actions";
 
 export default {
-  title: "COMMON|SplitButton",
+  title: "COMMON/SplitButton",
   component: SplitButton,
 };
 

pkg/app/web/src/components/stage-status-icon.stories.tsx

@@ -3,7 +3,7 @@ import { StatusIcon as DeploymentStatusIcon } from "./deployment-status-icon";
 import { DeploymentStatus } from "pipe/pkg/app/web/model/deployment_pb";
 
 export default {
-  title: "DEPLOYMENT|StatusIcon",
+  title: "DEPLOYMENT/StatusIcon",
   component: DeploymentStatusIcon,
 };
 

pkg/app/web/src/components/static-admin-form.stories.tsx

@@ -3,7 +3,7 @@ import { StaticAdminForm } from "./static-admin-form";
 import { action } from "@storybook/addon-actions";
 
 export default {
-  title: "StaticAdminForm",
+  title: "SETTINGS/StaticAdminForm",
   component: StaticAdminForm,
 };
 

pkg/app/web/src/components/sync-state-reason.stories.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { SyncStateReason } from "./sync-state-reason";
 
 export default {
-  title: "APPLICATION|SyncStateReason",
+  title: "APPLICATION/SyncStateReason",
   component: SyncStateReason,
 };
 

pkg/app/web/src/components/sync-status-icon.stories.tsx

@@ -3,7 +3,7 @@ import { SyncStatusIcon } from "./sync-status-icon";
 import { ApplicationSyncStatus } from "pipe/pkg/app/web/model/application_pb";
 
 export default {
-  title: "APPLICATION|SyncStatusIcon",
+  title: "APPLICATION/SyncStatusIcon",
   component: SyncStatusIcon,
 };
 

pkg/app/web/src/components/toasts.stories.tsx

@@ -3,7 +3,7 @@ import { Toasts } from "./toasts";
 import { createDecoratorRedux } from "../../.storybook/redux-decorator";
 
 export default {
-  title: "COMMON|Toasts",
+  title: "COMMON/Toasts",
   component: Toasts,
   decorators: [
     createDecoratorRedux({