💫 feat: add protocol field on build setting (#16)

src/components/organisms/editService/BuildSettingsTab.tsx

@@ -8,25 +8,36 @@ import StyledForm from 'components/atoms/StyledForm';
 import TwoColumns from 'components/atoms/TwoColumns';
 import { FormikProps } from 'formik';
 import React from 'react';
-import { useSelector } from 'react-redux';
-import { AppState } from 'states/app/types';
-import { RootState } from 'states/types';
 import { EditServiceTabProps } from 'types/props/editService';
 import { EditServicePageValues } from 'types/service';
+import { Block, RunConfig } from 'types/proto/models_pb';
 
 import Divider from '@material-ui/core/Divider';
-
+import FormikSelect, { InputProps } from 'components/atoms/FormikSelect';
+import { useAppState } from 'components/hooks/ReduxStateHook';
 import LanguageSelector from './LanguageSelector';
 
+const ProtocolOptions: InputProps[] = [
+  {
+    label: 'HTTP',
+    value: RunConfig.Protocol.HTTP,
+    disabled: false,
+  },
+  {
+    label: 'GRPC',
+    value: RunConfig.Protocol.GRPC,
+    disabled: false,
+  },
+];
+
 export default ({
   tabIndex,
   isCreate,
   isPromotedService,
+  serviceType,
   ...formikProps
 }: FormikProps<EditServicePageValues> & EditServiceTabProps) => {
-  const { config } = useSelector<RootState, AppState>(
-    (state: RootState) => state.app
-  );
+  const { config } = useAppState();
   return (
     <StyledForm>
       <FormContainer>
@@ -51,6 +62,26 @@ export default ({
           withPort={true}
           disabled={isPromotedService}
         />
+        <VerticalSpacer size={40} />
+        {serviceType === Block.Type.BACKEND_API && (
+          <TwoColumns layout="EVEN" responsive>
+            <FormikSelect
+              name="protocol"
+              label="Protocol"
+              variant="outlined"
+              type="number"
+              handleChange={(evt) => {
+                formikProps.setFieldValue(
+                  'protocol',
+                  parseInt(evt.target.value, 10)
+                );
+              }}
+              handleBlur={formikProps.handleBlur}
+              options={ProtocolOptions}
+              disabled={isPromotedService}
+            />
+          </TwoColumns>
+        )}
       </FormContainer>
     </StyledForm>
   );

src/components/organisms/sidePanel/EditService.tsx

@@ -542,6 +542,7 @@ export default ({
                   isCreate={isCreate}
                   service={service}
                   release={release}
+                  serviceType={serviceType}
                   isPromotedService={isPromotedService}
                   {...formikProps}
                 />

src/libraries/helpers/editService.ts

@@ -8,26 +8,20 @@ import {
   MESSAGE_INVALID_CRON_PATTERN,
   MESSAGE_PORT_MUST_BE_INTEGER,
   MESSAGE_STATIC_OUTPUT_PATH_MUST_BE_RELATIVE,
-  MESSAGE_SUBFOLDER_PATH_MUST_BE_RELATIVE,
+  MESSAGE_SUBFOLDER_PATH_MUST_BE_RELATIVE
 } from 'libraries/constants';
 import { REACT_APP_SLEEP_MODE_TTL_MINUTES } from 'libraries/envVars';
 import { getIndexFromValue, getValueFromIndex, round } from 'libraries/helpers';
 import { KintoConfig } from 'types';
 import CatalogSchema from 'types/catalog';
-import {
-  AutoScaling,
-  Block,
-  BuildConfig,
-  Release,
-  Repository,
-  Resources,
-  RunConfig,
-} from 'types/proto/models_pb';
+import { AutoScaling, Block, BuildConfig, Release, Repository, Resources, RunConfig } from 'types/proto/models_pb';
 import { EditServicePageValues, EnvVar, ServiceType } from 'types/service';
 import * as Yup from 'yup';
 
 import { EnvVarSchema, ServiceNameSchema } from './yup';
 
+
+
 const LanguageSchema = {
   language: Yup.number().required(),
   dockerfile: Yup.string().when('language', {
@@ -186,6 +180,7 @@ export const getInitialValuesByType = (
     languageVersion: buildConfig.getLanguageversion() || '',
     subfolderPath: buildConfig.getPathtocode() || '.',
     staticOutputPath: buildConfig.getPathtostaticoutput() || 'public',
+    protocol: runConfig.getProtocol() || RunConfig.Protocol.HTTP,
     envVars:
       runConfig
         .getEnvvarsMap()
@@ -340,6 +335,11 @@ export const generateConfigsFromValuesAndType = (
     runConfig.setSleepmodettlseconds(60 * REACT_APP_SLEEP_MODE_TTL_MINUTES);
   }
 
+  // only backend API support HTTP/GRPC protocols
+  if (serviceType === Block.Type.BACKEND_API) {
+    runConfig.setProtocol(values.protocol);
+  }
+
   guardRunConfig(serviceType, runConfig);
 
   if (values.language !== BuildConfig.Language.DOCKERFILE) {

src/types/props/editService.ts

@@ -1,4 +1,5 @@
 import { Block, Release } from 'types/proto/models_pb';
+import { ServiceType } from '../service';
 
 // Separating into this file is to avoid dependency cycle
 export interface EditServiceTabProps {
@@ -7,4 +8,5 @@ export interface EditServiceTabProps {
   isPromotedService: boolean;
   service: Block;
   release: Release;
+  serviceType: ServiceType;
 }

src/types/service.ts

@@ -5,6 +5,7 @@ import {
   Block,
   BuildConfig,
   JobStatus as JobStatusModel,
+  RunConfig
 } from 'types/proto/models_pb';
 import { Moment } from 'moment';
 
@@ -40,6 +41,7 @@ export interface EditServicePageValues {
   dockerfile: string;
   port: string;
   subfolderPath: string;
+  protocol: ProtocolType;
 
   // only for static websites
   staticOutputPath: string;
@@ -86,6 +88,7 @@ export interface ServiceMetrics {
 export type ServiceStateType = BlockStatus.StateMap[keyof BlockStatus.StateMap];
 export type ServiceType = Block.TypeMap[keyof Block.TypeMap];
 export type LanguageType = BuildConfig.LanguageMap[keyof BuildConfig.LanguageMap];
+export type ProtocolType = RunConfig.ProtocolMap[keyof RunConfig.ProtocolMap];
 
 export type JobStateType = JobStatusModel.StateMap[keyof JobStatusModel.StateMap];