Copilot commented on code in PR #5083: URL: https://github.com/apache/texera/pull/5083#discussion_r3251548672
########## ios/Texera/ContentView.swift: ########## @@ -0,0 +1,64 @@ +// +// Licensed to the Apache Software Foundation (ASF) under one +// or more contributor license agreements. See the NOTICE file +// distributed with this work for additional information +// regarding copyright ownership. The ASF licenses this file +// to you 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 SwiftUI + +struct ContentView: View { + /// The Texera frontend the app loads. Edit here and rebuild to point at a + /// different deployment (e.g. a LAN IP or a hosted instance). + static let backendURL = URL(string: "http://localhost:4200";)! Review Comment: Hard-coding `http://localhost:4200` means the app only works in the simulator on the developer Mac; on a physical iPhone `localhost` resolves to the phone itself, so it cannot reach the Texera frontend/backend described in the README. Make the backend URL configurable (for example via a settings view/UserDefaults or build configuration) and default appropriately for simulator vs device/deployed hosts. ########## frontend/src/app/dashboard/component/user/user-workflow/user-workflow-list-item/user-workflow-list-item.component.scss: ########## @@ -66,3 +66,64 @@ } } } + +// --------------------------------------------------------------------------- +// Mobile (<768px): strip the row down to "workflow name + last-modified time". +// Avatar, inline edit buttons, description, created date, project labels and +// action icons are desktop-only — they don't fit on a phone and the items +// stop being tappable when they're crammed in. Management actions are +// reachable from the workflow detail view. +// --------------------------------------------------------------------------- +@media (max-width: 767px) { + .workflow-list-item { + padding: 8px 0; + min-height: 56px; + margin-bottom: 4px; + } + + .workflow-item-meta-title { + // Drop the inline edit / add-description icons next to the name. + button { + display: none; + } + } + + .workflow-name { + font-size: 16px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + // Hide the description row entirely (often empty, eats vertical space). + .workflow-item-meta-description { + display: none; + } + + // Keep "Last Modified" only; the "Created" timestamp is rarely useful. + ::ng-deep .metadata-container { + font-size: 12px; + line-height: 1.3; + + span:nth-child(2) { + display: none; + } + } + + // Avatar (gray circle with workflow id) is pure noise on a phone. + ::ng-deep .ant-list-item-meta-avatar { + display: none; + } Review Comment: The mobile test plan expects the workflow id to remain visible (`#id`), but this rule hides the avatar that renders `workflow.wid`. Keep an id affordance visible on mobile or update the described expected row contents. ########## ios/README.md: ########## @@ -0,0 +1,105 @@ +# Texera iOS + +A SwiftUI iOS app that renders the existing Texera Angular frontend inside a +`WKWebView`. The web view is the same UI that runs in a desktop browser, so the +full workflow editor (JointJS, Monaco, etc.) is available; native chrome adds +back/forward, reload, and a configurable backend URL. + +``` +iPhone ──▶ WKWebView ──▶ http(s)://<texera-host>:<port> + (Angular SPA served by `yarn start` or a deployed + Texera instance) +``` + +## Why a wrapper, not a native rewrite? + +Re-implementing the JointJS workflow canvas in SwiftUI is months of work. +Wrapping the Angular SPA gets the full editor onto iOS in days while leaving +one canonical UI to maintain. The trade-off: touch ergonomics on the canvas +will be only as good as the web app makes them. Improving those is follow-up +work in the `frontend/` module, not here. + +## Requirements + +| Tool | Version | +| --- | --- | +| macOS | 14 Sonoma or newer | +| Xcode | 15.0+ (16+ recommended; iOS 17.0 deployment target) | +| iOS Simulator runtime | Whatever ships with your Xcode | +| [XcodeGen](https://github.com/yonaskolb/XcodeGen) | *Only* if you add/remove files — see below | + +## Run it + +The `Texera.xcodeproj` is checked in. Just open it: + +```bash +open ios/Texera.xcodeproj +``` + +Pick an iPhone simulator in the toolbar and ⌘R. + +If you don't have an iOS Simulator runtime installed, Xcode will prompt you to +download one from **Settings → Components**. + +## Adding or removing source files + +[`project.yml`](project.yml) is the source of truth for the project structure. +After adding/renaming/deleting files under `Texera/`, regenerate the +`.xcodeproj` so it stays in sync: + +```bash +brew install xcodegen # one-time +cd ios && xcodegen generate +``` + +Commit the updated `Texera.xcodeproj` alongside your source changes. Editing +the pbxproj by hand or via Xcode's "Add Files…" is fine for quick local +experiments but will diverge from `project.yml` — prefer regeneration. + +## Pointing the app at a backend + +The default backend URL is `http://localhost:4200` (the Angular dev server). +Change it in the app via the gear icon in the bottom toolbar. The value +persists in `UserDefaults` under `backendURL`. Review Comment: This section documents a gear-based settings flow and `UserDefaults` persistence that are not implemented in the added Swift files (there is no toolbar/gear or settings view). Either add the described configuration UI/persistence or update the README so contributors are not directed to a non-existent feature. ########## frontend/src/app/dashboard/component/user/user-workflow/user-workflow-list-item/user-workflow-list-item.component.scss: ########## @@ -66,3 +66,64 @@ } } } + +// --------------------------------------------------------------------------- +// Mobile (<768px): strip the row down to "workflow name + last-modified time". +// Avatar, inline edit buttons, description, created date, project labels and +// action icons are desktop-only — they don't fit on a phone and the items +// stop being tappable when they're crammed in. Management actions are +// reachable from the workflow detail view. +// --------------------------------------------------------------------------- +@media (max-width: 767px) { + .workflow-list-item { + padding: 8px 0; + min-height: 56px; + margin-bottom: 4px; + } + + .workflow-item-meta-title { + // Drop the inline edit / add-description icons next to the name. + button { + display: none; + } + } + + .workflow-name { + font-size: 16px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + // Hide the description row entirely (often empty, eats vertical space). + .workflow-item-meta-description { + display: none; + } + + // Keep "Last Modified" only; the "Created" timestamp is rarely useful. + ::ng-deep .metadata-container { + font-size: 12px; + line-height: 1.3; + + span:nth-child(2) { + display: none; + } Review Comment: The PR description/test plan says mobile workflow rows should show only the icon/id/name with no metadata, but this mobile rule keeps the `Last Modified` metadata visible and only hides `Created`. Either update the implementation to hide the metadata row on mobile or adjust the PR description/test plan to match the intended UI. ########## ios/Texera/WebView.swift: ########## @@ -0,0 +1,159 @@ +// +// Licensed to the Apache Software Foundation (ASF) under one +// or more contributor license agreements. See the NOTICE file +// distributed with this work for additional information +// regarding copyright ownership. The ASF licenses this file +// to you 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 SwiftUI +import WebKit + +@MainActor +final class WebViewModel: ObservableObject { + @Published var canGoBack: Bool = false + @Published var canGoForward: Bool = false + @Published var isLoading: Bool = false + @Published var lastError: String? + + fileprivate weak var webView: WKWebView? + + func reload() { webView?.reload() } + func goBack() { webView?.goBack() } + func goForward() { webView?.goForward() } +} + +struct WebView: UIViewRepresentable { + let url: URL + @ObservedObject var model: WebViewModel + + func makeCoordinator() -> Coordinator { + Coordinator(model: model) + } + + func makeUIView(context: Context) -> WKWebView { + let config = WKWebViewConfiguration() + config.allowsInlineMediaPlayback = true + let prefs = WKWebpagePreferences() + prefs.allowsContentJavaScript = true + config.defaultWebpagePreferences = prefs + + let webView = WKWebView(frame: .zero, configuration: config) + webView.allowsBackForwardNavigationGestures = true + webView.navigationDelegate = context.coordinator + webView.uiDelegate = context.coordinator + webView.scrollView.refreshControl = context.coordinator.makeRefreshControl(for: webView) + webView.isInspectable = true Review Comment: `isInspectable` is enabled unconditionally, so Release builds can be inspected through Safari Web Inspector. Gate this behind a DEBUG build flag (or remove it) to avoid exposing the embedded Texera session and storage in production builds. ########## ios/README.md: ########## @@ -0,0 +1,105 @@ +# Texera iOS + +A SwiftUI iOS app that renders the existing Texera Angular frontend inside a +`WKWebView`. The web view is the same UI that runs in a desktop browser, so the +full workflow editor (JointJS, Monaco, etc.) is available; native chrome adds +back/forward, reload, and a configurable backend URL. + +``` +iPhone ──▶ WKWebView ──▶ http(s)://<texera-host>:<port> + (Angular SPA served by `yarn start` or a deployed + Texera instance) +``` + +## Why a wrapper, not a native rewrite? + +Re-implementing the JointJS workflow canvas in SwiftUI is months of work. +Wrapping the Angular SPA gets the full editor onto iOS in days while leaving +one canonical UI to maintain. The trade-off: touch ergonomics on the canvas +will be only as good as the web app makes them. Improving those is follow-up +work in the `frontend/` module, not here. + +## Requirements + +| Tool | Version | +| --- | --- | +| macOS | 14 Sonoma or newer | +| Xcode | 15.0+ (16+ recommended; iOS 17.0 deployment target) | +| iOS Simulator runtime | Whatever ships with your Xcode | +| [XcodeGen](https://github.com/yonaskolb/XcodeGen) | *Only* if you add/remove files — see below | + +## Run it + +The `Texera.xcodeproj` is checked in. Just open it: + +```bash +open ios/Texera.xcodeproj +``` + +Pick an iPhone simulator in the toolbar and ⌘R. + +If you don't have an iOS Simulator runtime installed, Xcode will prompt you to +download one from **Settings → Components**. + +## Adding or removing source files + +[`project.yml`](project.yml) is the source of truth for the project structure. +After adding/renaming/deleting files under `Texera/`, regenerate the +`.xcodeproj` so it stays in sync: + +```bash +brew install xcodegen # one-time +cd ios && xcodegen generate +``` + +Commit the updated `Texera.xcodeproj` alongside your source changes. Editing +the pbxproj by hand or via Xcode's "Add Files…" is fine for quick local +experiments but will diverge from `project.yml` — prefer regeneration. + +## Pointing the app at a backend + +The default backend URL is `http://localhost:4200` (the Angular dev server). +Change it in the app via the gear icon in the bottom toolbar. The value +persists in `UserDefaults` under `backendURL`. + +For development against a Mac running `yarn start` in `frontend/`: + +| Where the app runs | URL to set | +| --- | --- | +| iOS Simulator on the same Mac | `http://localhost:4200` | +| Physical iPhone on the same Wi-Fi | `http://<mac-lan-ip>:4200` | +| Deployed Texera | `https://<your-host>` | + +`http://localhost` and local-network IPs are allowed via an ATS exception in +[Texera/Info.plist](Texera/Info.plist). Public HTTPS works without +configuration. Plain HTTP to public hosts is intentionally blocked. + +## What's in the box + +| File | Role | +| --- | --- | +| [project.yml](project.yml) | XcodeGen spec — single source of truth for the project | +| [Texera/TexeraApp.swift](Texera/TexeraApp.swift) | `@main` entry point | +| [Texera/ContentView.swift](Texera/ContentView.swift) | Root view: web view + bottom toolbar | +| [Texera/WebView.swift](Texera/WebView.swift) | `UIViewRepresentable` wrapping `WKWebView` | +| [Texera/SettingsView.swift](Texera/SettingsView.swift) | Sheet to edit the backend URL | Review Comment: `Texera/SettingsView.swift` is listed as part of the scaffold, but that file is not present in the PR. Remove this row or add the missing view so the README matches the committed project. -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: [email protected] For queries about this service, please contact Infrastructure at: [email protected]
