Bring production up to date properly

.github/workflows/node-prod.yml

@@ -31,17 +31,17 @@ jobs:
       run:
         working-directory: server
     steps:
-      - uses: actions/checkout@v3
-      - uses: docker/setup-buildx-action@v1
+      - uses: actions/checkout@v4
+      - uses: docker/setup-buildx-action@v3
         with:
           buildkitd-flags: --debug
-      - uses: actions/cache@v3
+      - uses: actions/cache@v4
         with:
           path: /tmp/.buildx-cache
           key: ${{ runner.os }}-buildx-${{ github.sha }}
           restore-keys: |
             ${{ runner.os }}-buildx-
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
           node-version: 16
           cache: yarn
@@ -78,7 +78,7 @@ jobs:
     environment: OSMP_PROD
     concurrency: OSMP_PROD
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - uses: docker/login-action@v1
         with:
           registry: ghcr.io
@@ -118,6 +118,14 @@ jobs:
           G4RD_GRANT_TYPE: ${{ secrets.G4RD_GRANT_TYPE }}
           G4RD_TOKEN_URL: ${{ secrets.G4RD_TOKEN_URL }}
           G4RD_CLIENT_ID: ${{ secrets.G4RD_CLIENT_ID }}
+          CMH_AZURE_CLIENT_ID: ${{ secrets.CMH_AZURE_CLIENT_ID }}
+          CMH_AZURE_CLIENT_SECRET: ${{ secrets.CMH_AZURE_CLIENT_SECRET }}
+          CMH_TOKEN_URL: ${{ secrets.CMH_TOKEN_URL }}
+          CMH_RESOURCE: ${{ secrets.CMH_RESOURCE }}
+          CMH_SCOPE: ${{ secrets.CMH_SCOPE }}
+          CMH_GRANT_TYPE: ${{ secrets.CMH_GRANT_TYPE }}
+          CMH_GENE42_SECRET: ${{ secrets.CMH_GENE42_SECRET }}
+          CMH_URL: ${{ secrets.CMH_URL }}
           KEYCLOAK_AUTH_URL: ${{ secrets.KEYCLOAK_AUTH_URL }}
           KEYCLOAK_REALM: ${{ secrets.KEYCLOAK_REALM }}
           KEYCLOAK_CLIENT_ID: ${{ secrets.KEYCLOAK_CLIENT_ID }}

.github/workflows/node.yml

@@ -33,17 +33,17 @@ jobs:
       run:
         working-directory: server
     steps:
-      - uses: actions/checkout@v3
-      - uses: docker/setup-buildx-action@v1
+      - uses: actions/checkout@v4
+      - uses: docker/setup-buildx-action@v3
         with:
           buildkitd-flags: --debug
-      - uses: actions/cache@v3
+      - uses: actions/cache@v4
         with:
           path: /tmp/.buildx-cache
           key: ${{ runner.os }}-buildx-${{ github.sha }}
           restore-keys: |
             ${{ runner.os }}-buildx-
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
           node-version: 16
           cache: yarn
@@ -77,17 +77,17 @@ jobs:
       run:
         working-directory: test-node
     steps:
-      - uses: actions/checkout@v3
-      - uses: docker/setup-buildx-action@v1
+      - uses: actions/checkout@v4
+      - uses: docker/setup-buildx-action@v3
         with:
           buildkitd-flags: --debug
-      - uses: actions/cache@v3
+      - uses: actions/cache@v4
         with:
           path: /tmp/.buildx-cache
           key: ${{ runner.os }}-buildx-${{ github.sha }}
           restore-keys: |
             ${{ runner.os }}-buildx-
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
           node-version: 16
           cache: yarn
@@ -123,7 +123,7 @@ jobs:
     environment: SSMP_SERVER_DEV
     concurrency: SSMP_SERVER_DEV
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - uses: docker/login-action@v1
         with:
           registry: ghcr.io

