feat(ios): implementing iosTokenVariant details (#70)

* Added the new iOSToken Detail panel
* Added validation

.gitignore

@@ -28,3 +28,4 @@ yarn-error.log*
 
 .project
 *.css
+*.iml

package.json

@@ -7,6 +7,7 @@
     "@fortawesome/fontawesome-free": "^5.13.0",
     "@patternfly/react-core": "4.18.5",
     "@types/react-syntax-highlighter": "^11.0.4",
+    "json-data-validator": "^0.6.3",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-scripts": "3.4.1",

src/application/ApplicationDetail/ApplicationDetail.tsx

@@ -29,6 +29,7 @@ export class ApplicationDetail extends Component<Props> {
         <Tab eventKey={0} title="Variants">
           <NoVariantsPanel app={this.props.app} />
           <VariantsPanel app={this.props.app} variantType="android" />
+          <VariantsPanel app={this.props.app} variantType="ios_token" />
         </Tab>
       </Tabs>
     </Modal>

src/application/ApplicationDetail/panels/VariantDetails.tsx

@@ -1,13 +1,10 @@
 import React, { Component } from 'react';
-import {
-  Variant,
-  AndroidVariant,
-  PushApplication,
-} from '@aerogear/unifiedpush-admin-client';
+import { Variant, PushApplication } from '@aerogear/unifiedpush-admin-client';
 import { RedoIcon } from '@patternfly/react-icons';
 import {
   Button,
   ButtonVariant,
+  Label,
   Text,
   TextContent,
   TextList,
@@ -20,10 +17,13 @@ import { UpsClientFactory } from '../../../utils/UpsClientFactory';
 import { RenewVariantSecret } from './dialogs/RenewVariantSecret';
 import { AndroidVariantDetails } from './android/AndroidVariantDetails';
 import { AndroidCodeSnippets } from './android/AndroidCodeSnippets';
+import { links } from '../../../links';
+import { IOSTokenVariantDetails } from './ios_token/iOSTokenVariantDetails';
+import { IOSTokenCodeSnippets } from './ios_token/iOSTokenCodeSnippets';
 
 interface Props {
   app: PushApplication;
-  variant: AndroidVariant;
+  variant: Variant;
 }
 
 interface State {
@@ -41,6 +41,59 @@ export class VariantDetails extends Component<Props, State> {
   }
 
   render = () => {
+    const intro = () => {
+      switch (this.props.variant.type) {
+        case 'android':
+          return (
+            <Text component={TextVariants.small}>
+              Firebase's Cloud Messaging Network (FCM) will be used. To learn
+              more about FCM, visit our{' '}
+              <Label
+                color="blue"
+                href={links.pushApplications.variants.android.docs.java_client}
+              >
+                Android
+              </Label>{' '}
+              or{' '}
+              <Label
+                color="blue"
+                href={
+                  links.pushApplications.variants.android.docs.cordova_client
+                }
+              >
+                Apache Cordova{' '}
+              </Label>{' '}
+              guides for push.
+            </Text>
+          );
+        case 'ios_token':
+          return (
+            <Text component={TextVariants.small}>
+              Apple's Push Network (APNs) will be used. To learn more about
+              APNs, visit our{' '}
+              <Label
+                color="blue"
+                href={links.pushApplications.variants.ios_token.docs.ios_client}
+              >
+                iOS
+              </Label>{' '}
+              or{' '}
+              <Label
+                color="blue"
+                href={
+                  links.pushApplications.variants.ios_token.docs.cordova_client
+                }
+              >
+                Apache Cordova
+              </Label>{' '}
+              guides for push.
+            </Text>
+          );
+        default:
+          return <Text component={TextVariants.small} />;
+      }
+    };
+
     const onRefreshed = (variant: Variant) => {
       this.props.variant.secret = variant.secret;
       this.setState({ refreshSecret: false });
@@ -56,11 +109,7 @@ export class VariantDetails extends Component<Props, State> {
           onRefreshed={onRefreshed}
         />
         <TextContent style={{ marginBottom: 20 }}>
-          <Text component={TextVariants.small}>
-            Firebase's Cloud Messaging Network (FCM) will be used. To learn more
-            about FCM, visit our Android, Chrome or Apache Cordova guides for
-            push.
-          </Text>
+          {intro()}
           <TextList component={TextListVariants.dl}>
             <TextListItem component={TextListItemVariants.dt}>
               Server URL:
@@ -97,11 +146,20 @@ export class VariantDetails extends Component<Props, State> {
             app={this.props.app}
             variant={this.props.variant}
           />
+
+          <IOSTokenVariantDetails
+            app={this.props.app}
+            variant={this.props.variant}
+          />
         </TextContent>
         <AndroidCodeSnippets
           app={this.props.app}
           variant={this.props.variant}
         />
+        <IOSTokenCodeSnippets
+          app={this.props.app}
+          variant={this.props.variant}
+        />
       </>
     );
   };

src/application/ApplicationDetail/panels/VariantsPanel.tsx

@@ -26,9 +26,11 @@ export interface Props {
 export abstract class VariantsPanel extends Component<Props> {
   private getVariants(): Variant[] {
     if (this.props.app?.variants && this.props.app?.variants.length > 0) {
-      return this.props.app.variants.filter(
+      const res = this.props.app.variants.filter(
         (variant: Variant) => variant.type === this.props.variantType
       );
+      console.log({ type: this.props.variantType, res });
+      return res;
     }
 
     return [];
@@ -42,7 +44,7 @@ export abstract class VariantsPanel extends Component<Props> {
         case 'ios':
           return '';
         case 'ios_token':
-          return '';
+          return 'fab fa-apple fa-3x muted';
         case 'web_push':
           return '';
         default:
@@ -79,7 +81,7 @@ export abstract class VariantsPanel extends Component<Props> {
           </CardHeader>
           <CardBody>
             <DataList aria-label="Expandable data list example">
-              {this.props.app?.variants?.map(variant => (
+              {variants?.map(variant => (
                 <VariantItem variant={variant} app={this.props.app!} />
               ))}
             </DataList>

src/application/ApplicationDetail/panels/android/AndroidCodeSnippets.tsx

@@ -1,20 +1,17 @@
-import {
-  AndroidVariant,
-  PushApplication,
-} from '@aerogear/unifiedpush-admin-client';
+import { PushApplication, Variant } from '@aerogear/unifiedpush-admin-client';
 import React, { Component } from 'react';
 import { Tab, Tabs } from '@patternfly/react-core';
 import { CodeSnippet } from '../CodeSnippet';
 import {
-  cordova_snippet,
+  cordova_snippet_android,
   java_snippet,
   push_config_android,
   react_native_android,
 } from '../../snippets';
 
 interface Props {
   app: PushApplication;
-  variant: AndroidVariant;
+  variant: Variant;
 }
 
 interface State {
@@ -59,7 +56,7 @@ export class AndroidCodeSnippets extends Component<Props, State> {
           <CodeSnippet
             variant={this.props.variant}
             language={'javascript'}
-            snippet={cordova_snippet}
+            snippet={cordova_snippet_android}
           />
         </Tab>
         <Tab eventKey={'react-native'} title="React-Native">