[v12] WebDiscover: Revert deleting the app wizard (#26282)

web/packages/teleport/src/Apps/AddApp/AddApp.story.tsx

@@ -0,0 +1,80 @@
+/**
+ * Copyright 2020 Gravitational, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+
+import { AddApp } from './AddApp';
+
+export default {
+  title: 'Teleport/Apps/Add',
+};
+
+export const Created = () => (
+  <AddApp {...props} attempt={{ status: 'success' }} />
+);
+
+export const Loaded = () => {
+  return <AddApp {...props} />;
+};
+
+export const Processing = () => (
+  <AddApp {...props} attempt={{ status: 'processing' }} />
+);
+
+export const Failed = () => (
+  <AddApp
+    {...props}
+    attempt={{ status: 'failed', statusText: 'some error message' }}
+  />
+);
+
+export const ManuallyProcessing = () => (
+  <AddApp {...props} automatic={false} attempt={{ status: 'processing' }} />
+);
+
+export const ManuallyWithToken = () => <AddApp {...props} automatic={false} />;
+
+export const ManuallyWithoutTokenLocal = () => (
+  <AddApp {...props} automatic={false} attempt={{ status: 'failed' }} />
+);
+
+export const ManuallyWithoutTokenSSO = () => (
+  <AddApp
+    {...props}
+    automatic={false}
+    attempt={{ status: 'failed' }}
+    isAuthTypeLocal={false}
+  />
+);
+
+const props = {
+  isEnterprise: false,
+  isAuthTypeLocal: true,
+  user: 'sam',
+  automatic: true,
+  setAutomatic: () => null,
+  createToken: () => Promise.resolve(true),
+  onClose: () => null,
+  setCmdParams: () => null,
+  createJoinToken: () => Promise.resolve(null),
+  version: '5.0.0-dev',
+  reset: () => null,
+  attempt: {
+    status: '',
+    statusText: '',
+  } as any,
+  token: { id: 'join-token', expiryText: '1 hour', expiry: null },
+};

web/packages/teleport/src/Apps/AddApp/AddApp.tsx

@@ -0,0 +1,108 @@
+/**
+ * Copyright 2020 Gravitational, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import { Flex } from 'design';
+import Dialog, { DialogTitle } from 'design/Dialog';
+
+import * as Icons from 'design/Icon';
+
+import useTeleport from 'teleport/useTeleport';
+
+import { TabIcon } from 'teleport/components/TabIcon';
+
+import { Manually } from './Manually';
+
+import { Automatically } from './Automatically';
+import useAddApp, { State } from './useAddApp';
+
+export default function Container(props: Props) {
+  const ctx = useTeleport();
+  const state = useAddApp(ctx);
+  return <AddApp {...state} {...props} />;
+}
+
+export function AddApp({
+  user,
+  onClose,
+  createToken,
+  isEnterprise,
+  version,
+  attempt,
+  automatic,
+  setAutomatic,
+  isAuthTypeLocal,
+  token,
+}: State & Props) {
+  return (
+    <Dialog
+      dialogCss={() => ({
+        maxWidth: '600px',
+        width: '100%',
+        minHeight: '330px',
+      })}
+      disableEscapeKeyDown={false}
+      onClose={onClose}
+      open={true}
+    >
+      <Flex flex="1" flexDirection="column">
+        <Flex alignItems="center" justifyContent="space-between" mb="4">
+          <DialogTitle mr="auto">Add Application</DialogTitle>
+          {isEnterprise && (
+            <>
+              <TabIcon
+                Icon={Icons.Wand}
+                title="Automatically"
+                active={automatic}
+                onClick={() => setAutomatic(true)}
+              />
+              <TabIcon
+                Icon={Icons.Cog}
+                title="Manually"
+                active={!automatic}
+                onClick={() => setAutomatic(false)}
+              />
+            </>
+          )}
+        </Flex>
+        {automatic && (
+          <Automatically
+            onClose={onClose}
+            onCreate={createToken}
+            attempt={attempt}
+            token={token}
+          />
+        )}
+        {!automatic && (
+          <Manually
+            isAuthTypeLocal={isAuthTypeLocal}
+            isEnterprise={isEnterprise}
+            onClose={onClose}
+            user={user}
+            version={version}
+            createToken={createToken}
+            attempt={attempt}
+            token={token}
+          />
+        )}
+      </Flex>
+    </Dialog>
+  );
+}
+
+type Props = {
+  onClose(): void;
+};

web/packages/teleport/src/Apps/AddApp/Automatically.test.tsx

@@ -0,0 +1,64 @@
+/**
+ * Copyright 2023 Gravitational, Inc
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import { fireEvent, render, screen } from 'design/utils/testing';
+
+import { Automatically, createAppBashCommand } from './Automatically';
+
+test('render command only after form submit', async () => {
+  const token = { id: 'token', expiryText: '', expiry: null };
+  render(
+    <Automatically
+      token={token}
+      attempt={{ status: 'success' }}
+      onClose={() => {}}
+      onCreate={() => Promise.resolve(true)}
+    />
+  );
+
+  // initially, should not show the command
+  let cmd = createAppBashCommand(token.id, '', '');
+  expect(screen.queryByText(cmd)).not.toBeInTheDocument();
+
+  // set app name
+  const appNameInput = screen.getByPlaceholderText('jenkins');
+  fireEvent.change(appNameInput, { target: { value: 'app-name' } });
+
+  // set app url
+  const appUriInput = screen.getByPlaceholderText('https://localhost:4000');
+  fireEvent.change(appUriInput, {
+    target: { value: 'https://gravitational.com' },
+  });
+
+  // click button
+  screen.getByRole('button', { name: /Generate Script/i }).click();
+
+  // after form submission should show the command
+  cmd = createAppBashCommand(token.id, 'app-name', 'https://gravitational.com');
+  expect(screen.getByText(cmd)).toBeInTheDocument();
+});
+
+test('app bash command encoding', () => {
+  const token = '86';
+  const appName = 'jenkins';
+  const appUri = `http://myapp/test?b='d'&a="1"&c=|`;
+
+  const cmd = createAppBashCommand(token, appName, appUri);
+  expect(cmd).toBe(
+    `sudo bash -c "$(curl -fsSL 'http://localhost/scripts/86/install-app.sh?name=jenkins&uri=http%3A%2F%2Fmyapp%2Ftest%3Fb%3D%27d%27%26a%3D%221%22%26c%3D%7C')"`
+  );
+});