.github/workflows/react-prod.yml

@@ -32,14 +32,14 @@ jobs:
         shell: bash
         working-directory: react
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
           node-version: 16
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn cache dir)"
-      - uses: actions/cache@v2
+        run: echo "dir=$(yarn cache dir)" >> "$GITHUB_OUTPUT"
+      - uses: actions/cache@v4
         id: yarn-cache
         with:
           path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
@@ -69,14 +69,14 @@ jobs:
     concurrency: OSMP_PROD
     if: github.ref == 'refs/heads/production'
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
           node-version: 16
       - name: Get yarn cache path
         id: yarn-cache-path
-        run: echo "::set-output name=dir::$(yarn cache dir)"
-      - uses: actions/cache@v2
+        run: echo "dir=$(yarn cache dir)" >> "$GITHUB_OUTPUT"
+      - uses: actions/cache@v4
         id: restore
         with:
           path: |

.github/workflows/react.yml

@@ -21,14 +21,14 @@ jobs:
         shell: bash
         working-directory: react
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
           node-version: 16
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn cache dir)"
-      - uses: actions/cache@v2
+        run: echo "dir=$(yarn cache dir)" >> "$GITHUB_OUTPUT"
+      - uses: actions/cache@v4
         id: yarn-cache
         with:
           path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
@@ -58,14 +58,14 @@ jobs:
     concurrency: SSMP_BUILD
     if: github.ref == 'refs/heads/develop'
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
           node-version: 16
       - name: Get yarn cache path
         id: yarn-cache-path
-        run: echo "::set-output name=dir::$(yarn cache dir)"
-      - uses: actions/cache@v2
+        run: echo "dir=$(yarn cache dir)" >> "$GITHUB_OUTPUT"
+      - uses: actions/cache@v4
         id: restore
         with:
           path: |

react/src/components/ComboBox.tsx

