Fix unneeded things appear during autocomplete (#61)

* fix storageTypes link Signed-off-by: Oleksii Orel <[email protected]> * fix unneeded things appear during autocomplete Signed-off-by: Oleksii Orel <[email protected]> * fixup! fix unneeded things appear during autocomplete
eclipse-che · Aug 31, 2020 · e3fa786 · e3fa786
1 parent 77088ec
commit e3fa786
Show file tree

Hide file tree

Showing 10 changed files with 107 additions and 14 deletions.
diff --git a/assets/branding/product.json b/assets/branding/product.json
@@ -30,6 +30,7 @@
     "converting": "https://www.eclipse.org/che/docs/che-7/converting-a-che-6-workspace-to-a-che-7-devfile/",
     "certificate": "https://www.eclipse.org/che/docs/che-7/installing-che-in-tls-mode-with-self-signed-certificates/#using-che-with-tls_installing-che-in-tls-mode-with-self-signed-certificates",
     "general": "https://www.eclipse.org/che/docs/che-7",
-    "storageTypes": "https://www.eclipse.org/che/docs/che-7/using-different-type-of-storage/"
+    "storageTypes": "https://www.eclipse.org/che/docs/che-7/using-different-type-of-storage/",
+    "webSocketTroubleshooting": "https://www.eclipse.org/che/docs/che-7/troubleshooting-network-problems/#troubleshooting-websocket-secure-connections_troubleshooting-network-problems"
   }
 }
diff --git a/src/app.styl b/src/app.styl
@@ -1,6 +1,14 @@
 .pf-c-form
   --pf-c-form--m-horizontal__group-label--md--GridColumnWidth: 11rem
 
+div.tippy-popper
+  a
+    pointer-events initial
+  a:not(:hover)
+    --pf-global--link--Color: #73bcf7
+  a:hover
+    --pf-global--link--Color: #2b9af3
+
 div.main-page-loader
   font-family Helvetica, Arial, sans-serif
   font-size 24px