@@ -30,7 +30,6 @@ interface ComboBoxProps<T> {
 }
 
 export const Wrapper = styled(Flex)`
-    position: relative
     min-height: 38px;
     flex-wrap: wrap;
     flex-grow: 0;
@@ -128,7 +127,7 @@ export default function ComboBox<T extends {}>({
                     </>
                 )}
             </Header>
-            <SelectableListWrapper fullWidth>
+            <SelectableListWrapper>
                 {open && (
                     <SelectableList
                         ref={ref}

react/src/components/ErrorText.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import styled from 'styled-components/macro';
+import Typography from './Typography';
+
+const ErrorWrapper = styled.div`
+    margin: 0 0 ${props => props.theme.space[2]};
+    padding: ${props => props.theme.space[4]} 0.75rem 0;
+`;
+
+const ErrorText: React.FC<{ error?: string }> = ({ error }) =>
+    error ? (
+        <ErrorWrapper>
+            <Typography error variant="subtitle" bold condensed>
+                {error}
+            </Typography>
+        </ErrorWrapper>
+    ) : null;
+
+export default ErrorText;

react/src/components/Search/GeneCombinedSearch.tsx

@@ -0,0 +1,145 @@
+import React, { useState } from 'react';
+import { FaCaretDown } from 'react-icons/fa';
+import styled from 'styled-components/macro';
+import { useClickAway } from '../../hooks';
+import { AssemblyId } from '../../types';
+import { Flex } from '../Layout';
+import SelectableList, { SelectableListItem, SelectableListWrapper } from '../SelectableList';
+import GeneNameSearch, { GeneSelectionValue } from './GeneNameSearch';
+import GenePositionSearch from './GenePositionSearch';
+
+const SearchWrapper = styled(Flex)`
+    position: relative
+    min-height: 40px;
+    flex-wrap: nowrap;
+    flex-grow: 1;
+    position: relative;
+    width: 100%;
+`;
+
+const DropdownWrapper = styled(Flex)`
+    position: relative;
+    min-height: 38px;
+    flex-grow: 0;
+`;
+
+const DropdownHeader = styled(Flex)`
+    background-color: ${props => props.theme.background.main};
+    border: ${props => props.theme.borders.thin};
+    border-color: ${props => props.theme.colors.muted};
+    border-radius: ${props => props.theme.radii.base};
+    box-shadow: ${props => props.theme.boxShadow};
+    color: ${props => props.theme.colors.muted};
+    padding: 0 ${props => props.theme.space[4]};
+    flex-wrap: nowrap;
+    text-wrap: nowrap;
+    overflow: hidden;
+    white-space: nowrap;
+    min-height: 40px;
+    align-items: center;
+    justify-content: space-between;
+    cursor: pointer;
+`;
+
+const DropdownHeaderText = styled.div`
+    color: ${props => props.theme.colors.text};
+    cursor: pointer;
+    font-size: 14px;
+`;
+
+interface DropdownProps {
+    options: SelectableListItem<string>[];
+    value: string;
+    onSelect: (option: string) => void;
+}
+
+/**
+ * Dropdown component for selecting search type.
+ */
+const Dropdown: React.FC<DropdownProps> = props => {
+    // ComboBox styling is too deep, so we need our own dropdown
+
+    const [open, setOpen] = useState<Boolean>(false);
+
+    const ignoreRef = React.useRef() as React.MutableRefObject<HTMLDivElement>;
+    const ref = React.useRef() as React.MutableRefObject<HTMLUListElement>;
+
+    useClickAway(ref, () => setOpen(false), ignoreRef);
+
+    return (
+        <DropdownWrapper ref={ignoreRef}>
+            <DropdownHeader tabIndex={0} role="button" onClick={() => setOpen(true)}>
+                <DropdownHeaderText>{props.value}</DropdownHeaderText>
+                <FaCaretDown
+                    style={{
+                        marginLeft: '8px',
+                    }}
+                />
+            </DropdownHeader>
+            <SelectableListWrapper>
+                {open && (
+                    <SelectableList
+                        ref={ref}
+                        options={props.options}
+                        onSelect={item => {
+                            props.onSelect(item as string);
+                            setOpen(false);
+                        }}
+                    />
+                )}
+            </SelectableListWrapper>
+        </DropdownWrapper>
+    );
+};
+
+interface GeneCombinedSearchProps {
+    assembly: AssemblyId;
+    geneName: string;
+    onNameChange: (geneName: string) => void;
+    onNameSelect: (gene: GeneSelectionValue) => void;
+    genePosition: string;
+    onPositionChange: (genePosition: string) => void;
+    onError?: (errorText: string | undefined) => void;
+}
+
+const OPTIONS = ['Gene Name', 'Position'];
+
+/**
+ * Combined search component for searching by gene name or by position.
+ * Contains a dropdown integrated into the search bar where the user can
+ * switch between search modes.
+ */
+const GeneCombinedSearch: React.FC<GeneCombinedSearchProps> = props => {
+    const [searchMode, setSearchMode] = useState<string>(OPTIONS[0]);
+
+    return (
+        <SearchWrapper>
+            <Dropdown
+                options={OPTIONS.map((a, id) => ({
+                    id,
+                    value: a,
+                    label: a,
+                }))}
+                onSelect={option => setSearchMode(option)}
+                value={searchMode}
+            />
+            {searchMode === 'Gene Name' && (
+                <GeneNameSearch
+                    assembly={props.assembly}
+                    geneName={props.geneName}
+                    onChange={props.onNameChange}
+                    onSelect={props.onNameSelect}
+                />
+            )}
+            {searchMode === 'Position' && (
+                <GenePositionSearch
+                    position={props.genePosition}
+                    onChange={props.onPositionChange}
+                    onError={props.onError}
+                />
+            )}
+        </SearchWrapper>
+    );
+};
+
+export default GeneCombinedSearch;