diff --git a/src/components/DevfileEditor/index.tsx b/src/components/DevfileEditor/index.tsx
@@ -102,6 +102,12 @@ export class DevfileEditor extends React.PureComponent<Props, State> {
     const items = this.props.plugins.plugins;
     const components = jsonSchema && jsonSchema.properties ? jsonSchema.properties.components : undefined;
     if (components) {
+      const mountSources = components.items.properties.mountSources;
+      // mount sources is specific only for some of component types but always appears
+      // patch schema and remove default value for boolean mount sources to avoid their appearing during the completion
+      if (mountSources && mountSources.default === 'false') {
+        delete mountSources.default;
+      }
       jsonSchema.additionalProperties = true;
       if (!components.defaultSnippets) {
         components.defaultSnippets = [];

diff --git a/src/pages/GetStarted/CustomWorkspaceTab/StorageType/index.tsx b/src/pages/GetStarted/CustomWorkspaceTab/StorageType/index.tsx
@@ -41,7 +41,7 @@ type Props = {
   onChange?: (storageType: StorageType) => void;
 } & {
   brandingStore: BrandingStore.State;
-  workspaces: WorkspaceStore.WorkspacesState,
+  workspaces: WorkspaceStore.WorkspacesState;
 }
 type State = {
   isOpen?: boolean;

diff --git a/src/pages/GetStarted/GetStartedTab/SamplesListToolbar.tsx b/src/pages/GetStarted/GetStartedTab/SamplesListToolbar.tsx
@@ -21,7 +21,7 @@ import {
   TextInput,
   TextInputProps,
 } from '@patternfly/react-core';
-import { TemporaryStorageSwitch } from './TemporaryStorageSwitch';
+import TemporaryStorageSwitch from './TemporaryStorageSwitch';
 import * as DevfileFiltersStore from '../../../store/DevfileFilters';
 import { AppState } from '../../../store';
 

diff --git a/src/pages/GetStarted/GetStartedTab/TemporaryStorageSwitch.tsx b/src/pages/GetStarted/GetStartedTab/TemporaryStorageSwitch.tsx
@@ -13,14 +13,20 @@
 import React, { FormEvent } from 'react';
 import {
   Switch,
+  Text,
   Tooltip,
   TooltipPosition
 } from '@patternfly/react-core';
+import { connect } from 'react-redux';
+import { AppState } from '../../../store';
+import * as BrandingStore from '../../../store/Branding';
 import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons';
 
 type TemporaryStorageSwitchProps = {
   persistVolumesDefault: string;
   onChange: (temporary: boolean) => void;
+} & {
+  brandingStore: BrandingStore.State;
 };
 
 type TemporaryStorageSwitchState = {
@@ -45,6 +51,7 @@ export class TemporaryStorageSwitch extends React.PureComponent<TemporaryStorage
   }
 
   render(): React.ReactElement {
+    const href = this.props.brandingStore.data.docs.storageTypes;
     const isChecked = this.state.isChecked;
     return (
       <React.Fragment>
@@ -59,10 +66,16 @@ export class TemporaryStorageSwitch extends React.PureComponent<TemporaryStorage
         <span style={{ marginLeft: '10px' }}>
           <Tooltip
             id="temporary-storage-tooltip"
+            exitDelay={8000}
             isContentLeftAligned={true}
             position={TooltipPosition.top}
             content={
-              <div>Temporary Storage allows for faster I/O but may have limited storage and is not persistent.</div>
+              <React.Fragment>
+                Temporary Storage allows for faster I/O but may have limited storage and is not persistent.
+                <Text>
+                  <a rel="noreferrer" target="_blank" href={href}>Open documentation page</a>
+                </Text>
+              </React.Fragment>
             }
           >
             <OutlinedQuestionCircleIcon />
@@ -73,3 +86,9 @@ export class TemporaryStorageSwitch extends React.PureComponent<TemporaryStorage
   }
 
 }
+
+export default connect(
+  (state: AppState) => ({
+    brandingStore: state.branding,
+  }),
+)(TemporaryStorageSwitch);
diff --git a/src/pages/GetStarted/GetStartedTab/__tests__/SamplesListGallery.spec.tsx b/src/pages/GetStarted/GetStartedTab/__tests__/SamplesListGallery.spec.tsx
@@ -90,7 +90,13 @@ function createFakeStore(metadata?: che.DevfileMetaData[]): Store {
       plugins: [],
     },
     workspaces: {} as any,
-    branding: {} as any,
+    branding: {
+      data: {
+        docs: {
+          storageTypes: 'https://docs.location'
+        }
+      }
+    } as any,
     devfileMetadataFilter: {
       filter: undefined,
       found: metadata || []

diff --git a/src/pages/GetStarted/GetStartedTab/__tests__/SamplesListToolbar.spec.tsx b/src/pages/GetStarted/GetStartedTab/__tests__/SamplesListToolbar.spec.tsx
@@ -74,7 +74,13 @@ function createFakeStore(metadata?: che.DevfileMetaData[]): Store {
       plugins: [],
     },
     workspaces: {} as any,
-    branding: {} as any,
+    branding: {
+      data: {
+        docs: {
+          storageTypes: 'https://docs.location'
+        }
+      }
+    } as any,
     devfileMetadataFilter: {
       filter: undefined,
       found: metadata || []

diff --git a/src/pages/GetStarted/GetStartedTab/__tests__/TemporaryStorageSwitch.spec.tsx b/src/pages/GetStarted/GetStartedTab/__tests__/TemporaryStorageSwitch.spec.tsx
@@ -12,17 +12,25 @@
 
 import React from 'react';
 import { RenderResult, render, screen } from '@testing-library/react';
-import { TemporaryStorageSwitch } from '../TemporaryStorageSwitch';
+import TemporaryStorageSwitch from '../TemporaryStorageSwitch';
+import thunk from 'redux-thunk';
+import createMockStore from 'redux-mock-store';
+import { Provider } from 'react-redux';
+import { Store } from 'redux';
+import { AppState } from '../../../../store';
+import mockMetadata from '../../__tests__/devfileMetadata.json';
 
 describe('Temporary Storage Switch', () => {
 
   const mockOnChange = jest.fn();
 
-  function renderSwitch(persistVolumesDefault: 'true' | 'false'): RenderResult {
+  function renderSwitch(store: Store, persistVolumesDefault: 'true' | 'false'): RenderResult {
     return render(
-      <TemporaryStorageSwitch
-        persistVolumesDefault={persistVolumesDefault}
-        onChange={mockOnChange} />
+      <Provider store={store}>
+        <TemporaryStorageSwitch
+          persistVolumesDefault={persistVolumesDefault}
+          onChange={mockOnChange} />
+      </Provider>
     );
   }
 
@@ -31,7 +39,8 @@ describe('Temporary Storage Switch', () => {
   });
 
   it('should be initially switched on', () => {
-    renderSwitch('false');
+    const store = createFakeStoreWithMetadata();
+    renderSwitch(store, 'false');
     const switchInput = screen.getByRole('checkbox') as HTMLInputElement;
     expect(switchInput.checked).toBeTruthy();
 
@@ -41,7 +50,8 @@ describe('Temporary Storage Switch', () => {
   });
 
   it('should be initially switched off', () => {
-    renderSwitch('true');
+    const store = createFakeStoreWithMetadata();
+    renderSwitch(store, 'true');
     const switchInput = screen.getByRole('checkbox') as HTMLInputElement;
     expect(switchInput.checked).toBeFalsy();
 
@@ -51,3 +61,38 @@ describe('Temporary Storage Switch', () => {
   });
 
 });
+
+function createFakeStore(metadata?: che.DevfileMetaData[]): Store {
+  const initialState: AppState = {
+    factoryResolver: {
+      isLoading: false,
+      resolver: {},
+    },
+    plugins: {
+      isLoading: false,
+      plugins: [],
+    },
+    workspaces: {} as any,
+    branding: {
+      data: {
+        docs: {
+          storageTypes: 'https://docs.location'
+        }
+      }
+    } as any,
+    devfileMetadataFilter: {
+      filter: undefined,
+      found: metadata || []
+    },
+    devfileRegistries: {} as any,
+    user: {} as any,
+    infrastructureNamespace: {} as any,
+  };
+  const middleware = [thunk];
+  const mockStore = createMockStore(middleware);
+  return mockStore(initialState);
+}
+
+function createFakeStoreWithMetadata(): Store {
+  return createFakeStore(mockMetadata);
+}
diff --git a/src/services/bootstrap/branding.constant.ts b/src/services/bootstrap/branding.constant.ts
@@ -42,6 +42,7 @@ export type BrandingDocs = {
   certificate: string;
   faq?: string;
   storageTypes: string,
+  webSocketTroubleshooting: string,
 }
 
 export type BrandingWorkspace = {
@@ -100,7 +101,8 @@ export const BRANDING_DEFAULT: BrandingData = {
     converting: 'https://www.eclipse.org/che/docs/che-7/converting-a-che-6-workspace-to-a-che-7-devfile/',
     certificate: 'https://www.eclipse.org/che/docs/che-7/setup-che-in-tls-mode-with-self-signed-certificate/',
     general: 'https://www.eclipse.org/che/docs/che-7',
-    storageTypes: 'https://www.eclipse.org/che/docs/che-7/using-different-type-of-storage/',
+    storageTypes: 'https://www.eclipse.org/che/docs/che-7/configuring-storage-types/',
+    webSocketTroubleshooting: 'https://www.eclipse.org/che/docs/che-7/troubleshooting-network-problems/#troubleshooting-websocket-secure-connections_troubleshooting-network-problems',
   },
   configuration: {
     menu: {